I have a bit a tricky problem. I want to disable the row selection is sap.m.Table. But the Table is available in Panel Content

<VBox items="{dataModel>/Products}">
   <Panel expandable="true" id="testPanel" expanded="false" width="auto" class="sapUiResponsiveMargin">
      <headerToolbar>
         <Toolbar style="Clear">
            <Text text="{dataModel>productText}"></Text>
         </Toolbar>
      </headerToolbar>
      <content>
         <Table id="productsTable" items="{dataModel>productsList}" id="skillsTable" visible="true" sticky="ColumnHeaders"
            mode="MultiSelect">
            <columns>
               <Column>
                  <Text text="Product Name"/>
               </Column>
               <Column>
                  <Text text="Product No"/>
               </Column>
               <Column>
                  <Text text="Asset"/>
               </Column>
               <Column>
                  <Text text="Check Duplicate"/>
               </Column>
            </columns>
            <items>
               <ColumnListItem >
                  <cells>
                     <Text text="{dataModel>productName}"/>
                     <Text text="{dataModel>productNo}"/>
                     <Text text="{dataModel>asset}"/>
                     <Text text="{dataModel>checkDuplicate}"/>
                  </cells>
               </ColumnListItem>
            </items>
         </Table>
      </content>
   </Panel>
</VBox> 

If you see the above Code, There are 3 points... 1)VBox has an array of Products 2)Inside VBox there is Panel 3)Inside Panel, in Panel Content, I have given sap.m.Table, It means like there might be multiple tables will get generated based on the data ing from backend.

Now my requirement is like how can I disable a row based on the boolean value in checkDuplicate?

Below is my controller logic, what I'm trying...

var tbl = self.getView().byId('productsTable');
var header = tbl.$().find('thead');
var selectAllCb = header.find('.sapMCb');
selectAllCb.remove();

tbl.getItems().forEach(function (r) {
    var obj = r.getBindingContext("dataModel").getObject();
    var oStatus = obj.checkDuplicate;
    var cb = r.$().find('.sapMCb');
    var oCb = sap.ui.getCore().byId(cb.attr('id'));
    if (oStatus == "true") {
        oCb.setEnabled(true);
    } else {
        oCb.setEnabled(false);
    }
});

The problem with the above logic is, if there is only one Table, then based on the Table id, I can get the row data and I can disable the row. But here multiple Tables will get generated dynamically, So I can't give ID for the Table.

Can someone please help me how can I disable the row based on checkDuplicate boolean Value?

Thank you in advance

I have a bit a tricky problem. I want to disable the row selection is sap.m.Table. But the Table is available in Panel Content

<VBox items="{dataModel>/Products}">
   <Panel expandable="true" id="testPanel" expanded="false" width="auto" class="sapUiResponsiveMargin">
      <headerToolbar>
         <Toolbar style="Clear">
            <Text text="{dataModel>productText}"></Text>
         </Toolbar>
      </headerToolbar>
      <content>
         <Table id="productsTable" items="{dataModel>productsList}" id="skillsTable" visible="true" sticky="ColumnHeaders"
            mode="MultiSelect">
            <columns>
               <Column>
                  <Text text="Product Name"/>
               </Column>
               <Column>
                  <Text text="Product No"/>
               </Column>
               <Column>
                  <Text text="Asset"/>
               </Column>
               <Column>
                  <Text text="Check Duplicate"/>
               </Column>
            </columns>
            <items>
               <ColumnListItem >
                  <cells>
                     <Text text="{dataModel>productName}"/>
                     <Text text="{dataModel>productNo}"/>
                     <Text text="{dataModel>asset}"/>
                     <Text text="{dataModel>checkDuplicate}"/>
                  </cells>
               </ColumnListItem>
            </items>
         </Table>
      </content>
   </Panel>
</VBox> 

If you see the above Code, There are 3 points... 1)VBox has an array of Products 2)Inside VBox there is Panel 3)Inside Panel, in Panel Content, I have given sap.m.Table, It means like there might be multiple tables will get generated based on the data ing from backend.

Now my requirement is like how can I disable a row based on the boolean value in checkDuplicate?

Below is my controller logic, what I'm trying...

var tbl = self.getView().byId('productsTable');
var header = tbl.$().find('thead');
var selectAllCb = header.find('.sapMCb');
selectAllCb.remove();

tbl.getItems().forEach(function (r) {
    var obj = r.getBindingContext("dataModel").getObject();
    var oStatus = obj.checkDuplicate;
    var cb = r.$().find('.sapMCb');
    var oCb = sap.ui.getCore().byId(cb.attr('id'));
    if (oStatus == "true") {
        oCb.setEnabled(true);
    } else {
        oCb.setEnabled(false);
    }
});

The problem with the above logic is, if there is only one Table, then based on the Table id, I can get the row data and I can disable the row. But here multiple Tables will get generated dynamically, So I can't give ID for the Table.

Can someone please help me how can I disable the row based on checkDuplicate boolean Value?

Thank you in advance

• javascript
• sapui5

• I see two possibilities: 1. Give your table a class like "multiSelectTable" and then use jQuery to find those tables. 2. Create the table in the controller with dynamic IDs which you keep track of. In both cases you the iterate through the table array. Or third idea I just have, is maybe using XML Composite Controls. But I'm not sure if it maybe isn't to plex for what you try to solve. – Mainz007 Commented Nov 27, 2019 at 10:46
• @Mainz007 thank you for your response. As you suggested, i have given class for Table and through that im trying to find 'id' of the Table through loop. But using $('.skillsTablesClass').attr('id') statement. Im not able to get ID for the table. Can you please help me how can i proceed with this logic? – user2644620 Commented Nov 27, 2019 at 12:18
• I would go with the idea of Voyager. Sounds like an even better solution to me – Mainz007 Commented Nov 27, 2019 at 23:14

1 Answer 1

Add an event listener for the event modelContextChange to your table.

Fired when models or contexts are changed on this object (either by calling setModel/setBindingContext or due to propagation)

<Table id="productsTable" 
       modelContextChange=".onModelContextChange"
       items="{dataModel>productsList}"
       sticky="ColumnHeaders"
       mode="MultiSelect"
>
...
</Table>

The event contains the parameter "id" of the current table. This way, you can retrieve the current table by its plete id and re-use your code with a minor change.

onModelContextChange: function(oEvent) {
    var sId = oEvent.getParameter("id");
    var tbl = sap.ui.getCore().byId(sId);
    var header = tbl.$().find('thead');
    var selectAllCb = header.find('.sapMCb');
    selectAllCb.remove();

    tbl.getItems().forEach(function (r) {
        var obj = r.getBindingContext("dataModel").getObject();
        var oStatus = obj.checkDuplicate; 
        var cb = r.$().find('.sapMCb');
        var oCb = sap.ui.getCore().byId(cb.attr('id'));
        if (oStatus == "true") {
            oCb.setEnabled(true);
        } else {
            oCb.setEnabled(false);
        }
    });
}