Can you please share the sample code ? I'm having a hard time implementing this functionality.

Thanks

Hello,

One possible approach is using a global variable which keeps an array of the currently selected records. When new records are added to the selection the rowSelectionChanged event is handled and the array is updated with them:

$("#grid1").igGrid({

    features: [

        {

            name: "Selection",

            mode: "row",

            rowSelectionChanged: function (evt, ui) {        

                     selectedRowsKeeper.push(ui.row);

                           …

                }

        }

    ]

});

It is also needed the pageIndexChanged event to be handled in order the rows from previous pages to be reselected again:

$(".selector").igGrid({

    features: [{

        name: "Paging",

        pageIndexChanged: function (evt, ui) {

              var l = selectedRowsKeeper.length;

              for (var i = 0; i < l; i++)

              {

                     $(this).igGridSelection(“selectRow”, selectedRowKeeper[i].index);

              }

              …

         }

    }]

});

If you need any further assistance please let me know.

I'm having the same issue, however, I'm using MVC Razor. Can you please provide this solution in Razor syntax? Thanks.

Hello guys,

There is no specified Razor syntax to implement this approach. It is needed the events to be handled by javascript functions:

<script type="text/javascript">

    var selectedProducts = [];

    $(document).delegate("#grid1", "iggridselectionrowselectionchanged", function (evt, ui) {

        var tmpPage = $("#grid1").igGridPaging("pageIndex");

        var selectedProductshelper = $("#grid1").igGridSelection("selectedRows");

        selectedProducts[tmpPage] = selectedProductshelper;

        });

    $(document).delegate("#grid1", "iggridpagingpageindexchanged", function (evt, ui) {

        var tmpPage = $("#grid1").igGridPaging("pageIndex");

        if (selectedProducts[tmpPage]) {

            var l = selectedProducts[tmpPage].length;

            for (var i = 0; i < l; i++) {

                var r = selectedProducts[tmpPage][i].index;

                $("#grid1").igGridSelection("selectRow", r);

            }

        }

        else return;

    })   

</script>

The solution above collects the selected items in a matrix. Each array from it corresponds to a grid page. Since index numbers duplicates on different pages each row is defined both by its index number and the page number it is positioned on.

I have also attached the whole MVC project for you reference.

Hope this will help. If any further questions or concerns arise feel free to contact me again.

hi Martin,

I came across weird problem while using SelectionPersistence.js for filtering.

Here are the steps to reproduce problem.....

1. Selection a row

2. Filter(remote))(enter some characters in filter text box for any column)

3. Remove text from filter text box

4. Try to deselect a selected record.

5. I get the error when deselection row at row index 1: 

              Unhandled exception at line 366, column 12789 in http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.lob.js

              0x800a138f - Microsoft JScript runtime error: Unable to set value of the property '1': object is null or undefined

6. I do not get this error when I user selection with sorting. It is coming only with filtering.

7. I used IE 9(standard mode)

Here is my sample code 

@(Html.Infragistics().Grid(Model.Customers.AsQueryable())
.ID("myIGrid")
.Width("400px")
.Height("300px")
.AutoGenerateColumns(false)
//.ResponseDataKey("Records")
.PrimaryKey("ID")
.Columns(column =>
{
     column.For(x => x.ID).HeaderText("ID").Width("20%");
     column.For(x => x.Name).HeaderText("Name").Width("60%");
     column.For(x => x.IsActive).HeaderText("IsActive").Width("20%");
})
.Features(feature =>
{
     feature.Sorting().Type(OpType.Remote);
     feature.Selection().Mode(SelectionMode.Row).MultipleSelection(true);
     feature.RowSelectors().EnableCheckBoxes(true).EnableRowNumbering(false);
     feature.Filtering().Type(OpType.Remote);
})

.DataSourceUrl(Url.Action("GetAllC"))
.DataBind()
.Render()
)

Hello Rajesh,

Rajesh Varade said:

Can you please let me know how to find out total number of selectedRows in a grid while paging is enabled?

In the SelectionPersistence object I've exposed selectedRows API which will return all the PK values of the selected rows regardless of their visibility. You can then use the PK values with the igGrid.findRecordByKey in order to find the whole record from the data source. Please note that the igGridSelection.selectedRows API will return DOM TR elements, while the SelectionPersistence.selectedRows API will return only the PK values. That's because the invisible rows (when Paging is enabled) will not have DOM elements.

Hope this helps,
Martin Pavlov
Infragistics, Inc. 

Hello,

Can you please let me know how to find out total number of selectedRows in a grid while paging is enabled?

As of now,

$("#myGrid").igGridSelection("selectedRows");

returns only selected rows on current page.

Thanks,

Rajesh

hello Martin,

It worked for me. Thank you very much.

I have an issue in using rendered and destroy events. how to define them with HTML.Infragistics helpers ?

As of now I added below code just after my grid definition block which is defined using HTML.Infragistics helpers.

var sp;
$(function () {
$("#Grid").igGrid({
rendered: function (evt, ui) {
sp = SelectionPersistence(ui.owner);
sp.enable();
},
destroy: function (evt, ui) {
sp.disable();
}
});
});

Thank you,

Rajesh