I have the following grid configuration:
vm.gridData = new kendo.data.DataSource({ transport: { read: function (o) { $http.get(constants.getServiceUrl() + 'api/deficiencies') .success(function (response) { vm.activeCount = 0; vm.completedCount = 0; for (var i = 0; i < response.length; i++) { response[i].active ? vm.activeCount += 1 : vm.completedCount += 1; } o.success(response); }) .error(function (response) { o.error(response); showToast("Error getting deficiency list."); }); } }, pageSize: 15, schema: { model: { fields: { deficiencyNumber: { type: "string" }, location: { type: "string" }, deficiencyTypeDescription: { type: "string" }, description: { type: "string" }, dateIssued: { type: "date" }, dateCompleted: { type: "date" }, statusDescription: { type: "string" }, notes: { type: "string" }, municipality: { type: "string" }, owner: { type: "string" }, projectNumber: { type: "string" }, projectName: { type: "string" }, projectType: { type: "string" }, } } },});vm.gridOptions = { columns: [ { title: "Deficiency #", field: "deficiencyNumber", width: 200, filterable: { cell: { operator: "contains" } } }, { title: "Location", field: "location", width: 200, filterable: { cell: { operator: "contains" } } }, { title: "Deficiency Type", field: "deficiencyTypeDescription", width: 200, filterable: { multi: true } }, { title: "Description", field: "description", width: 200, filterable: { cell: { operator: "contains" } } }, { title: "Issued", field: "dateIssued", type: "date", format: "{0:dd-MMM-yyyy}" }, { title: "Completed", field: "dateCompleted", type: "date", width: 200, filterable: { cell: { enabled: true } }, template: "#= (dateCompleted == null) ? ' ' : kendo.toString(dateCompleted, 'dd-MMM-yyyy') #" }, { title: "Status", field: "statusDescription", width: 200, filterable: { multi: true } }, { title: "Notes", field: "notes", filterable: { cell: { operator: "contains" } } }, { title: "Municipality", field: "municipality", width: 200, filterable: { cell: { operator: "contains" } }, hidden: true }, { title: "Owner", field: "owner", filterable: { multi: true }, hidden: true }, { title: "Project", field: "projectNumber", width: 170, filterable: { cell: { operator: "contains" } }, hidden: true }, { title: "Project Name", field: "projectName", filterable: { cell: { operator: "contains" } }, hidden: true }, { title: "Project Type", field: "projectType", filterable: { multi: true }, hidden: true }, ], dataSource: vm.gridData, dataBound: function (e) { resizeGrid(); var grid = $("#deficiencyGrid").data("kendoGrid"); bestFitAllColumns(grid); }, sortable: { mode: "multiple" }, pageable: { pageSizes: [5, 10, 15, 25, 50] }, groupable: true, filterable: true, columnMenu: true, reorderable: true, resizable: true, navigatable: true, selectable: "row", height: "98%",};I am saving the grids state like so:
var grid = $("#deficiencyGrid").data("kendoGrid");vm.grid.state = kendo.stringify(grid.getOptions());This is sent to the api and then the user can click on a menu item to restore the state which runs:
var grid = $("#deficiencyGrid").data("kendoGrid");grid.setOptions(JSON.parse(vm.gridViews[i].state));The state string looks like so:
"{"prefix":"","name":"Grid","columns":[{"encoded":true,"title":"Deficiency #","field":"deficiencyNumber","width":122,"filterable":{"cell":{"operator":"contains"}},"template":"<span ng-bind='dataItem.deficiencyNumber'>#: data.deficiencyNumber#</span>","headerAttributes":{"id":"6e897ee7-a9ce-4882-b98c-ae84f7c71aaf"}},{"encoded":true,"title":"Location","field":"location","width":293,"filterable":{"cell":{"operator":"contains"}},"template":"<span ng-bind='dataItem.location'>#: data.location#</span>","headerAttributes":{"id":"0358a298-c265-4193-bbe0-2dd0fdd7c0e4"}},{"encoded":true,"title":"Deficiency Type","field":"deficiencyTypeDescription","width":148,"filterable":{"multi":true},"template":"<span ng-bind='dataItem.deficiencyTypeDescription'>#: data.deficiencyTypeDescription#</span>","headerAttributes":{"id":"b4ed7b70-03fa-403e-b24f-bdc3477f285e"}},{"encoded":true,"title":"Description","field":"description","width":390,"filterable":{"cell":{"operator":"contains"}},"template":"<span ng-bind='dataItem.description'>#: data.description#</span>","headerAttributes":{"id":"92359d3b-0dc8-435d-b010-0909f3e5e91e"}},{"encoded":true,"title":"Issued","field":"dateIssued","type":"date","format":"{0:dd-MMM-yyyy}","headerAttributes":{"id":"3a082046-bf1b-4d0a-b971-b098a9141c84"},"width":101},{"encoded":true,"title":"Completed","field":"dateCompleted","type":"date","width":115,"filterable":{"cell":{"enabled":true}},"template":"#= (dateCompleted == null) ? ' ' : kendo.toString(dateCompleted, 'dd-MMM-yyyy') #","headerAttributes":{"id":"5744d970-93e3-4cd8-b956-61792a1f2a21"}},{"encoded":true,"title":"Status","field":"statusDescription","width":90,"filterable":{"multi":true},"template":"<span ng-bind='dataItem.statusDescription'>#: data.statusDescription#</span>","headerAttributes":{"id":"d52ad07c-4c26-412c-a2bd-561c638aac80"}},{"encoded":true,"title":"Notes","field":"notes","filterable":{"cell":{"operator":"contains"}},"template":"<span ng-bind='dataItem.notes'>#: data.notes#</span>","headerAttributes":{"id":"baeb7e50-ccea-456e-a798-3ae89c677d4e"},"width":1550},{"encoded":true,"hidden":true,"title":"Municipality","field":"municipality","width":200,"filterable":{"cell":{"operator":"contains"}},"template":"<span ng-bind='dataItem.municipality'>#: data.municipality#</span>","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"deeacd36-e4d4-4ee5-8894-cdefa0fbe9bc","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Owner","field":"owner","filterable":{"multi":true},"template":"<span ng-bind='dataItem.owner'>#: data.owner#</span>","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"15b348a0-797d-481c-bafd-9b885194a0dd","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Project","field":"projectNumber","width":170,"filterable":{"cell":{"operator":"contains"}},"template":"<span ng-bind='dataItem.projectNumber'>#: data.projectNumber#</span>","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"c19dd18f-5a50-4b60-b3fb-c1c2cf11dc28","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Project Name","field":"projectName","filterable":{"cell":{"operator":"contains"}},"template":"<span ng-bind='dataItem.projectName'>#: data.projectName#</span>","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"b29717a2-1ea4-4c4f-b553-556791441708","style":"display:none"}},{"encoded":true,"hidden":true,"title":"Project Type","field":"projectType","filterable":{"multi":true},"template":"<span ng-bind='dataItem.projectType'>#: data.projectType#</span>","attributes":{"style":"display:none"},"footerAttributes":{"style":"display:none"},"headerAttributes":{"id":"b478a1e6-5b29-4959-b638-6bdc74d5ffdf","style":"display:none"}}],"toolbar":null,"autoBind":true,"filterable":true,"scrollable":true,"sortable":{"mode":"multiple"},"selectable":"row","allowCopy":false,"navigatable":true,"pageable":{"pageSizes":[5,10,15,25,50]},"editable":false,"groupable":true,"rowTemplate":"","altRowTemplate":"","noRecords":false,"dataSource":{"data":null,"schema":{"model":{"fields":{"deficiencyNumber":{"type":"string"},"location":{"type":"string"},"deficiencyTypeDescription":{"type":"string"},"description":{"type":"string"},"dateIssued":{"type":"date"},"dateCompleted":{"type":"date"},"statusDescription":{"type":"string"},"notes":{"type":"string"},"municipality":{"type":"string"},"owner":{"type":"string"},"projectNumber":{"type":"string"},"projectName":{"type":"string"},"projectType":{"type":"string"}}}},"offlineStorage":null,"serverSorting":false,"serverPaging":false,"serverFiltering":false,"serverGrouping":false,"serverAggregates":false,"batch":false,"transport":{"dataSource":null},"select":null,"table":null,"page":1,"filter":{"filters":[{"value":"Out to Field","operator":"eq","field":"statusDescription"}],"logic":"or"},"pageSize":15,"group":[]},"height":"98%","resizable":true,"reorderable":true,"columnMenu":true,"detailTemplate":null,"columnResizeHandleWidth":3,"mobile":"","messages":{"editable":{"cancelDelete":"Cancel","confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete"},"commands":{"create":"Add new record","cancel":"Cancel changes","save":"Save changes","destroy":"Delete","edit":"Edit","update":"Update","canceledit":"Cancel","excel":"Export to Excel","pdf":"Export to PDF"},"noRecords":"No records available."},"excel":{"proxyURL":"","allPages":true,"filterable":true,"fileName":"Deficiencies.xlsx"},"pdf":{"fileName":"Deficiencies.pdf","proxyURL":"","paperSize":"auto","allPages":true,"landscape":true,"margin":{"left":".5in","right":".5in","top":".5in","bottom":".5in"},"title":null,"author":"PowerVu","subject":null,"keywords":null,"creator":"PowerVu","date":null}}"
In there is a filter. The grid doesnt change. I have tried with changing column order, which columns are visible but the grid never changes.
1 Answer, 1 is accepted
Hello Elliot,
I noticed that some of your settings has a function for a value. As stated in the setOptions article the JSON.stringify() method cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved Grid state, all configuration fields, which represent function references, will be lost.
Please refer to the article for more information and suggestions when configuration values are functions.
Regards,
Boyan Dimitrov
Telerik