How to apply CSS to sap.m.table row based on the data in one of the cell in that row

Question

I am working with sap.m.table. I have requirement to apply or change the background color for some of the rows based on the data in one of the column in those rows in table.

I am using the following code but it is not working

created the CSSfile: test.css

<style type="text/css">
    .Total {
        background-color: LightSteelBlue  !important;
    }
</style>

The above CSS file declare in Component.js like the following way ( correct me if this not right way to make the css file available to access in whole ui5 project.

"resources": {
    "css": [
        {
            "uri": "css/test.css"
        }
    ]
}

In Controller.i have defined the following method to apply the style sheet for the particular rows alone in table.

rowColours: function() {
    var oController = this;
    console.log("rowColours() --> Start ");
    var oTable = this.oView.byId("tblAllocation");
    var rows = oTable.getItems().length; //number of rows on tab

    //start index 
    var row;
    var cells = [];
    var oCell = null;
    for (i = 0; i < oTable.getItems().length; i++) {
        //console.log("rowColours() :: row--> "+row);
        //actualRow = oTable.getItems(); //content
        if (i == 0) {
            row = oTable.getItems()[i];
            cells = cells.concat(oTable.getItems()[i].getCells());
            //getting the cell id
            oCell = cells[2];

            oCell = oCell.toString().substring(29, oCell.length);
            otemp = this.getView().byId(oCell).getText();

            if (otemp.toString() == "TotalAllocation") {
                oTable.getItems()[i].$().taggleClass("grandTotal");
            }
        }
    }
    console.log("rowColours() --> end ");
}

In the above method. I am checking the cell2 data ( in table cell 2 i was using the Textview control to display the data. when call this method to get the data in that cell. I am getting the following error.

otemp = this.getView().byId(oCell).getText());

error: Uncaught TypeError: Cannot read property 'getText' of undefined

is the following code is possible to change the row bg color.

if (otemp.toString() == "TotalAllocation") {
    oTable.getItems()[i].$().taggleClass("Total");
}

Please let me know how to change the bg color or applying the style for the perticular row in sap.m.table

Thanks

Answer 1

The approach your following is not right. Better you can use a formatter.

Example:

var oTable = new sap.m.Table({
    columns: [
        new sap.m.Column({
            header: new sap.m.Label({
                text: "Name"
            }),
        }),
    ],
    items: {
        path: 'modelList>/',
        template: new sap.m.ColumnListItem({
            cells: [
                new sap.m.Text({
                    //formatter to the text property on sap.m.Text control.    
                    text: {
                        parts: [{
                            "path": "modelList>Name"
                        }],
                        formatter: function(name) {
                            if (name == "TotalAllocation") {
                                // use this.getParent().. until u get the row.    like this below and add class.
                                this.getParent().getParent().addStyleClass("Total");
                            }
                        }
                    }
                })
            ]
        })
    }
});