Myujth

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.