Change color of particular cell of igGrid in a specific Controller.

I am very new in Infragistics igGrid.
I am using igGrid in my current web application using asp.net MVC.

I want to change the color of particular cells in few Rows of igGrid in a specific
Controller.

For this, do I have to make change in UCHierarchicalGridUI.cs Controller
or its View GridUI.cshtml(includes all JavaScript/JQuery related to igGrid) ?

Also, if I am making change in UCHierarchicalGridUI.cs Controller
or its View GridUI.cshtml, then since it is common for all the pages/screens,
will this change will reflect in all the igGrid in all pages/screens?

As I have to change the color of particular cells in few Rows of igGrid in a specific
Controller not in all Controllers.

Please help me how to achieve it.

Any help will be greatly appreciated. Thanks in advance

Hello Pree,

You can change the color of particular cells using css selector in the respective View and this css selector should contain the grid id to be more specific and to apply the color only on the desired grid cells. For instance $("#grid").find("td[aria-describedby=grid_FirstName]").eq(0).css("background-color", "red") This css selector filters the cells that have such aria-described attribute and gets only the first one of them, then apply it background-color. If you have any questions, please let me know.

Regards,

Tsanna

Hi Tsanna,

Thank you for the reply. I am trying your suggested method. Will update you soon.

Hi Tsanna,

I tried below javaScript code to achieve the desired requirement, in respective View(Index.cshtml):

function changeCellColor() {

debugger;
var gridId = evt.target.id; //getting gridId of respective controller
if(gridId!=null && gridId!=undefined)
{
var column = grid.igGrid("columnByKey","EXPD_HDR_VARIANCE_REASONS"); //getting column key

$(gridId).find("td[aria-describedby=" + column + "]").css("background-color", "red"); //code to change background color
}

}

In above code, I am able to get the gridId, columnKey but please let me know how to pass the specific cellKey to change specific CELL background color, in my above code ?
Also, when I am trying the same code to change the color of column(just to test the code) it never change the background color.

Please let me know what is wrong in my code ? 

Looking forward for the reply. Thanks in advance.
 

 

Hi Pree,

Please note that you're passing an correct aria-describedby attribute. The correct one is in the following format: aria-describedby=gridID_columnKey. Please try again and let me know if you have any questions.

Regards,

Tsanna

Hi Tsanna,

Please let me know what is "gridID_columnKey" in your code ? Do I have to append both gridID and ColumnKey and pass here or anything else that I am unable to understand ?

And when passing "gridID_columnKey", how am I getting the respective CELL here (for which i have to change the background color), as the current value is for Column not for Cell ? Please correct if my understanding is wrong.

Waiting for the reply. 

Hi Pree,

Please note that if your column key for example is "ID" and your grid id is "grid1", then aria-describedby attribute will be "grid1_ID". Then if you want to get some of the cells in that column you can use the following selector:
$("#grid1").find("td[aria-describedby=grid1_ID]").eq(0) as eq(0) means that you want to get only the first cell in that column. If you have any further questions, please let me know.

Regards,

Tsanna

Hi Tsanna,

Thank you for the reply. With your help and suggestion I am able to solve the issue.

Below lines of code worked for me:

var columnIndex;
columnIndex = $("#" + gridId + "_" + "col_Name").data("columnIndex");
$(grid.igGrid("cellAt", columnIndex, i)).css('background-color', 'gray');

Thank you so much for the help.