losing selection while changing pages !

[K.Ramadan]

Hello,
i have a variable that get the names and IDs from the selected Rows, so if i select like one Row or more on the first page, and then changed the page, the selected Rows aren't in the variable anymore.

so I'm checking the Variable in the Console and in first page, after selecting few Rows : for every selection I'm pushing the new selected values to old one.

So this is my Grid Widget:

 

    @(Html.Kendo().Grid<WebCalendar_09K.Models.UserViewModel>()
    .Name("gridMitarbeiter")
    .HtmlAttributes(new { style = "height: 100%;width:100%;padding:0px;" })
    .Events(eve =>
    {
        eve.Change("onChange_Grid_Mitarbeiter");
    })
    .Columns(columns =>
    {
        columns.Select().Width(75).HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align, headerGrid" });
        columns.Bound(c => c.Vorname).HeaderHtmlAttributes(new { @class = "headerGrid" });
        columns.Bound(c => c.Name).HeaderHtmlAttributes(new { @class = "headerGrid" });
        columns.Bound(c => c.Crmusername).HeaderHtmlAttributes(new { @class = "headerGrid" });
    })
    .Scrollable()
    .Sortable()
    .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row)
            )
    .Pageable(pageable => pageable
            .Info(true)
            .Input(true)
            .Numeric(false)
            .ButtonCount(5)
            .Responsive(true)
         )
    .ToolBar(t => t.Search())

    .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Mitarbeiter_Read", "User"))
            .PageSize(20)
    )

    )

 

and this is the on change Grid_function :

function onChange_Grid_Mitarbeiter(e) {
            Global_Array_Grid_mitarbeiter_Selected = new Array();
            var msInterne = $("#MS_Interne").data("kendoMultiSelect");
            var grid  = $("#gridMitarbeiter").data("kendoGrid");
            var rows = e.sender.select(); // all the selected values from the grid

            rows.each(function (e) {
                var dataItem = grid.dataItem(this);
                // the variable i need
                Global_Array_Grid_mitarbeiter_Selected.push(dataItem);
                console.log(Global_Array_Grid_mitarbeiter_Selected);
            });

        }

 

so every Time i change the page it starts with no value in rows and push the first row selected from the second page into the array Global_Array_Grid_mitarbeiter_Selected.

So how to change the page without loosing the selection ?

 

Thanks in advance

 

K.Ramadan 

[K.Ramadan]

Just a PS : the .PersistSelection(true) does not work .. this is a Link to my Post on some old bug (2017.)

https://www.telerik.com/forums/bug-persistselection-not-working#DjCFI9x3906FQTeDetDJlA

[Georgi Denchev]

Hello Karam,

Thank you for providing code snippets.

PersistSelection requires a Model Id in order to save the selected rows.

.DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(m => m.UserID))
            .Read(read => read.Action("Mitarbeiter_Read", "User"))
            .PageSize(20)

Change UserID with the name of the ID property in the UserViewModel class. Also make sure that you have the PersistSelection() method in your grid definition.

Best Regards,
Georgi Denchev
Progress Telerik