Style igGrid Rows and Cells Based on Data Validation

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

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:

 

 

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.

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

Hello Guru,

 

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

1. 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…..

});

 

1. 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.