javascript - Type Error when trying to preserve filter state - Kendo UI Grid -

javascript - Type Error when trying to preserve filter state - Kendo UI Grid -

i'm working kendo ui's grid , attempting add together code preserves grid's filter/grouping/etc way of cookie. works in example, not @ in code.

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

my code: http://jsfiddle.net/pwaje/

for whatever reason (i'm sure it's simple one) maintain getting type errors. 2 hours later... here am.

as always, help appreciated.

@rrfive

<script> var info = [{"name":"john smith","email":"test@test.com","permission":"admin","costrate":"60","dt":"2013-02-02 10:26:29","memberid":"m0000001"},{"name":"test simple","email":"test@jones.com","permission":"user","costrate":"40","dt":"2013-02-02 00:00:00","memberid":"m0000002"}]; $(document).ready(function() { $("#grid").kendogrid({ datasource: { data: data, //transport: { // read: "assets/data/data.users.php", //}, schema: { data: function(result) { homecoming result.data || result; }, total: function(result) { var info = this.data(result); homecoming info ? data.length : 0; }, model:{ id:"memberid", fields:{ dt:{ type:"date" }, costrate:{ type:"number" } } } }, pagesize: 10, }, sortable: { mode: "single", allowunsort: true, }, pageable: { input: true, numeric: false }, reorderable: true, resizable: true, filterable: { extra:false, operators: { string:{ contains: "contains", } } }, columnmenu: false, groupable: true, 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() }); $.cookie("employeesstate",state); if($.cookie('emprows')){ $.each(json.parse($.cookie('emprows')),function(){ var item = datasource.get(this); var row = grid.tbody.find('[data-uid='+item.uid+']'); row.addclass('k-state-selected'); }) } }, change:function(){ var grid = this; var ids = grid.select().map(function(){ homecoming grid.dataitem($(this)).id }).toarray(); $.cookie('emprows',json.stringify(ids)); }, columns: [ { field: "name", title:"name" }, { field: "email", title:"email/username" }, { field: "costrate", title:"cost rate (p/hr)", template: '#= kendo.tostring(costrate, "c") #', }, { field: "permission", title:"permission", template: "#= (permission == 'admin') ? 'administrator' : 'user' #" }, { field: "dt", title:"registered", template: '#= kendo.tostring(dt,"d-m-yyyy") #' }, { field: "memberid", title:" ", width: "83px", filterable: false, sortable: false, template: '<a class="k-button k-button-icontext k-grid-edit" href="manage_admin.php?form=editmember&id=#= kendo.tostring(memberid, "n2")#"><span class=\"k-icon k-edit\"></span>edit</a>'}, ] }); var state = json.parse($.cookie("employeesstate")); if(state){ if(state.filter){ parsefilterdates(state.filter, grid.datasource.options.schema.model.fields); } grid.datasource.query(state); } else{ grid.datasource.read(); } }); function parsefilterdates(filter, fields){ if(filter.filters){ for(var = 0; < filter.filters.length; i++){ parsefilterdates(filter.filters[i], fields); } } else{ if(fields[filter.field].type == "date"){ filter.value = kendo.parsedate(filter.value); } } } </script>

if debug fiddle see next line throws error:

grid.datasource.query(state);

the reason grid not instance of kendo grid div elemen id='grid'. prepare simple - initialize grid variable prior using it:

var grid = $("#grid").data('kendogrid'); grid.datasource.query(state);

javascript kendo-ui kendo-grid