Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Renganathan Rajagopalan
305
How to formal iggrid's cell with condition
posted

Please provide any example for conditional column template which highlights the iggrid's cell with background color.

http://jsfiddle.net/zLRRN/1/

$(function () {
var columnSettings = [
{ headerText: "Product Name", key: "ProductName" ,
template: "{{if ${ProductName} == 'Chai' }}one{{else}}two{{/if}}"
}
];
$('#resultGrid').igGrid({
dataSource: northwindProducts,
responseDataKey: "results",
dataSourceType: "json",
width: "100%",
autoGenerateColumns: true,
columns: columnSettings,

features: [
{
name: "Paging",
type: "local",
pageSize: 8
}
]
});
});

  • 20255
    Verified Answer
    Offline posted

    Hello Renganathan,

     Thank you for posting in our forum.

     In the way that you are trying to set some style, directly in the columnSettings Template,  you can set only for example the text color, not the cell background color too. You can set text color when wrap the cell content in a div element with specified style. If you set a background color to the div you will set the background color only for the div element, not for the entire cell. Here is the code that I use to set some text color within a cell:

    1. var columnSettings = [
    2.                     {
    3.                         headerText: "Product Name", key: "ProductName",
    4.                         template: "{{if ${ProductName} == 'Chai' }}
      one
      {{else}}
      two
      {{/if}}"
    5.                     }
    6.             ];

     If you want to set a cell background, based on a cell value, this is a different story. My suggestion is to handle igGrid pagerRendered event and in there to manage your requirements. For example in the code below you will see how I loop through all visible grid rows, get the cell value for the specific column and based on the cell value, apply some cell style.

    1. features: [
    2.                     {
    3.                         name: "Paging",
    4.                         type: "local",
    5.                         pageSize: 8,
    6.                         pagerRendered: function (evt, ui) {
    7.                             var grid = ui.owner.grid;
    8.  
    9.                             for (var i = 0; i < grid.rows().length; i++) {
    10.                                 var value = grid.getCellValue(i, "ProductName");
    11.                                 var columnIndex = $("#" + grid.id() + "_" + "ProductName").data("columnIndex");
    12.  
    13.                                 if (value === 'Chai') {
    14.                                     $(grid.cellAt(columnIndex, i)).css('background-color', 'yellow');
    15.                                 } else {
    16.                                     $(grid.cellAt(columnIndex, i)).css('background-color', 'lightblue')
    17.                                 }
    18.                             }
    19.                         }
    20.                     }
    21.                 ]

     Here you can find online sample implementing my suggestions, and also I am attaching you an html sample too.

    http://jsfiddle.net/zLRRN/4/

     Please have a look and if you have any further questions regarding this, do not hesitate to contact me.

    SetCellColorBasedOnCellValue.zip