Comments on: Customize UI-Grid with Dynamic Cell Classes

By: Shadmehr Vadoodi

Shadmehr Vadoodi — Fri, 23 Mar 2018 16:37:00 +0000

How can I change the row or cell template dynamically after grid init ?

By: shantanu hadap

shantanu hadap — Thu, 09 Nov 2017 10:23:00 +0000

Is there any way to change header cell class, dont want to use headerTemplate.

By: Abhishek Gupta

Abhishek Gupta — Thu, 13 Jul 2017 13:20:00 +0000

Hello Brian,

How to change a cellClass at run time based on the value of a cell when a click happens on a cell.
I am able to capture the event using cell template
”
But when I changes the data in showMe function as below:
columnInfo.showMe = function( value ) {
if( value.uiValue === “X” ) {
value.uiValue === “Y”

};
This doesn’t get reflected to the cell that is defined as follows:
columnInfo.cellClass = function( grid, row, col, rowRenderIndex, colRenderIndex ) {
var entity1 = row.entity;
if( entity1.props ) {
if( entity1.props.prop1 ) {
if( entity1.props.prop1.uiValue === “X” ) {
return ‘aw-selected-variant’;
} else {
return ‘aw-unselected-variant’;
}
}
}
};
Do I need to trigger some event in order to update the UI with the latest values in the cell?
Eagerly waiting for your reply.
Thanks,
Abhishek

By: Abhishek Gupta

Abhishek Gupta — Thu, 13 Jul 2017 13:09:00 +0000

Got it solved using grid refresh after loading the properties.

By: Abhishek Gupta

Abhishek Gupta — Thu, 13 Jul 2017 09:12:00 +0000

Hello Brian,
I am trying to apply a cellClass to a column based on the value of the cell like below:

columnInfo.cellClass = function( grid, row, col, rowRenderIndex, colRenderIndex ) {
if( grid.getCellValue( row, col ) === “true” ) {
return ‘aw-selected-variant’;
} else {
return ‘aw-unselected-variant’;
}
};
But this CSS gets applied to the cell when I scroll on the ui-grid. I want it to get applied once the rendering of grid gets over.

Is there any way to do that?
Thanks

By: Luis Martinez

Luis Martinez — Wed, 07 Sep 2016 16:37:00 +0000

Is it possible to do this dynamically? But not for a specific value for an event like after edit; so once the user edits a cell and tabs to a different cell or focuses on a different cell, that previous cell gets highlighted.

By: Łukasz Kozioł

Łukasz Kozioł — Tue, 12 Jul 2016 11:23:00 +0000

Hi, it would be a great idea if you could add the information on how to create a dynamic css definition that is also updated on page content changes. I spent quite a bit of time searching for this and posted an answer here:
http://stackoverflow.com/questions/38301473/how-to-achieve-dynamic-css-class-in-ui-grid-that-reflects-page-content-changes/38327398#38327398

By: asra khan

asra khan — Wed, 11 May 2016 06:14:00 +0000

Thanks , but I need to change the color of one value based on the condition of the value of other column . How can I achieve that ? Taking reference from your example . I want like- if the name is ‘lesa’ then then ‘female’ should have a style of red color. Any help would be appreciated . Thank you !

By: Arnav

Arnav — Fri, 01 Apr 2016 10:20:00 +0000

Is there a way to change the color of the entire row when one of the cells is in edit mode

By: Sean

Sean — Thu, 31 Mar 2016 01:22:00 +0000

Is there way to add the following function when you have your col def in separate json file?

function(grid, row, col, rowRenderIndex, colRenderIndex) {

if (grid.getCellValue(row ,col).toLowerCase() === ‘male’) {

return ‘red’;

}

By: Ofer Gal

Ofer Gal — Thu, 31 Dec 2015 16:51:00 +0000

I have:

name: ‘RequestDueTs’, width: 120, type: ‘date’, displayName: ‘Due Date’,

cellFilter: ‘date:”MM/dd HH:mm”‘,

groupingShowAggregationMenu: false,

cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {

var dueDate = Date(grid.getCellValue(row, col));

var now = Date();

if (now > dueDate) {

return ‘DueDateRed’;

}

if (dueDate > now) {

return ‘DueDateGreen’;

}

But it shows no color (Yes DueDateRed and DueDateGreen ar edefined :-))

Is there a way to get the date value of the cell?

By: Rajul Urvashi

Rajul Urvashi — Thu, 09 Jul 2015 12:57:00 +0000

i am trying to achieve similar using common function across all column. below is my plunker. if you can guide me to achieve this.

http://stackoverflow.com/questions/31308951/calling-common-function-for-cellclass-function-in-ui-grid

http://plnkr.co/edit/4yjVbhmfR47cf7FGfyFk?p=preview

By: Brian Hann

Brian Hann — Wed, 27 May 2015 21:08:00 +0000

It looks like you’re calling a function there rather than defining one. Try changing “cellClass:getClassEdit(” to “cellClass: function getClassEdit(“

By: Nidhi Gupta

Nidhi Gupta — Wed, 27 May 2015 16:57:00 +0000

Hi Brian,

Thank you for such a nice article. I followed the same instructions as you suggested

columnDefs : [{
name : ‘Edit’,

cellTemplate : ‘‘,

cellClass:getClassEdit(grid, row, col, rowRenderIndex, colRenderIndex),

}]

But getting grid, row not defined while using cellClass function.