This is a migrated thread and some comments may be shown as answers.

Bug: Grid Selection Dropping on Sort

2 Answers 201 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
Nathan asked on 18 Apr 2012, 02:54 PM
What's the best way to maintain Grid Selection after the user sorts a column? Right now when the user changes the sort by clicking a column header the selection disappears.

2 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 21 Apr 2012, 03:27 PM
Hi Nathan,

Such functionality is not supported out of the box, but you could achieve it using custom logic. I would suggest to maintain the selected rows uid and in onDataBound event to set the CSS class k-state-selected to these rows. For convenience I created a jsFiddle example, which illustrates this approach in action. 

Please keep in mind that in case you use remote data and server paging, when you navigate from page to page, the row uid changes and as a result the selection will not be saved.

Greetings,

Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Basem
Top achievements
Rank 1
answered on 24 May 2012, 04:22 PM
I needed this too. The select drops on sort, filter, and probably any other grid event that requires a re-read. So the below seems to handle all cases. Please Kendo team, put your magic touch on this and add this to the core with a property called "selectRebind: true" or something like that. Thanks!

onDataBinding: function (e) {
    //GET CURRENTLY SELECTED DATA ITEMS FOR SELECTING LATER
    MyNamespace.tempSelected = MyNamespace.getSelectedObjects();
},
 
onDataBound: function (e) {
    var me = MyNamespace;
 
    //RESELECT DATA ITEMS IF APPLICABLE
    if (me.tempSelected.length > 0) {
        //GET FILTERED DATA ITEMS IF APPLICABLE
        var filteredItems = me.grid.dataSource.view();
 
        //GET INTERSECTED DATA ITEMS TO RESELECT FROM NEW VIEW
        var intersectedItems = MyNamespace.getIntersect(filteredItems, me.tempSelected);
 
        //RESELECT FROM NEW SET IF APPLICABLE
        if (intersectedItems.length != me.tempSelected.length) {
            //TRIGGER GRID ONCHANGE HERE OR DO YOUR OWN RESELECT LOGIC!!!
        } else {
            //RESELECT FROM GRID AND SKIP ONCHANGE SINCE DATA ITEMS DID NOT CHANGE
            for (i = 0; i < me.tempSelected.length; i++) {
                var dataItem = me.tempSelected[i];
                var row = me.getRowByUID(dataItem.uid);
                me.addSelection(row);
            }
        }
    }
},
 
getSelectedObjects: function () {
    var dataItems = [];
 
    var rows = this.grid.getSelectedRows();
    for (i = 0; i < rows.length; i++) {
        dataItems.push(this.grid.dataItem(rows[i]));
    }
 
    return dataItems;
},
 
getSelectedRows: function () {
    return this.grid.tbody.find(' > tr.selected-item');
},
 
getRowByUID: function (uid) {
    return this.grid.tbody.find('tr[data-uid="' + uid + '"]');
},
 
addSelection: function (row) {
    //ADD ROW SELECT IDENTIFIER
    row.addClass('selected-item');
},
 
getIntersect: function (arr1, arr2) {
    var intersect = [];
 
    for (i = 0; i < arr2.length; i++) {
        if ($.inArray(arr2[i], arr1) > -1)
            intersect.push(arr2[i]);
    }
 
    return intersect;
}
Tags
Grid
Asked by
Nathan
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Basem
Top achievements
Rank 1
Share this question
or