Skip to Content

How to make checkbox selected when two tables have same row data(entries) in sap.ui.table sap ui5

Hi,

I have two tables(sap.ui.table). Lets say Table A and Table B.I need to compare two table rows. If any rows are similar, those rows checkbox should be selected automatically.. Please suggest some ideas.

Regards

Karthik S

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • avatar image
    Former Member
    Jul 11, 2017 at 10:36 AM

    Dear use, event select for checkbox, in the event handler, filter the same data in table2, if you find it setcheckbox as true in table2.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jul 11, 2017 at 12:06 PM

    Karthik,

    We can define event at runtime, is it possible to share sample code.

    Add comment
    10|10000 characters needed characters exceeded

  • Jul 12, 2017 at 01:19 PM

    Hi Devender,

    Please find my tables below.

    In the below tables, the first three entries are similar. So I have to compare these two tables. If any row from table 1 is available in table 2, that row should be selected(checked) automatically.

    Table 1 and Table 2 Comparison:
    <core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
    		controllerName="tablecompare.first" xmlns:table = "sap.ui.table" xmlns:html="http://www.w3.org/1999/xhtml">
    	<Page title="Title">
    		<content>
    		
    		<HBox>
    		
    		<table:Table   id="ontarioTable" visibleRowCount = "6" width="300px" selectionMode="MultiSelect" rows="{/data}" columnHeaderHeight="40px">
                <table:columns>
                   <table:Column width="150px">
                   	<Text text="Article"></Text>
                    <table:template>
                      <Text text="{Article}"/>
                    </table:template>
                  </table:Column>
                   <table:Column width="150px">
                   <Text text="Region"></Text>
                    <table:template>
                      <Text  text="{Region}" />
                    </table:template>
                  </table:Column>
                  
                </table:columns>
              </table:Table>
              
              
              <Label/>
              <Label/>
              
              <table:Table   id="queb" visibleRowCount = "6" width="300px" selectionMode="MultiSelect" rows="{/data2}" columnHeaderHeight="40px">
                <table:columns>
                   <table:Column width="150px">
                   	<Text text="Article"></Text>
                    <table:template>
                      <Text text="{Article}"/>
                    </table:template>
                  </table:Column>
                   <table:Column width="150px">
                   <Text text="Region"></Text>
                    <table:template>
                      <Text  text="{Region}" />
                    </table:template>
                  </table:Column>
                  
                </table:columns>
              </table:Table>
    		
    		</HBox>
    		
    	
    		</content>
    	</Page>
    </core:View>
    
    
    Controller:
    
    sap.ui.controller("tablecompare.first", {
    
    
    /**
    * Called when a controller is instantiated and its View controls (if available) are already created.
    * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
    * @memberOf tablecompare.first
    */
    	onInit: function() {
    		
    		
    	var odata = [
    	             
    	             
    	           {Article : "100", Region : "R1"},
    	           {Article : "200", Region : "R2"}, 
    	           {Article : "300", Region : "R3"}, 
    	           {Article : "400", Region : "R4"}, 
    	           {Article : "500", Region : "R5"}, 
    	           {Article : "600", Region : "R6"} 
    	             ];
    	
    	
    	var odata2 = [
    	             
    	             
    		           {Article : "100", Region : "R1"},
    		           {Article : "200", Region : "R2"}, 
    		           {Article : "300", Region : "R3"}, 
    		           {Article : "333", Region : "R7"}, 
    		           {Article : "540", Region : "R8"}, 
    		           {Article : "900", Region : "R9"} 
    		             ];
    	
    	var oModel = new sap.ui.model.json.JSONModel();
    	oModel.setData({data : odata});
    	this.getView().setModel(oModel);
    	
    	var oModel2 = new sap.ui.model.json.JSONModel();
    	oModel2.setData({data2 : odata2});
    	
    	this.getView().byId("queb").setModel(oModel2);
    	}tab.png
    
    
    Add comment
    10|10000 characters needed characters exceeded

  • Jul 13, 2017 at 12:40 PM

    take one more fields in data for example "checked", and bind this field to "selected" property of checkbox.

    now, do a loop in data for each record and compare it with previous records, and if its same then updated "checked" property of of that record is "true".

    once you have updated data, bind this updated data to your table using model.

    Add comment
    10|10000 characters needed characters exceeded

    • for that only you will be introducing new field i.e. "checked" ,

      1) I hope while comparing the data, you are changing the value of "checked" field to "true" for particular row, right ? if not, do this.

      2) I hope for you are having a CheckBox control in a column for each row, right ? if not, do this

      now, you are using checkbox control, just bind selected="{checked}" to checkbox,

      and, once you bind updated data to the table it will automatically checkbox will be checked.

      Or,

      you wants to select the particular row (highlighted) only ??

      are you using mode=multiselect in the table and checkbox is coming against each row automatically ??

      if provided solution is not working, pls clear your scenario bit more.