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()); 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("grandTotal"); }
Please let me know how to change the bg color or applying the style for the perticular row in sap.m.table
Thanks vijay