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
Guruprasad Srinivasamurthy
80
Add Styling to row/cell on igGrid based on Data
posted

HI,

I have a grid with data. I also have a button called 'Validate'. I'm trying to implement a logic such that when I click on the validate button, it goes through all the row data and highlights the row based on the data it contains (For Eg: Highlight the row if the data on a column is missing). I have a function like this, but the row doesn't seem to get highlighted. Please help.

$("#validate").on('igbuttonclick', function (e)
{
var rows = grid.igGrid("allRows");
var dataField1,dataField2;
$.each(rows, function (index, row) {
rowId = $(row).attr("data-id")
dataField1 = grid.igGrid("getCellValue", rowId, "DataField1");
if (dataField1 == "Val1")
{
dataField2=grid.igGrid("getCellValue", rowId, "DataField2");
if ( dataField2== "")
$("#invGrid").igGrid("cellById", rowId, "DataField2").addClass("errorHighlight");
}
});
});

Here, I've tried a cell highlight which is jot working. A row highlight will also help me.

Regards,

Guru

Parents
  • 485
    Offline posted

    Hello Guruprasad,

     

    Thank you for posting in our forum.

     

    You could iterate over the rows and cells of the grid in the validation button’s “click” event handler. Write a filter function to return “true” or “false” if the cell passes the conditions you want. Then add the necessary CSS to highlight the invalid rows. See the code sample I provided below:

     

    <!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>
    <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet">
    <style>
        .warning
        {
            background-color: red;
        }
        
        tr.warning td.ui-state-hover,
        tr.warning td.ui-state-active
        {
            background-color:red;
        }
        
    </style>
</head>
<body>
    <table id="grid"></table>
    <div style="text-align:center; margin: 20px auto">
        <input type="button" value="Validate" class="btn">
    </div>
    <script>
        var randomArr = [
            { "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 39 },
            { "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 },
            { "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "", "InStock": 13 },
            { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 },
            { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "", "InStock": 0 },
            { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 },
            { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "", "InStock": 15 },
            { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 },
            { "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "", "InStock": 29 },
            { "ProductID": 10, "ProductName": "Ikura", "CategoryName": "Seafood",  "InStock": 31 }
        ]
        $(function () {
            $("#grid").igGrid({
            	primaryKey: "ProductID",
            	caption : "<span> <img src=\"https://www.infragistics.com/media/441501/horz_logo.png\" alt=\"Infragistics\"></span>",
                width: '100%',
                columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true},
                    { headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%" },
                    { headerText: "Category", key: "CategoryName", dataType: "string", width: "25%" },
                    { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "35%" }
                ],
                autofitLastColumn: false,
                autoGenerateColumns: false,
                dataSource: randomArr,
                responseDataKey: "results",
                autoCommit: true,
                features: [
                    {
                        name: "Updating",
                        editMode: "row",
                        enableAddRow: true,
                        enableDeleteRow: true,
                        editRowEnded: function(evt, ui){
                            var rows = $("#grid").igGrid("allRows");
                            var currentRow = rows[ui.rowID-1];
                            // removing the warning CSS and would add it later if the row is invalid
                            $(currentRow).removeClass("warning"); 
                            //checking each cell with the validating function
                            for (var j = 0; j < currentRow.cells.length; j++){
                                var currentRowCell = currentRow.cells[j];
                                if(isInvalid(currentRowCell.innerText)){
                                    //adding the warning CSS
                                    $(currentRow).addClass("warning");
                                }
                            }
                        }
                    },
                    {
                        name: "Selection",
                        mode: "row",
                        multipleSelection: true,
                        persist: true,
                        activation: true
                    }
                ]
            });
        });

        //The validating function
        function isInvalid(text){
             return (text === "\xa0" || text === "" || text === " ") ? true : false;
        }

        $(".btn").on('click', function(){
            var rowsArray = $("#grid").igGrid("allRows");
            //iterating over each row of the grid
            for (var i = 0; i < rowsArray.length; i++){
                var currentRow = rowsArray[i];
                $(currentRow).removeClass("warning");
                //iterating over the current row's cells
                for (var j = 0; j < currentRow.cells.length; j++){
                    var currentRowCell = currentRow.cells[j];
                    if(isInvalid(currentRowCell.innerText)){
                        $(currentRow).addClass("warning");
                    }
                }
            }
        });
     </script>
</body>
</html>

     

    Note that iterating over a very large dataSource could be resource consuming and slow down the browser’s performance. For such cases I suggest that you use the igValidator control and validate cells during editing.

     

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

     

     

    Best Regards,

    Vasil Pavlov

    Associate Software Developer

    Infragistics, Inc.

Reply Children
No Data