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
Post a Comment