This isn’t exactly what I’m looking for. I need to change the table row color; the igGrid has its own style already applied to the cell. There is padding associated with each cell and just changing the background color of the cell level will result in the padding showing like this:

I have though, found another solution. I added a clientSide handler for the rowsRendered event.

var empGridModel = new GridModel();
empGridModel.AddClientEvent(“rowsRendered”, “rowsRenderedHandler”);

In this function I get the view data and loop through each viewable row adding the css class.

//color terminated employees
function rowsRenderedHandler(evt, ui){
var rows = ui.tbody[0].rows;
for (var i = 0; i < rows.length; i++) {
if(ui.owner.dataSource._data[i].TerminationDate != null){
$(rows[i]).addClass(‘terminated’);
}
}
}

I wish there was a specific way to handle the row Template, but it looks that RowTemplating was discontinued in a previous version. Personally I wish this was not the case as I can imagine many people would probably want to change the style of the row itself. Not only that, but having to loop through and render the style for every single cell based upon some logic expression seems very inefficient.

If you have any suggestions on how to improve my solution let me know. Thanks,

Eric

Update: there was a problem with my code above. When paging then deselecting all it would not deselect properly. Here is my modified code. 

                    // get all ids from backend records
                    var selectedIds = [];
                    selectedIds = $('#grid').igGridSelection('selectedRows').map(function(a) {return a.id;});
                    $.get("@Url.Action("GetFilteredIDs")", params, function (data) {
                        for (var i = 0; i < data.length; i++) {
                            switch (allSelected){
                                case true:
                                    if(!selectedIds.includes(data[i]))
                                    {
                                        $("#grid").igGridSelection("selectRowById", data[i]);
                                    }
                                    break;
                                case false:
                                    if(selectedIds.includes(data[i]))
                                    {
                                        $("#grid").igGridSelection("deselectRowById", data[i]);
                                    }
                                    break;
                            }
                        }
                        ids = data;
                    });

Maya,

Thank you so much for your help with this. I wouldn't have gotten this far without you. But, I found some additional quirkiness. When I select and unselect the customCheckBox fast (double click) the view rows will select, unselect, then select and unselect again. To clarify, the customCheckBox gets selected once, then unselected once. But, the rows will select twice and unselect twice. I believe this is due to the code calling $("#grid").igGridSelection() twice (In two different loops). Doing it this way does feel a bit awkward. The first loop is selecting the rows of the dataView very fast. I think this is a great solution. However, it appears that the second set of calls to $("#grid").igGridSelection() within the full set of data loop is playing catchup and is slower than my clicks. To fix this I thought not to select the already selected view rows in the second loop like this:

            // get all ids from backend records
                    var selectedIds = [];
                    selectedIds = $('#grid').igGridSelection('selectedRows').map(function(a) {return a.id;});
                    $.get("@Url.Action("GetFilteredIDs")", params, function (data) {
                        for (var i = 0; i < data.length; i++) {
                            switch (allSelected){
                                case true:
                                    if(!selectedIds.includes(data[i]))
                                    {
                                        $("#grid").igGridSelection("selectRowById", data[i]);
                                    }
                                    break;
                                case false:
                                    if(selectedIds.includes(data[i]))
                                    {
                                        $("#grid").igGridSelection("deselectRowById", data[i]);
                                    }
                                    break;
                            }
                    

This appears to help, however the problem still exists initially undetected. If I page through the subsequent pages before the second loop finishes you will see it. I can make this work for now, but this will need to be resolved eventually. I would love to see a solution where I pass the "customCheckBox" value to the server and set the selected rows there on the server. This way there is no client side manipulation and the selected rows are set before the grid gets rendered. Or maybe an api method to select all. I would think this would be widely needed and I'm a bit surprised select all was left out of Remote Paging. I look forward to your thoughts. 

Maya, 

Thank you so much for your reply. This is a great solution. However; I noticed one problem. If the data is filtered, This still selects all the data. To give you a little more information on my current solution, I am using the GridModel approach instead of the Wrapper. 

Another question, there is a bit of a delay after selecting the "select all" checkbox. I am assuming that this is because I have to go to the server to retrieve the Data. Is there a way to improve the performance? Get the data from memory on the client; for example: 

var ds = $("#grid1").igGrid("option", "dataSource");

But again, I would need to get only the filtered data. 

Thanks again for your help.

Martin,

Thanks for your reply. I realized that I do not need to call .DataBind() on the wrapper.

That seemed to have fixed the initial problem.

Also, I thought I understood that if I use the Wrapper and Paging is set to Remote, The GridDataSourceAction attribute handles the remote paging on the server automatically, so the paging logic on the server is not needed. Is this correct?from

https://www.igniteui.com/help/api/2025.1/ui.iggridpaging

I have run into another problem however. I know the pageSize and filter parameters come in to the controller through the query string. If I want to capture other changes to the grid; such as: column moved (position), or column hidden. How would I 1) set those initially in the code behind, and  2) capture those events to save the values in the database? It doesn’t look like those parameters get sent to the server when changed.

Tsanna,

I have implemented your example to set initial filter values. The initial filtering seems to work and the value in the filter get set; however, the grid initially only renders two rows on the first page. The page size is set to 25 and the info at the bottom of the grid shows just the number of records and the number of pages is the number of unfiltered records. When I execute an event (go to the next page) the grid shows the correct number of filtered records and correct pages. But, only after I go to page 2. I remove the .DataBind() from the wrapper everything works correctly, but the grid looks like it takes a second or two to render now (shows the loading image) instead of rendering before the grid shows on the page. I feel like the .DataBind() should be there on the wrapper. What am I doing wrong and why does this happen?

here is my code for the wrapper:

@(Html.Infragistics()
.Grid(Model.Employees)
.ID("grid")
.AutoGenerateColumns(false)
.Width("100%")
.Columns(column =>
{
column.For(x => x.FullName).HeaderText("Name").Width("150px");
column.For(x => x.SystemAssignedPersonID).HeaderText("System ID").Width("150px");
column.For(x => x.UserAssignedEmployeeID).HeaderText("Employee ID").Width("150px");
column.For(x => x.BadgeNumber).HeaderText("Badge Number").Width("150px");
column.For(x => x.OriginalHireDate).HeaderText("Original Hire Date").Width("150px");
column.For(x => x.CurrentHireDate).HeaderText("Current Hire Date").Width("150px");
column.For(x => x.FulltimeHireDate).HeaderText("Fulltime Hire Date").Width("150px");
column.For(x => x.SeniorityDate).HeaderText("Seniority Date").Width("150px");
column.For(x => x.DateNewHireReportFiled).HeaderText("Date New Hire Report Filed").Width("150px");
column.For(x => x.LaidOffDate).HeaderText("Laid Off Date").Width("150px");
column.For(x => x.LeaveDate).HeaderText("Leave Date").Width("150px");
column.For(x => x.LeaveReturnDate).HeaderText("Leave Return Date").Width("150px");
column.For(x => x.LastPaidDate).HeaderText("Last Paid Date").Width("150px");
column.For(x => x.LastVacationDate).HeaderText("Last Vacation Date").Width("150px");
column.For(x => x.PensionPlanDate).HeaderText("Pension Plan Date").Width("150px");
column.For(x => x.RecruiterID).HeaderText("Recruiter ID").Width("150px");
column.For(x => x.HireSourceID).HeaderText("Hire Source ID").Width("150px");
column.For(x => x.Level1Description).HeaderText("Level 1").Width("150px");
column.For(x => x.Supervisor).HeaderText("Supervisor").Width("150px");
column.For(x => x.EmploymentTypeDescription).HeaderText("Employment Type").Width("150px");
column.For(x => x.EmployeeStatusDescription).HeaderText("Employee Status").Width("150px");
column.For(x => x.TerminationDate).HeaderText("Termination Date").Width("150px");
})
.FixedHeaders(false)
.Features(features =>
{
features.Paging().Type(OpType.Remote);
features.Filtering().Type(OpType.Remote).FilterDialogContainment("window")
.ColumnSettings(settings => settings.ColumnSetting().ColumnKey("EmployeeStatusDescription").DefaultExpressions(Model.GridFeatureSettings.dfe));
features.Sorting().Type(OpType.Remote).Mode(SortingMode.Single);
features.Resizing();
features.Selection().Mode(SelectionMode.Row).Persist(true).MultipleSelection(true);
features.ColumnFixing();
features.ColumnMoving();
features.Hiding();
})
.DataSourceUrl(Url.Action("Employees"))
.DataBind()
.Render())