Сохранение состояния переупорядоченных столбцов в JQuery Kendo UI Grid с привязкой MVVM

Question

У меня есть JQuery Kendo UI Grid с привязкой MVVM, вот HTML-код на Razor вид

<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>

Ниже приводится 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();

Я пытаюсь сохранить пользовательские настройки (параметры), например, когда пользователь меняет порядок столбцов, группирует и / или применяет фильтры, в localalstorage и когда этот пользователь возвращается в браузер страниц, он должен прочитать localalstorage и применить его к сетки. Я смог найти, как это сделать с помощью фильтров и группировки, используя следующий код, который запускается, когда пользователь уходит с веб-страницы.

   window.onbeforeunload = function () {
            localStorage["dvJobGoalGrid-grid-filters"] = JSON.stringify(viewModel.goalJobs.filter());
            localStorage["dvJobGoalGrid-grid-groups"] = JSON.stringify(viewModel.goalJobs.group());
            return;
        }

А следующий код читает localalstorate и применяет фильтры и нащупывает к сетке

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

Но я не смог найти способ получения списка переупорядоченных столбцов из viewModel.goalJobs и не смог найти способ его динамического применения.

Есть ли способ сохранить все настройки (опции), когда пользователь покидает страницу, и применить их, когда он / она возвращается? Есть несколько примеров того, как сделать это, используя способ связывания без MVVM, но я ничего не видел с MVVM.