Skip to Content
0

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

Jul 10, 2017 at 02:10 PM

88

avatar image

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

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

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.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi Devender,

This requirement is to be done at runtime.

Regards

Karthik S

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

Karthik,

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

Share
10 |10000 characters needed characters left characters exceeded
Karthik S Jul 12, 2017 at 01:19 PM
0

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


tab.png (11.4 kB)
Share
10 |10000 characters needed characters left characters exceeded
Akhilesh Upadhyay Jul 13, 2017 at 12:40 PM
0

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.

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Akhilesh,

I can add one more field for checked property. I can compare the table rows through for loop. But my doubt is how do i set checked property for the row(similar) directly. I think there is no id for rows. Can you explain me in detail?

Regards

Karthik S

0

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.

0