Grid SetOptions not working

2 posts, 0 answers
  1. Elliot
    Elliot avatar
    59 posts
    Member since:
    May 2012

    Posted 11 Mar 2016 Link to this post

    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.

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 15 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top