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

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

7 Answers 244 Views
Grid
This is a migrated thread and some comments may be shown as answers.
UFIS
Top achievements
Rank 1
UFIS asked on 31 Oct 2013, 08:19 AM
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




7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 31 Oct 2013, 02:25 PM
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:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
UFIS
Top achievements
Rank 1
answered on 01 Nov 2013, 04:45 AM
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
0
Alexander Valchev
Telerik team
answered on 04 Nov 2013, 03:03 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
UFIS
Top achievements
Rank 1
answered on 05 Nov 2013, 06:32 AM
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

0
Accepted
Alexander Valchev
Telerik team
answered on 07 Nov 2013, 08:24 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
UFIS
Top achievements
Rank 1
answered on 26 Nov 2013, 08:02 AM
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,

0
Alexander Valchev
Telerik team
answered on 27 Nov 2013, 01:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
UFIS
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
UFIS
Top achievements
Rank 1
Share this question
or