Multiselect grid - keep selected rows after sorting

[Stefano Enrico]

Hi, 

i have a multiselect grid with virtual scrolling and offline = true.

Is possible to keep the slected rows after sorting?

http://jsplayground.syncfusion.com/osimypg3

Thanks

[Venkatesh Ayothi Raman]

Hi Stefano, 

Thank you for contacting Syncfusion support. 

The selected records are doesn’t maintain when we sorting the Grid. Because while sorting the data we have refresh the whole Grid content. So select records are also cleared. We have achieved your requirement by using actionComplete and actionBegin event in Grid. Please refer to the code example, sample and Help document, 

Code example: 

$(function () { 

            window.baseurl = "http://js.syncfusion.com/demos/ejservices/"; 

 

            var dataManger = ej.DataManager({ 

                url: window.baseurl + "wcf/Grid/GridService.svc/Orders", crossDomain: true, offline: true, 

            }); 

            $("#Grid").ejGrid({ 

                dataSource: dataManger, 

                offline: true, 

                allowScrolling: true, 

                scrollSettings: { 

                    allowVirtualScrolling: false, 

                    virtualScrollMode: ej.Grid.VirtualScrollMode.Normal, 

                    height: 400, 

                    //width: 600, 

                    scrollOneStepBy: 33, 

                    enableTouchScroll: false 

                }, 

                actionComplete:"actionComplete", 

                allowFiltering: true, 

                filterSettings: { filterType: 'excel', enableComplexBlankFilter: false, blankValue: '' }, 

                . . . 

                actionBegin:"actionBegin", 

                columns: [ 

. . . 

                ] 

            }); 

. . . 

 

 

        }); 

 

        //actionComplete event 

        function actionComplete(args) { 

 

            if (args.requestType == "sorting" || args.requestType == "virtualscroll") { // Check the condition 

                

                var data = this.model.currentViewData, len = this.model.currentViewData.length, arrayLength = primaryKeyValuesArray.length; 

                for (j = 0; j < len; j++) { 

 

                    for (k = 0; k < arrayLength; k++) { 

 

                        var value = data[j]["OrderID"]; //Get the value of primary key when we virtual scrolling 

                        if (value == primaryKeyValuesArray[k]) { // Check the stored records primary key values and currnet view data primary key value 

                            this.multiSelectCtrlRequest = true; 

                            this.selectRows(j); //Select the row using selectRows method 

                            this.getSelectedRows().find("input").attr('checked', true); // Check the checkbox for selected records 

                        } 

                    } 

                } 

            } 

        } 

 

        //actionBegin event 

        function actionBegin(args) { 

 

            if (args.requestType == "sorting") {// Check the condition 

                var selectedRecords = this.getSelectedRecords(), length = this.getSelectedRecords().length; //Get the currently selectedRecords and length using getSelectRecords method. 

                primaryKeyValuesArray = []; // Create a gloabl array for future use 

 

                for (i = 0; i < length; i++) { 

                    var value = selectedRecords[i]["OrderID"] 

                    primaryKeyValuesArray.push(value); //Push the primary key values of currently selected records 

                } 

            } 

        } 

Sample: http://jsplayground.syncfusion.com/dvtlcgre 

Help documents: 

1)      actionComplete: https://help.syncfusion.com/js/api/ejgrid#events:actioncomplete 

2)      actionBegin: https://help.syncfusion.com/js/api/ejgrid#events:actionbegin 

Regards, 

Venkatesh Ayothiraman.