Add Styling to row/cell on igGrid based on Data

Guruprasad Srinivasamurthy posted over 6 years ago

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

485

Offline Vasil Pavlov posted over 6 years ago in reply to Guruprasad Srinivasamurthy
Hello Guru,

If you have an MVC scenario, there are two ways to add the event handler:

You could delegate the event directly in your View using for instance the following code, inside a <script> tag:

$(document).on("iggridupdatingeditrowended", "#igGrid", function (evt, ui) {

….some code…..

});

If you are using a GridModel class to create your grid, then you can define the event with the following code:

GridUpdating updating = new GridUpdating();

updating.EditMode = GridEditMode.Row;

updating.AddClientEvent("editRowEnded", "rowEditHandler");

gridModel.Features.Add(updating);

After that you have to declare the handler itself. You could write it in the View (again inside a <script> tag):

function rowEditHandler(evt, ui) {

…..some code….

};

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

Best Regards,

Vasil Pavlov

Associate Software Developer

Infragistics, Inc.
Cancel
Reply

Cancel
80

Offline Guruprasad Srinivasamurthy posted over 6 years ago in reply to Vasil Pavlov

HI Vasil,

Thanks for the example:). Can I know how I can code for the 'EditRowEnded' event in the razor page rather than script?

Regards,

Guru
Cancel
Reply

Cancel

485

Offline Vasil Pavlov posted over 6 years ago

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://es.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.