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

Grid saving user configuration

8 Answers 1212 Views

Grid

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

8 Answers, 1 is accepted

answered on 21 Aug 2012, 02:50 PM

Hi,

I did it for filter, group and sort but I don't know if there is a simplest way... Use it by your own risk...
To achieve this you have to use dataSource object of the grid.

To make easier to retrieve the grid's object, I did it:

function retrieveGrid (gridId) {

return $('#' + gridId).data('kendoGrid');

}

Retrieving strings that contains values to be stored on database:

function readSettings(gridId) {

var ds = retrieveGrid(gridId).dataSource;

return ds.transport.parameterMap({ sort: ds._sort, group: ds._group, filter: ds._filter }, "read");

}

Easy, isn't it? The problem is that you have to code the reverse way to transform string into objects. To load stored settings, create functions to retrieve this objects from strings, then pass it as parameter to following functions: ds.filter(filterObj), ds.group(groupObj) and ds.sort(sortObj).
You can combine them, but each function invokes an ajax call. To avoid this, set 2 of them through variables and the last one as function parameter, as following:

ds._filter = filterObj;

ds._group = groupObj;

ds.sort(sortObj);

As I said previously, I don't know if there is another way to do it. Besides, you are subject to have your code broken due to new releases of kendo, since you overwrite protected variables.

Hope it helps! Any improvement suggestion of forum's member or reply of Kendo Team would be appreciated.

answered on 01 Jan 2013, 11:57 AM

Save the Sorting , Grouping , Filtering, Page Size and page in a event like DataBound

dataBound: function(e){

var grid = this;

var dataSource = this.dataSource;

var state = kendo.stringify({

page: dataSource.page(),

pageSize: dataSource.pageSize(),

sort: dataSource.sort(),

group: dataSource.group(),

filter: dataSource.filter()

});

write the Sate to a cookies or to a DB if u like.

Use the Query Method to Apply the Saved State string as Below in a event like Read or Databound

var grid = this;

grid.dataSource.query(state);

If you need to save the Column arrangement also ,Do this

take the Columns when user change the arrangement in the event columnReorder and save like before

columnReorder :function(e){

var grid = this;

var columnlist=grid.columns;

}

use another event like Databound to apply the columns saved before and use the grid.reorderColumn()

for (i = 0;i < columnlist.length;i++){

if (grid.columns[i].field != columnlist[i].field) {

for (j = 0; j < grid.columns.length; j++) {

if (grid.columns[j].field == columnlist[i].field) {

grid.reorderColumn(i, grid.columns[j]);

}

Hope this Helps :D

answered on 27 Jan 2013, 07:30 PM

Chanaka,

I'm only using the filter so my example only shows the filter. I was able to save the filter exactly like you showed using the databound event. I wasn't able to load the serialized (json) filter into the grid in any of the built in grid or datasource events without adding a bunch of logic to prevent some kind of endless loop. I'm using ASP.NET MVC and using AJAX to load my datasource, so my solution may be a little different. My solution to loading the filter was this:

1) Turn off AutoBind on the grid.

.AutoBind(false)

2) Load the datasource when document ready fires.

<script>$(document).ready(function () { $('#DynamicViewGrid').data("kendoGrid").dataSource.query(@(Html.Raw(Model.Filter))); })</script>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Grid saving user configuration

8 Answers, 1 is accepted