cancel
Showing results for 
Search instead for 
Did you mean: 

Disable row check box based on field value

0 Kudos

Hello All,

I'm trying to achieve table row check box disable based on some condition but it's not working properly.

Please help me out to resolve this issue.

Thanks,

Naveen Reddy

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>Table CheckBox Disable</title>
        <script id="sap-ui-bootstrap" 
                type="text/javascript"
                src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.m"
                data-sap-ui-xx-bindingSyntax="complex"
        >
        </script>
		
        <!-- XML-based view definition -->
        <script id="chartView" type="sapui5/xmlview">
<mvc:View
  controllerName="DynamicControls.Main"
  xmlns:l="sap.ui.layout"
  xmlns:u="sap.ui.unified"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  class="viewPadding">
  <App>
  <pages>
<Page
    title="Table CheckBox Disable"
    class="marginBoxContent" >
    <content>
<VBox id="oVBox">
 <Table id="idProductsTable"
     mode= "MultiSelect"
    selectionChange = "rowSelect"
     items="{/modelData/productsData}">
    <columns>
      <Column>
        <Label text="Product" />
      </Column>
      <Column>
        <Label text="Weight" />
      </Column>
    </columns>
    <items>
      <ColumnListItem>
        <cells>
	<Text  text="{Product}" />
	 <Text text="{Weight}" />
        </cells>
      </ColumnListItem>
    </items>
  </Table>
  </VBox>
    </content>
  </Page>
  </pages>
  </App>
  </mvc:View>
        </script>


        <script>
            // Controller definition
sap.ui.controller("DynamicControls.Main", {


/**
* 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 table_v01.Main
*/


	onInit: function() {
	
	var dataObject = [
				{Product: "Power Projector 4713", Weight: "33"},
				{Product: "Gladiator MX", Weight: "33"},
				{Product: "Hurricane GX", Weight: "45"},
				{Product: "Webcam", Weight: "33"},
				{Product: "Monitor Locking Cable", Weight: "41"},
				{Product: "Laptop Case", Weight: "64"}]
				;
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			productsData : []
			}
			});
		sap.ui.getCore().setModel(model);
		sap.ui.getCore().getModel().setProperty("/modelData/productsData", dataObject)
	},
	
	rowSelect: 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().getObject();
				var oStatus = obj.Weight;
				var cb = r.$().find('.sapMCb');
				var oCb = sap.ui.getCore().byId(cb.attr('id'));
				
			if (oStatus === '33') {
				oCb.setEnabled(false);
			} else {
				oCb.setEnabled(true);
			}
		});
	}


});


            
            // Instantiate the View, assign a model
            // and display
            var oView = sap.ui.xmlview({
                viewContent: jQuery('#chartView').html()
            });
            
            oView.placeAt('content');
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

Accepted Solutions (1)

Accepted Solutions (1)

former_member620231
Participant
0 Kudos

Hi,

You can achieve this in the updateFinished event of the table.

There, you retrieve the items and call the method getMultiSelectControl which returns the checkbox. Give the parameter equal to true so it will create it if needed. From there you can set it's visible or enabled properties.

There are also methods to get another controls of the mode feature like getSingleSelectControl, getNavigationControl, getDetailControl and getDeleteControl.

var aItems = oTable.getItems();

for (var i = 0; i < aItems.length; i++) {
    if (aItems[i].getBindingContext().getObject().ShowCheckbox === true) {
        aItems[i].getMultiSelectControl(/* bCreateIfNotExist = */ true).setVisible(false);
    }
}

I hope this helps you if it is not too late.

Alex

Answers (1)

Answers (1)

WouterLemaire
Active Contributor

Another option could be to disable the default selection and add a checkbox to the first column yourself. Then hide or show the checkbox by using expression binding.