Column Filter, Reorder and highlight don't want to lost after refresh.

[UFIS]

Dear Support Team,

I'm new for Kendo UI Grid. For the moment, I enable "Filterable, groupable, sortable and reorderable" at the grid. And I do refresh the grid every 3 minutes to get the latest data. But if the user do Filter or Reorder or sorting or grouping at the grid, I don't want to effect that setting when the grid has been auto refresh is on.
Currently all the setting are gone after refresh. Is there any way not to lost such setting?

Here is part of my code :

var grdTmp = grdReport.data("kendoGrid");
grdTmp.destroy();
grdReport.empty();
grdReport.kendoGrid({
dataSource: {
                data: vMenuData,
                pageSize: 20 //To replace with Header Value
            },
dataBound: onMenuDataBound,
reorderable: true,
groupable: true,
sortable: true,
selectable: "row",
filterable: true,
pageable: {
                refresh: true,
                pageSizes: true
            },
columns: vMenuHead,
schema: vMenuSchema
});

    
Thanks & Regards

[Alexander Valchev]

Hello,

I suggest you to check the 'Preserve Grid state in a cookie' code library which demonstrates one possible approach to achieve this. You can download the project from here:

• http://www.kendoui.com/code-library/web/grid/preserve-grid-state-in-a-cookie.aspx
  
  

Regards,
Alexander Valchev
Telerik

[UFIS]

Dear Alexander,

Thanks for your reply,
I tried to put put it into the cookie, but after refresh, it still gone all my filter, grouping and sorting

var grdTmp = grdReport.data("kendoGrid");
var grid = grdTmp;
var state = "";
grdTmp.destroy();
grdReport.empty();
grdReport.kendoGrid({
dataSource: {
                data: vMenuData,
                pageSize: 20 //To replace with Header Value
            },
reorderable: true,
groupable: true,
sortable: true,
selectable: "row",
filterable: true,
dataBound: function () {
var dataSource = grdTmp.dataSource;
state = kendo.stringify({
                    page: dataSource.page(),
                    pageSize: dataSource.pageSize(),
                    sort: dataSource.sort(),
                    group: dataSource.group(),
                    filter: dataSource.filter()
                });

$.cookie("DetailView", state);
if ($.cookie('dvRows')) {
$.each(JSON.parse($.cookie('dvRows')), function () {
                        var item = dataSource.get(grdTmp);
                        var row = grid.tbody.find('[data-uid=' + item.uid + ']');
                        row.addClass('k-state-selected');
                    })
}
onMenuDataBound;
},
change: function () {
var ids = grid.select().map(function () {
return grid.dataItem($(grdTmp)).Id
}).toArray();
$.cookie('dvRows', JSON.stringify(ids));
},
pageable: {
                //refresh: true,
                pageSizes: true
            },
            columns: vMenuHead,
            schema: vMenuSchema
        });
        state = JSON.parse($.cookie("DetailView"));
        if (state) {
            grdTmp.dataSource.query(state);
        }
        else {
            grdTmp.dataSource.read();
        }

Thanks & Regards,
Phyoe

[Alexander Valchev]

Hello,

I checked the attached files but did not manage to find the word 'cookie' in the code. It seems that the code which you pasted below is not included in your project (tmp.zip).

In the code library project which I referenced the approach seems to work fine. Please compare your current implementation with the one presented in the sample project. In case you encounter with any troubles try to replicate them in the sample and send it back to me so I can examine it.
Thank you in advance.

Regards,
Alexander Valchev
Telerik

[UFIS]

Hi Alexander,

Thank you so much for your reply. I found out some of the code issue on my side.. But I would like to know one event about "grid.dataSource.Query()". Before that please look at part of my code that I do binding the data to grid. 

if(bFirst)

{

    bFirst = false;

    var state = false;     

    var grid = grdReport.kendoGrid({

                dataSource: {

                    data: vMenuData,

                    pageSize: 20

                },                   

                dataBound: function () {                       

                    var dataSource = grid.dataSource;                   

                    var state = kendo.stringify({

                        page: dataSource.page(),

                        pageSize: dataSource.pageSize(),

                        sort: dataSource.sort(),

                        group: dataSource.group(),

                        filter: dataSource.filter()

                    });

                    $.cookie("DetailView", state);

                    if ($.cookie('dvRows')) {

                        $.each(JSON.parse($.cookie('dvRows')), function () {

                            var item = dataSource.get(grid);

                            var row = grid.tbody.find('[data-uid=' + item.uid + ']');

                            row.addClass('k-state-selected');

                        })

                    }

                    onMenuDataBound();

                },

                change: function () {

                    var ids = grid.select().map(function () {

                        return grid.dataItem($(grid)).Id

                    }).toArray();

                    $.cookie('dvRows', JSON.stringify(ids));

                },

                autoBind:false,

                reorderable: true,

                groupable: true,

                sortable: true,

                selectable: "row",

                filterable: true,

                pageable: {

                    //refresh: true,

                    pageSizes: true

                },

                columns: vMenuHead,

                schema: vMenuSchema

    }).data("kendoGrid");

}

else //Second Time bind data

{

    var grdTmp = grdReport.data("kendoGrid");      

    grdTmp.destroy();

    grdReport.empty();

    var grid = grdReport.kendoGrid({

        dataSource: {

            data: vMenuData,

            pageSize: 20

        },

        autoBind: false,

        reorderable: true,

        groupable: true,

        sortable: true,

        selectable: "row",

        filterable: true,

        dataBound: function () {               

            var dataSource = grid.dataSource;

 

            state = kendo.stringify({

                page: dataSource.page(),

                pageSize: dataSource.pageSize(),

                sort: dataSource.sort(),

                group: dataSource.group(),

                filter: dataSource.filter()

            });

 

            $.cookie("DetailView", state);

            if ($.cookie('dvRows')) {

                $.each(JSON.parse($.cookie('dvRows')), function () {

                    var item = dataSource.get(grid);

                    var row = grid.tbody.find('[data-uid=' + item.uid + ']');

                    row.addClass('k-state-selected');

                })

            }

            onMenuDataBound();

        },

        change: function () {              

            var ids = grid.select().map(function () {

                return grid.dataItem($(grid)).Id

            }).toArray();

            $.cookie('dvRows', JSON.stringify(ids));

        },

        pageable: {            

            pageSizes: true

        },

        columns: vMenuHead,//Column Header

        schema: vMenuSchema //Column Schema

    }).data("kendoGrid");      

    //This will make the databound fire  twice

    //But for later reference, please do not remove this code line

    //grdReport.data('kendoGrid').refresh();           

}

if ($.cookie("DetailView") == null) //For the initial load grid

{

    grid.dataSource.read();

}

var state = JSON.parse($.cookie("DetailView")); //Retrieve from cookie for Grid Activity

if (state) {       

    grid.dataSource.query(state);

    grid.dataSource.read();

}

else {     

    grid.dataSource.read();

}

//Show Report Header

pHeader.text(grdMenu.data("kendoDropDownList").text());


Why  "grid.dataSource.Query(stat)" didn't trigger again the dataBound event? At my code, you will see like this :

if (state) {
    grid.dataSource.query(state);
    grid.dataSource.read();
}

I'm not sure that is right or wrong. The problem is when the grid do query function, there is no data bind to the grid. Currently, I do like that and application seem to be fine. 
Please let me know is it correct behavior or not.

Thanks & Regards,
Phyoe

[Alexander Valchev]

Hi,

I assume that the problem might be caused by timing issues. I noticed that you are creating the Grid inside an if condition and are setting local dataSource.
Are you sure that the Grid is already created when you attempt to query the dataSource? Could you please provide a small but runable jsBin sample which I can examine locally?

As a general information, if you want to just change the Grid's data you can use the setDataSource method instead of recreating the whole widget.

On a side note, it is unclear what the following row is supposed to do:

• var item = dataSource.get(grid);
  
  

Get method expects id as a parameter.

Regards,
Alexander Valchev
Telerik

[UFIS]

Hi Alexander,

I would like to know one more thing, Does we also keep the column width? Cause after refresh, modified column size will become default. Is there a way to keep?


Thanks and Regards,

[Alexander Valchev]

Hello,

The grid does not provide a method for programatically changing the column's width. The only way to set the width is via width option of the column during the initialization of the widget.

Regards,
Alexander Valchev
Telerik