Add Styling to row/cell on igGrid based on Data

Liz Thompson posted 3 months ago

I'm trying to do something similar but can't seem to make it work the same way. One column in my ig grid is dates and if the date is expired then I want to highlight the row and change the color of the date cell. This my code:

                rowsRendered: function (evt, ui) {

                            //highlight row if employee expired
                             var rowData, $rowElem, grid = ui.owner;
                             var today = new Date();
                             today.setHours(0, 0, 0, 0);
                             $.each(grid.allRows(), function (idx, row) {
                                 $rowElem = $(row);
                                 rowData = grid.findRecordByKey($rowElem.data("id"));
                                 if (rowData.employeeLicenseExpirationDate !== null) {
                                     var expDate = new Date(rowData.employeeLicenseExpirationDate);
                                     if (expDate < today) {
                                         //highlight row
                                         $rowElem.addClass('highlight');
                                         //change color of date
                                         var cell = grid.cellById($rowElem.data("id"), 6);
                                         cell.addClass('exp');

                                     }
                                 }
                             });
                }

My css:

.ui-igrecord ui-iggrid-record {
background-color: #fcf8e3;
}

.exp {
color: red;
}

Can you help me figure out the issue?

Thanks!

285

Offline Vasil Pavlov posted 3 months ago

Hello Liz,

Thank you for posting in our forum.

I have modified my code sample from the link you have provided above, here are the changes:

I am using the rowsRendered event because it gets raised by the grid every time it re-renders – this way even if the user has Filtering or Sorting features enabled, the coloring would stay.
I am iterating over the rows of the grid and using the getCellValue method from the API to get the date and comparing it to the current date and time. In case of expiry I am getting a reference to the whole row with the rowById method from the API and iterating over the row cells in order to change their background-color. After that I am getting the expired date cell and adding the red color.

Note that you could remove the "!important" from the CSS if you want to, but this way if you sort the date column it would get a blue color, as the grid changes the cell attributes at runtime. Also you would have to remove the .rowExpired class first and then add the .expired as otherwise it gets overridden.

This is the code sample:

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.loader.js"></script>
    <style>
        .expired {
            background-color: #ff9999!important;
        }
        .rowExpired{
            background-color: #ffe6b3;
        }
    </style>
</head>
<body>
    <div id="1" style="margin: 30px auto; width: 1000px;">
        <table id="grid"></table>
    </div>
    <script>
        $.ig.loader({
			scriptPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/",
			cssPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/",
			resources: "igGrid.*",
            ready: function () {
                //today's date
                let now = new Date()
                //the dataSource
                let ds = [
                { "ProductID": 1, "ExpiryDate": 'December 17, 2018 03:24:00', "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 },
                { "ProductID": 2, "ExpiryDate": 'November 15, 2018 03:24:00', "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 },
                { "ProductID": 3, "ExpiryDate": 'April 14, 2018 03:24:00', "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 },
                { "ProductID": 4, "ExpiryDate": 'April 15, 2018 03:24:00', "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 },
                { "ProductID": 5, "ExpiryDate": 'Febriary 27, 2018 03:24:00', "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 },
                { "ProductID": 6, "ExpiryDate": 'October 10, 2018 03:24:00', "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 },
                { "ProductID": 7, "ExpiryDate": 'June 12, 2018 03:24:00', "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 },
                { "ProductID": 8, "ExpiryDate": 'May 21, 2018 03:24:00', "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 },
                { "ProductID": 9, "ExpiryDate": 'May 16, 2018 03:24:00', "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }
                ]
                
                $("#grid").igGrid({
                    dataSource: ds,
                    responseDataKey: "results",
                    autoGenerateColumns: false,
                    primaryKey: "ProductID",
                    autoCommit: true,
                    rowsRendered: function(){
                        //getting the number of grid rows 
                        let rowsLength = $("#grid").igGrid("allRows").length;
                        
                        for (let i = 1; i <= rowsLength; i++){
                            // getting the cell value from the current row
                            let cellValue = $("#grid").igGrid("getCellValue", i, "ExpiryDate")
                            if (cellValue < now) {
                                //these are all the cells in the row
                                let rowCells = $("#grid").igGrid("rowById", i)[0].cells
                                $(rowCells).each(function(){
                                    //coloring each cell
                                    $(this).addClass("rowExpired")
                                })
                                //coloring the expired date cell
                                let cell = $("#grid").igGrid("cellById", i, "ExpiryDate")
                                $(cell).addClass("expired")
                            }
                        }
                    },
                    columns: [
                        { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true},
                        { headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%"},
                        { headerText: "Expiry Date", key: "ExpiryDate", dataType: "date", width: "25%"},
                        { headerText: "Category", key: "CategoryName", dataType: "string", width: "25%"},
                        { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "25%"}
                    ],
                    features: [
                        {
                            name: "Updating",
                            editMode: "cell",
                        },
                        {
                            name: "Sorting"
                        },
                        {
                            name: "Selection"
                        }
                    ]
                })
            }
        })
    </script>
</body>
</html>

You could see the code in JSFiddle also:

http://jsfiddle.net/4dhtb50e/2/

If you need any additional assistance, feel free to contact me.