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!
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:
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.