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


i working sap.m.table. have requirement apply or change background color of rows based on data in 1 of column in rows in table.

i using following code not working

created cssfile: test.css

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

the above css file declare in component.js following way ( correct me if not right way make css file available access in whole ui5 project.

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

in controller.i have defined following method apply style sheet 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;     (i = 0; < 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 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 above method. checking cell2 data ( in table cell 2 using textview control display data. when call method data in cell. getting following error.

otemp = this.getview().byid(ocell).gettext()); 

error: uncaught typeerror: cannot read property 'gettext' of undefined

is following code possible change row bg color.

if (otemp.tostring() == "totalallocation") {     otable.getitems()[i].$().taggleclass("total"); } 

please let me know how change bg color or applying style perticular row in sap.m.table

thanks

the approach following not right. better can use 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 text property on sap.m.text control.                         text: {                         parts: [{                             "path": "modellist>name"                         }],                         formatter: function(name) {                             if (name == "totalallocation") {                                 // use this.getparent().. until u row.    below , add class.                                 this.getparent().getparent().addstyleclass("total");                             }                         }                     }                 })             ]         })     } }); 

Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -