Bug: Grid Selection Dropping on Sort

3 posts, 0 answers
  1. Nathan
    Nathan avatar
    6 posts
    Member since:
    Apr 2012

    Posted 18 Apr 2012 Link to this post

    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. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 21 Apr 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Basem
    Basem avatar
    27 posts
    Member since:
    Dec 2010

    Posted 24 May 2012 Link to this post

    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;
    }
Back to Top