그리드 상태 유지

import 'bootstrap.css';
import './styles.css';
import '@mescius/wijmo.styles/wijmo.css';
import * as wjInput from '@mescius/wijmo.input';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridFilter from '@mescius/wijmo.grid.filter';
import { CellMaker } from '@mescius/wijmo.grid.cellmaker';
import * as wjCore from '@mescius/wijmo';
import * as dataService from './data';
//
document.readyState === 'complete' ? init() : (window.onload = init);
//
function init() {
    const map = new wjGrid.DataMap(dataService.getCountries(), 'id', 'name');
    //columns definition
    var columnsCollection = [
        { binding: 'id', header: 'ID' },
        {
            header: 'Country',
            binding: 'country',
            width: 200,
            dataMap: getDataMap('country'),
        },
        {
            header: 'Products',
            binding: 'products',
            width: 200,
            editor: getEditor('products'),
        },
        {
            binding: 'downloads',
            header: 'Downloads',
            cellTemplate: getCellTemplate('downloads'),
        },
        {
            binding: 'button',
            header: 'Button CellMaker',
            isReadOnly: true,
            width: 200,
            cellTemplate: getCellTemplate('button')
        },
    ];
    function getCellTemplate(binding) {
        switch (binding) {
            case 'button':
                return CellMaker.makeButton({
                    text: '<b>${item.products}</b> Button',
                    click: (e, ctx) => {
                        alert("Button clicked: " + ctx.item.id);
                    },
                });
            case 'downloads':
                return (ctx) => {
                    return `<span class=${ctx.item.downloads > 10000 ? 'high-val' : 'low-val'}>${ctx.text}</span>`;
                };
        }
        return null;
    }
    //
    function getEditor(binding) {
        if (binding === 'products') {
            return new wjInput.ComboBox(document.createElement('div'), {
                itemsSource: dataService.getProducts(),
                selectedValuePath: 'id',
                displayMemberPath: 'name',
            });
        }
        return null;
    }
    //
    function getDataMap(binding) {
        if (binding === 'country') {
            return map;
        }
    }
    //
    // create a grid with a filter
    var theGrid = new wjGrid.FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: columnsCollection,
        itemsSource: new wjCore.CollectionView(dataService.getData()),
    });
    var theFilter = new wjGridFilter.FlexGridFilter(theGrid);
    //
    // save/restore grid state
    document.getElementById('btnSave').addEventListener('click', function () {
        var state = {
            columns: theGrid.columnLayout,
            filterDefinition: theFilter.filterDefinition,
            sortDescriptions: theGrid.collectionView.sortDescriptions.map(function (sortDesc) {
                return { property: sortDesc.property, ascending: sortDesc.ascending };
            }),
        };
        localStorage['GridStatePureJs'] = JSON.stringify(state);
    });
    document.getElementById('btnRestore').addEventListener('click', function () {
        var json = localStorage['GridStatePureJs'];
        if (json) {
            var state = JSON.parse(json);
            //
            //restore column layout
            theGrid.columnLayout = state.columns;
            //update CellTemplate/Editor/DataMap
            theGrid.columns.map((col) => (col.cellTemplate = getCellTemplate(col.binding),
                col.dataMap = getDataMap(col.binding),
                col.editor = getEditor(col.binding)));
            // restore filter definitions
            setTimeout(() => {
                theFilter.filterDefinition = state.filterDefinition;
            }); //delay to let columns render first properly
            // restore sort state
            var view = theGrid.collectionView;
            view.deferUpdate(function () {
                view.sortDescriptions.clear();
                for (var i = 0; i < state.sortDescriptions.length; i++) {
                    var sortDesc = state.sortDescriptions[i];
                    view.sortDescriptions.push(new wjCore.SortDescription(sortDesc.property, sortDesc.ascending));
                }
            });
        }
    });
}