I need to give backgrounds to columns and change font styling of table in UI5 using javascript and css. I need to know how do I reach a particular element if CSS has to be applied to it. How do it I do that?
2 Answers
add class on your table or column whereever you want as
oTable.addStyleClass("classname");
use css as usual
.classname{
color:red
}
and include this css file in index.html
Based on your comment: to add id to table header column use it in this way
var oColumn = new sap.ui.table.Column("tc",{
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
sortProperty: "lastName",
filterProperty: "lastName",
width: "200px"
});
Here id=tc is added to this header.
write css as you need
#tc{
color:red
}
-
Thanks for your help Roshan... what I really wanted to do was give the rows in the table alterbate colors using nth child in css... how do i give the rows a class / target rows in the oTable for specific CSS... Jul 28, 2014 at 7:04
-
Thanks buddy... gr8 help.. but how to style the header i.e. column heading...tr and td work fine... th is not working... how do i do that? Jul 28, 2014 at 7:54
-
if the solution solved your query you can accept the answer(by selecting the green tick mark), or else if you have something else you can ask that too. :)– RoshanJul 28, 2014 at 8:41
==================xml===================================
===================format js===========================
yaoji.utils.formatter.format = function (cellValue) {
this.onAfterRendering= function() {
//!!! if not after redering, can't get the dom
var cellId = this.getId();
$("#"+cellId).parent().parent().parent().css("background-color","red");
return cellValue;
};