Ndtyjky

I have A Jquery Kendo UI Grid with MVVM binding, Here is the html code on Razor
view

<div data-role="grid"

         id="dvJobGoalGrid"

         data-groupable="true"

         data-sortable="true"

         data-filterable="{'mode':'row'}"

         data-pageable="{pageSize:20}"

         data-pageSize="defaultRowsPerPage"

         data-reorderable="true"

         data-column-menu="true"

         data-columns="[

            {'field': 'SJobID', 'title':'Job ID', 'width': 150,

            'template': '#= viewModel.JobIdTemplate(SJobID) #',

            'filterable': {  'cell': { 'showOperators': false, 'operator': 'contains'  } }},

            {'field': 'DisplayName', 'title':'Name','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'PName', 'title':'POT Name','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'JobDesc', 'title':'Description','width': 450, 'filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'MgGShortDesc', 'title':'MG','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'RGDesc', 'title':'RGD','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'CategoryShortDesc', 'title':'Category','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'JobStatusDesc', 'title':'Status','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'RGDesc', 'title':'RG','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }},

            {'field': 'Api', 'title':'API','filterable': {  'cell': { 'showOperators': false, 'operator': 'contains' } }}

         ]"

         data-bind="source: goalJobs">

    </div>

Following is JQuery viewModel

var viewModel = kendo.observable({

isVisible: true,

gridRowsPerpage: [10,20,30,40],

defaultRowsPerPage: 10,

goalJobs: new kendo.data.DataSource({

    schema: {

        data: function (data) {

            return data.value;

        },

        total: function (data) {

            return data['odata.count'];

        },

        model: {

            fields: {

                JobID: { type: "number" },

                SJobID: { type: "string" },

                DisplayName: { type: "string" },

                PName: { type: "string" },

                JobDesc: { type: "string" },

                MgGShortDesc: { type: "string" },

                RGroupDesc: { type: "string" },

                CategoryShortDesc: { type: "string" },

                JobStatusDesc: { type: "string" },

                RGroupDesc: { type: "string" },

                Api: { type: "string" },

                Area: { type: "string" },

                LastUpdatedDate: { type: "date" },

            }

        }

    },

    sort: {

        field: "LastUpdatedDate",

        dir: "desc"

    },

    filter: {

        logic: "and",

        filters: [{ field: "GW", operator: "eq", value: true },

        { field: "JobStatusID", operator: "eq", value: 1 }]

    },

    type: "odata",

    transport: {

        read: {

            url: MYURL

            dataType: "json"

        }

    },

    pageSize: 10,

    serverPaging: true,

    serverFiltering: true,

    serverSorting: true

}),

rowNumberSelected: function (n) {

    this.goalJobs.pageSize(this.defaultRowsPerPage);

    console.log(n);

},

searchChanged: function () {

    var searchVal = viewModel.searchText;

    var existingFilters;

    var globalSearchFilter = {

        pageSize: 10,

        logic: "or",

        filters: [

            { field: "SJobID", operator: "contains", value: searchVal },

            { field: "DisplayName", operator: "contains", value: searchVal },

            { field: "PName", operator: "contains", value: searchVal },

            { field: "JobDesc", operator: "contains", value: searchVal },

            { field: "MgGShortDesc", operator: "contains", value: searchVal },

            { field: "RGroupDesc", operator: "contains", value: searchVal },

            { field: "CategoryShortDesc", operator: "contains", value: searchVal },

            { field: "JobStatusDesc", operator: "contains", value: searchVal },

            { field: "RGroupDesc", operator: "contains", value: searchVal },

            { field: "Api", operator: "contains", value: searchVal }]

    };

    if (viewModel.goalJobs.filter()) {

        existingFilters = viewModel.goalJobs.filter();

        existingFilters.filters.push(globalSearchFilter);

        globalSearchFilter = existingFilters;

    }

    viewModel.goalJobs.filter(globalSearchFilter);

},

clearAllFilters: function () {

    viewModel.goalJobs.filter();

    viewModel.goalJobs.filter({ filters: [{ field: "Goal", operator: "eq", value: true }] });

    viewModel.set("searchText", "");

},

searchText: "",

JobIdTemplate: function (jobid) {

    return '<a href="/goto/' + jobid + '" target="_blank">' + jobid + '</a>';

},

loadSettings: function () {

    if (localStorage["dvJobGoalGrid-grid-filters"]) {

        viewModel.goalJobs.filter(JSON.parse(localStorage["dvJobGoalGrid-grid-filters"]));

    }

    if (localStorage["dvJobGoalGrid-grid-groups"]) {

        viewModel.goalJobs.group(JSON.parse(localStorage["dvJobGoalGrid-grid-groups"]));

    }

}

});

kendo.bind($("#dvJobs"), viewModel);

viewModel.loadSettings();

I am trying to save user's preferences (options), like when the user changes column order, grouping, and/or apply filters, in localstorage and when that user comes back to the page browser should read the localstorage and apply it to the Grid. I was able find how to do that with filters and grouping using following code which runs when user goes away from the webpage.

   window.onbeforeunload = function () {

            localStorage["dvJobGoalGrid-grid-filters"] = JSON.stringify(viewModel.goalJobs.filter());

            localStorage["dvJobGoalGrid-grid-groups"] = JSON.stringify(viewModel.goalJobs.group());

            return;

        }

And following code reads localstorate and applies the filters and groping to the grid

kendo.bind($("#dvJobs"), viewModel);

viewModel.loadSettings();

But I could not find how to retrieve reordered columns list from viewModel.goalJobs and could not find how to apply it dynamically.

Is there a way to store all setting (options) when user leaves the page and apply the same when he/she comes back?. There are some examples of how to do this using non-MVVM way of binding, but I could not see any thing with MVVM.