Remember selected rows when sorting

[Tomasz]

Hi.

When i select som rows and then click sort then grid clear my selections. Is any way to temember that selections by hidden id colum or something?
Part of my grid:

import $ from "jquery";

import '../../css/admin/admin_locale.scss';

import 'bootstrap';

import {setCulture, L10n, Ajax} from '@syncfusion/ej2-base';
import {Grid, Filter, Page, Sort, Search, Toolbar, Selection} from '@syncfusion/ej2-grids'
import {Button} from '@syncfusion/ej2-buttons';
import {DataManager, RemoteSaveAdaptor} from '@syncfusion/ej2-data';
import * as EJ2_LOCALE from "@syncfusion/ej2-locale/src/pl.json";

let mainUrl = "/admin/locale";

L10n.load({pl: EJ2_LOCALE.pl});
setCulture('pl');

Grid.Inject(Selection, Filter, Page, Sort, Search, Toolbar);


let myGrid = new Grid({
    selectionSettings: {checkboxMode: 'ResetOnRowClick'},
    locale: 'pl',
    toolbar: ['Search', 'Add', 'Edit', 'Delete'],
    toolbarClick: toolbarClickHandler,
    allowGrouping: true,
    editSettings: {allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog'},
    searchSettings: {operator: 'contains', ignoreCase: true},
    columns: [
        {field: "id", isPrimaryKey: true, visible: false},
        {type: 'checkbox', width: 50},
        {field: 'position', textAlign: 'Right', type: 'integer', validationRules: {required: true, digits: true}},
        {field: 'name', type: 'string', validationRules: {required: true}},
        {
            field: 'shortcut',
            textAlign: 'Right',
            format: 'string',
            validationRules: {required: true, minLength: 2, maxLength: 2}
        },
    ],
    height: 175,
    allowFiltering: true,
    filterSettings: {type: 'Excel', ignoreAccent: true},
    allowPaging: true,
    pageSettings: {pageSize: 10},
    rowDataBound: onRowDataBound.bind(this),
    allowSorting: true,
    actionFailure: (e) => {
        let span = document.createElement('span');
        myGrid.element.parentNode.insertBefore(span, myGrid.element);
        span.style.color = '#FF0000'
        span.innerHTML = 'Server exception: 404 Not found';
    },
    rowSelected: rowSelected,
    rowDeselected: rowDeselected,
    dataBound: dataBound,
});

....

Please help.

[Shalini Maragathavel]

Hi Tomasz, 

Greetings from Syncfusion Support. 

Based on your query we suspect that you want to maintain the selection in the Grid. To achieve your requirement we suggest you to enable the PersistSelection property of Grid and any one of the columns must be enabled with IsPrimaryKey as true.  

Please refer the below code snippet for your reference. 

 

let grid: Grid = new Grid( 

        { 

            dataSource: orderData.slice(0,10), 

             

            allowSorting: true, 

            selectionSettings: {checkboxMode: 'ResetOnRowClick',persistSelection:true}, 

            columns: [ 

                { type: 'checkbox', width: 50 }, 

                { field: 'OrderID', headerText: 'Order ID',isPrimaryKey: true, width: 120, textAlign: 'Right' }, 

                { field: 'CustomerName', headerText: 'Customer Name', width: 150 }, 

                { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' }, 

                { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' }, 

                { field: 'ShippedDate', headerText: 'Shipped Date', width: 130, format: 'yMd', textAlign: 'Right' }, 

                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 } 

            ], 

           pageSettings: { pageCount: 5 } 

        }); 

    grid.appendTo('#Grid'); 

Please find the  below sample for more information. 

Sample : https://stackblitz.com/edit/78cnvk-9ebakc?file=index.ts 

Please get back to us if you need further assistance. 

Regards, 

Shalini M. 

[Tomasz]

It works :)

 sorry, it is written in documentation : / but I missed that part: / eh, stupid me :D

Thanx :)

[Rajapandiyan Settu]

Hi Tomasz, 

We glad that the provided solution resolved your requirement. 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S