State persistence of reordered columns on JQuery Kendo UI Grid with MVVM binding

Question

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.