on 03-07-2014 1:22 PM
Hello all,
I've stuck here a bit. There have been some discussions about how to color the cells of a table that has been bound to a JSON data model. I found some answers how to color individual cells (http://http://scn.sap.com/thread/3383698), but I have a hard time to fulfill the following requirement (rephrased for simplicity):
Given value "a" in the first cell of a table row, color the row cells 1 - 4 in blue, and 5-7 in red.
Given value "b" in the first cell of a table row, color the row cells 1 - 4 in yellow and 5-7 in green.
This wouldn't be a problem with normal HTML as I could easily assign style classes to every cell, however I can't find the solution for the UI5 table.
Any ideas?
Thanks,
Christian
Hi Christian ,
you can use
Option 1 : UI5 formatter + custom data with writeToDom option + css selector
Option 2 : UI5 formatter + addStyleClass method
to achieve this.
Working example at JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="h...
where the color of the cells are changing based on male(m) or female(f) indicator in the JSON data.
br,
Atanu
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Atanu,
Nice example there, but there is one problem which I have illustrated here...
http://jsbin.com/qutaxixona/1/
Try scrolling the table, you'll see that the conditionally coloured cells do not scroll with the data.
Any clue on how to fix that ?
Regards,
Nishant.
Hi Nishant,
not sure if I undestand you correctly.
When I scroll the table, the data scrolls with the table correctly, but in the "Last Name" column the formatting gets messed up.
To solve this, you need to remove the previously added classes:
// Approach 2
template = new sap.ui.commons.TextView().bindProperty("text", {
parts: [
{path: "sex" },
{path: "lname" }
],
formatter: function(sex, lname){
// Remove previously added classes
this.removeStyleClass("cyan").removeStyleClass("yellow");
if(sex == "m" ){
<!-- approach 2 step B : Add Css style class to element -->
this.addStyleClass("yellow");
} else if(sex == "f" )
{
this.addStyleClass("cyan");
}
return lname ;
}
}) ;
oTable.addColumn(new sap.ui.table.Column({ label: "Last Name",
template: template,
}));
Same for the first approach using where you have to remove the custom data instead if the class.
This should solve the problem. (By the way this is already mentioned in this thread in my post from Mar 10, 2014 11:40 AM)
Greeets,
ben
Thanks Ben,
Mea culpa. I did not outline the issue clearly enough.
Now, I have modified the bin to illustrate my point clearly.
Please notice the row with first name "nishant" in Green and last name "gupta" in Cyan.
Now when I Scroll the table down, such that the row having "Nishant" moves two rows up, I see that the background colour of "nishant" has changed to "Pink", whereas it should have remained "Green" because it was formatted as such.
From the scrolling behavious it looks like the cells remain in place with their formatting, while the data within them is replaced.
Please let me know if I am not still clear ...
Regards,
Nishant.
Hi Nishant,
I think I already gave you the answer - you have to remove the old classes before you add a new one:
// Remove previously added classes
this.removeStyleClass("cyan").removeStyleClass("yellow");
Here's a fiddle with 2. approach using CSS-classses:
Dear Christian, I have the same task and implemented it following your solution. I need to color whole cell in the table though, e.g. td element and not span inside. Do you or anyone on the thread know how to do that. I spent lots of time and failing to achieve that
I can't get parent from formatter function.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Ella,
I also tried to do it for the full td element and not just the span for some time. I failed and finally settled for "faking" it by reducing the padding and margin to 0 using the css styles. So the end result is what I wanted, but admitted not in any way elegant.
Sorry that I can't be of further help.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.