react-graph-grid 0.1.3 → 0.1.5

package/src/GridDB.jsx

@@ -1,897 +0,0 @@
-/* eslint-disable no-mixed-operators */
-import { useState, useEffect } from 'react';
-import { Images } from './Themes/Images';
-import { GridPKClass } from './GridPK';
-import { Dropdown } from './Dropdown';
-import { WaveType } from './Graph';
-import { NodeStatus } from './Base';
-import { BaseComponent } from './Base';
-// ==================================================================================================================================================================
-export function GridDB(props) {
-    let grid = null;
-
-    const [gridState, setState] = useState({ grid: grid, ind: 0 });
-
-    grid = gridState.grid;
-    let needGetRows = false;
-    if (!grid || grid.uid !== props.uid && props.uid != null) {
-        grid = null;
-        if (props.findGrid) {
-            grid = props.findGrid(props);
-        }
-        grid = grid || new GridDBClass(props);
-        needGetRows = !props.noAutoRefresh && !props.parentGrids;
-    }
-
-    if (props.init) {
-        props.init(grid);
-    }
-
-    grid.refreshState = function () {
-        setState({ grid: grid, ind: grid.stateind++ });
-    }
-
-    grid._waitingRows = needGetRows && (grid.rows.length <= 0 || grid.columns.length <= 0);
-
-    useEffect(() => {
-        grid.setupEvents(grid);
-
-        if (grid._waitingRows) {
-
-            grid.getRows({ filters: grid.collectFilters(), grid: grid }).then(
-                rows => {
-                    grid.rows = rows;
-                    grid.afterGetRows();
-                    grid.refreshState();
-                }
-            ).finally(() => {
-                grid._waitingRows = false;
-                grid.refreshState();
-            });
-        }
-        else if (grid.columns.length <= 0 && grid.getColumns) {
-            grid.prepareColumns().then(() => grid.refreshState());
-        }
-
-        return () => {
-            grid.clearEvents();
-        }
-    }, [grid])
-
-    return (grid.render());
-}
-// ==================================================================================================================================================================
-export class GridDBClass extends GridPKClass {
-
-    constructor(props) {
-        super(props);
-
-        const grid = this;
-        grid.pageNumber = 1;
-        grid.pageSize = props.pageSize === 0 ? 0 : props.pageSize || 10;
-
-        grid.pageSizes = [5, 10, 15, 20, 30, 40, 50, 100];
-
-        grid.buttons = props.buttons || [];
-
-        grid.sortDisabled = props.sortDisabled;
-
-        grid.opt.toolbarClass = props.toolbarClass;
-        grid.opt.toolbarButtonsClass = props.toolbarButtonsClass;
-        grid.opt.pagerClass = props.pagerClass;
-        grid.opt.pagerButtonsClass = props.pagerButtonsClass;
-        grid.opt.inputClass = props.inputClass;
-
-        grid.sortColumns = [];
-        grid._sortSeq = 1;
-
-        grid.multi = props.multi;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    static gridSettings = {};
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    //visitByWaveOld(e) {
-    //    const grid = this;
-    //    if (grid.skipOnWaveVisit(e)) return;
-
-    //    if (e.waveType === WaveType.value) {
-    //        if (grid.status === NodeStatus.filter) {
-    //            if (!grid._selecting) {
-    //                grid.selectedRowIndex = -1;
-    //            }
-    //            grid.value = grid.text = '';
-    //            grid._selectedOptions = [];
-    //            return;
-    //        }
-    //    }
-
-    //    grid.pageNumber = 1;
-
-    //    super.visitByWaveOld(e);
-    //}
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    visitByWave(e) {
-        const grid = this;
-
-        const rpr = new Promise(function (resolve) {
-            resolve(e);
-        })
-
-        if (grid.skipOnWaveVisit(e)) return rpr;
-
-        if (e.waveType === WaveType.value) {
-            if (grid.status === NodeStatus.filter) {
-                if (!grid._selecting) {
-                    grid.selectedRowIndex = -1;
-                }
-                grid.value = grid.text = '';
-                grid._selectedOptions = [];
-                return rpr;
-            }
-        }
-
-        grid.pageNumber = 1;
-
-        return super.visitByWave(e);
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    keyAdd() {
-        const grid = this;
-        return `${super.keyAdd()}_${grid.pageSize}_${grid.pageNumber}_`;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    render() {
-        const grid = this;
-        grid.setupPagerButtons();
-
-        return (
-            <>
-                {grid.renderToolbar()}
-                {/*grid.renderAppliedFilters()*/}
-                {grid.renderPager()}
-                {super.render()}
-                {grid.renderPager(true)}
-                <Dropdown
-                    init={(dd) => {
-                        grid.menuDropdown = dd;
-                        dd._grid = grid;
-                    }}
-                    closeWhenMiss={true}
-                    getItems={(e) => { return e.self._grid.getGridSettings(e); }}
-                    onItemClick={(e) => { e.self._grid.onSettingsItemClick(e.itemId); }}>
-                </Dropdown>
-            </>
-        )
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    isDisabled() {
-        const grid = this;
-        return grid._isDisabled === true;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setDisabled(value) {
-        const grid = this;
-        grid._isDisabled = value;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    isEditing() {
-        const grid = this;
-        return grid._isEditing === true;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setEditing(value) {
-        const grid = this;
-        grid._isEditing = value;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderToolbar() {
-        const grid = this;
-        grid.buttons = grid.buttons || [];
-        return (
-            false ?
-                <div
-
-                    key={`gridToolbarDiv_${grid.id}_`}
-                    className={grid.opt.toolbarClass || BaseComponent.theme.toolbarClass || 'toolbar-default'}
-                >
-                    {
-                        grid.buttons.map((button, ind) => {
-                            return (
-                                button.getVisible && !button.getVisible() ? <span key={`toolbarEmpty_${grid.id}_${button.id}_${ind}_`}></span> :
-                                    <button
-                                        key={`toolbarButton_${grid.id}_${button.id}_${ind}_`}
-                                    ></button>
-                            )
-                        })
-                    }
-                </div>
-
-                :
-
-                grid.buttons.length <= 0 ? <></> :
-                    <div
-
-                        key={`gridToolbarDiv_${grid.id}_`}
-                        className={grid.opt.toolbarClass || 'toolbar-default'}
-                    >
-                        {
-                            grid.buttons.map((button, ind) => {
-                                return (
-                                    button.render ?
-                                        button.render()
-                                        :
-                                        <button
-                                            key={`toolbarButton_${grid.id}_${button.id}_${ind}_`}
-                                            className={`${button.class || grid.opt.toolbarButtonsClass || BaseComponent.theme.toolbarButtonsClass || 'grid-toolbar-button'}`}
-                                            style={{
-                                                width: button.w ? button.w : button.img ? '' : 'auto',
-                                                display: button.getVisible && !button.getVisible() ? 'none' : '',
-                                                padding: button.padding ? button.padding : '',
-                                                margin: '5px 2px',
-                                            }}
-                                            title={grid.translate(button.title, 'grid-toolbar-button')}
-                                            disabled={button.getDisabled && button.getDisabled({ grid: grid }) || button.disabled ? 'disabled' : ''}
-                                            onClick={button.click ? (e) => {
-                                                e.grid = grid;
-                                                button.click(e);
-                                            } : grid.onButtonClick ? (e) => { grid.onButtonClick(e) } : null}
-                                        >
-                                            {button.img ? button.img() : ''}
-                                            {GridDBClass.gridSettings.buttonSize > 0 || !button.img ? grid.translate(button.label, 'grid-toolbar-button') || grid.translate(button.title, 'grid-toolbar-button') : ''}
-                                        </button>
-                                );
-                            })
-                        }
-                    </div>
-        );
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderAppliedFilters() {
-        return <></>;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderPager(bottom) {
-        const grid = this;
-
-        return (
-            grid.pagerButtons.length <= 0 || bottom && !grid.allowBottomPager ? <></> :
-                <div
-                    key={`pagerDiv_${bottom ? 'bottom' : 'top'}_${grid.id}_`}
-                    className={grid.opt.pagerClass || BaseComponent.theme.pagerClass || 'grid-pager-default'}
-                    style={{ display: 'flex', alignItems: 'center' }}
-                >
-                    {
-                        grid.pagerButtons.map((button, ind) => {
-                            return (
-                                button.render ? button.render(button, bottom) :
-                                    <button
-                                        key={`pager_${bottom ? 'bottom' : 'top'}_${grid.id}_${button.id}_${ind}_`}
-                                        grid-pager-item={`${grid.id}_${button.id}_`}
-                                        className={`${button.class || BaseComponent.theme.pagerButtonsClass || 'grid-pager-button'}`}
-                                        title={grid.translate(button.title, 'grid-pager-button')}
-                                        disabled={grid.isEditing() || grid.isDisabled() || button.getDisabled && button.getDisabled({ grid: grid }) || button.disabled ? 'disabled' : ''}
-                                        onClick={button.click ? button.click : null}
-                                        style={{ margin: '5px 2px', minHeight: '2em', display: 'flex' }}
-                                    >
-                                        {button.img ? button.img() : ''}
-                                        {button.label ? grid.translate(button.label, 'grid-pager-button') : ''}
-                                    </button>
-                            );
-                        })
-                    }
-                </div>
-        );
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    gotoFirstPage() {
-        const grid = this;
-        grid.pageNumber = 1;
-        grid.selectedRowIndex = 0;
-        grid.refresh();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    gotoPrevPage() {
-        const grid = this;
-        grid.pageNumber = grid.pageNumber > 1 ? grid.pageNumber - 1 : 1;
-        grid.selectedRowIndex = 0;
-        grid.refresh();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    gotoNextPage() {
-        const grid = this;
-        grid.calculatePagesCount();
-        grid.pageNumber = grid.pageNumber < grid.pagesCount ? grid.pageNumber + 1 : grid.pageNumber;
-        grid.selectedRowIndex = 0;
-        grid.refresh();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    gotoLastPage() {
-        const grid = this;
-        grid.calculatePagesCount();
-        grid.pageNumber = grid.pageNumber < grid.pagesCount ? grid.pagesCount : grid.pageNumber;
-        grid.selectedRowIndex = 0;
-        grid.refresh();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setupPagerButtons() {
-        const grid = this;
-        if (grid.pagerButtons && grid.pagerButtons.length > 0) return;
-
-        grid.pagerButtons = [];
-        grid.pagerButtonsDict = {};
-
-        const refresh = {
-            id: 0,
-            name: 'refresh',
-            title: 'Refresh',
-            label: Images.images.refresh ? '' : 'Refresh',
-            click: function (e) {
-                grid.refresh();
-            },
-            img: Images.images.refresh,
-            class: grid.pagerButtonsClass,
-            getDisabled: function () {
-                return grid._waitingRows;
-            },
-        }
-
-        grid.pagerButtons.push(refresh);
-        grid.pagerButtonsDict[refresh.id] = grid.pagerButtonsDict[refresh.name] = refresh;
-
-        if (grid.showGridSettings) {
-            const settings = {
-                id: 1,
-                name: 'settings',
-                title: 'Settings',
-                label: Images.images.settings ? '' : 'Settings',
-                click: function (e) {
-                    grid.showGridSettings(e);
-                },
-                img: Images.images.settings,
-                class: grid.pagerButtonsClass,
-                getDisabled: function () {
-                    return grid._waitingRows;
-                },
-            }
-
-            grid.pagerButtons.push(settings);
-            grid.pagerButtonsDict[settings.id] = grid.pagerButtonsDict[settings.name] = settings;
-        }
-
-        if (grid.multi) {
-            const pocket = {
-                id: 2,
-                name: 'pocket',
-                title: 'Pocket',
-                label: Images.images.pocket ? '' : 'Pocket',
-                click: function (e) {
-                    grid.switchGridPocket(e);
-                },
-                img: grid.pocketOpened ? Images.images.pocketOpened : Images.images.pocket,
-                class: grid.pagerButtonsClass,
-                getDisabled: function () {
-                    return grid._waitingRows;
-                },
-            }
-
-            grid.pagerButtons.push(pocket);
-            grid.pagerButtonsDict[pocket.id] = grid.pagerButtonsDict[pocket.name] = pocket;
-        }
-
-        if (grid.pageSize > 0) {
-
-            const first = {
-                id: 3,
-                name: 'first',
-                title: 'First',
-                label: Images.images.first ? '' : 'First',
-                click: function (e) {
-                    grid.gotoFirstPage();
-                },
-                getDisabled: function () {
-                    return grid._waitingRows || !grid.rows || grid.rows.length <= 0 || grid.pageNumber === 1;
-                },
-                img: Images.images.first,
-                class: grid.pagerButtonsClass,
-            }
-
-            grid.pagerButtons.push(first);
-            grid.pagerButtonsDict[first.id] = grid.pagerButtonsDict[first.name] = first;
-
-            const prev = {
-                id: 4,
-                name: 'prev',
-                title: 'Prev',
-                label: Images.images.prev ? '' : 'Prev',
-                click: function (e) {
-                    grid.gotoPrevPage();
-                },
-                getDisabled: function () {
-                    return grid._waitingRows || !grid.rows || grid.rows.length <= 0 || grid.pageNumber === 1;
-                },
-                img: Images.images.prev,
-                class: grid.pagerButtonsClass,
-            }
-
-            grid.pagerButtons.push(prev);
-            grid.pagerButtonsDict[prev.id] = grid.pagerButtonsDict[prev.name] = prev;
-
-            const curr = {
-                id: 5,
-                name: 'curr',
-                title: 'Current Page',
-                label: 'Current Page',
-                click: function (e) {
-                },
-                getDisabled: function () {
-                    return grid._waitingRows || !grid.rows || grid.rows.length <= 1;
-                },
-                render: function (button, bottom) {
-                    return (
-                        <input
-                            key={`pager_${bottom ? 'bottom' : 'top'}_${grid.id}_${button.id}_`}
-                            title={grid.translate(button.title, 'grid-pager-button')}
-                            value={grid.pageNumber}
-                            grid-pager-item={`${grid.id}_${button.id}_`}
-                            className={`${button.class ? button.class : grid.opt.inputClass || BaseComponent.theme.inputClass || 'grid-pager-current'}`}
-                            style={{ width: '3em', height: '2em', display: 'inline-block', margin: '0 2px' }}
-                            disabled={grid._waitingRows || grid.isEditing() || grid.isDisabled() ? 'disabled' : ''}
-                            onChange={function (e) {
-                                const newPage = +e.target.value;
-
-                                if (grid.pageNumber !== newPage && newPage >= 1 && newPage <= grid.pagesCount) {
-                                    grid.pageNumber = newPage;
-                                    grid.selectedRowIndex = 0;
-                                    grid.refresh();
-                                }
-                            }}
-                        >
-                        </input>
-                    )
-                },
-            }
-
-            grid.pagerButtons.push(curr);
-            grid.pagerButtonsDict[curr.id] = grid.pagerButtonsDict[curr.name] = curr;
-
-            const pages = {
-                id: 6,
-                name: 'pages',
-                title: 'Total Pages',
-                label: 'Total Pages',
-                render: function (button, bottom) {
-                    return (
-                        <span
-                            key={`pager_${bottom ? 'bottom' : 'top'}_${grid.id}_${button.id}_`}
-                            className={'grid-pager-of'}
-                            title={grid.translate(button.title, 'grid-pager-button')}
-                        >
-                            {` ${grid.translate('of', 'pager-button')} ${grid.pagesCount >= 0 ? grid.pagesCount : '0'}`}
-                        </span>
-                    );
-                }
-            }
-
-            grid.pagerButtons.push(pages);
-            grid.pagerButtonsDict[pages.id] = grid.pagerButtonsDict[pages.name] = pages;
-
-            const next = {
-                id: 7,
-                name: 'next',
-                title: 'Next',
-                label: Images.images.next ? '' : 'Next',
-                click: function (e) {
-                    grid.gotoNextPage();
-                },
-                getDisabled: function () {
-                    return grid._waitingRows || !grid.rows || grid.rows.length <= 0 || grid.pageNumber === grid.pagesCount;
-                },
-                img: Images.images.next,
-                class: grid.pagerButtonsClass,
-            }
-
-            grid.pagerButtons.push(next);
-            grid.pagerButtonsDict[next.id] = grid.pagerButtonsDict[next.name] = next;
-
-            const last = {
-                id: 8,
-                name: 'last',
-                title: 'Last',
-                label: Images.images.last ? '' : 'Last',
-                click: function (e) {
-                    grid.gotoLastPage();
-                },
-                getDisabled: function () {
-                    return grid._waitingRows || !grid.rows || grid.rows.length <= 0 || grid.pageNumber === grid.pagesCount;
-                },
-                img: Images.images.last,
-                class: grid.pagerButtonsClass,
-            }
-
-            grid.pagerButtons.push(last);
-            grid.pagerButtonsDict[last.id] = grid.pagerButtonsDict[last.name] = last;
-
-            const pgsize = {
-                id: 9,
-                name: 'pgsize',
-                title: 'Page Size',
-                label: 'Page Size',
-                render: function (button, bottom) {
-                    return (
-                        <select
-                            key={`pager_${bottom ? 'bottom' : 'top'}_${grid.id}_${button.id}_`}
-                            title={grid.translate(button.title, 'grid-pager-button')}
-                            grid-pager-item={`${grid.id}_${button.id}_`}
-                            className={`grid-pager-size ${button.class ? button.class : grid.opt.inputClass || BaseComponent.theme.inputClass || ''}`}
-                            style={{ width: '4.5em', height: '2em', display: 'inline-block', margin: '0 2px' }}
-                            value={grid.pageSize}
-                            disabled={grid._waitingRows || grid.isEditing() || grid.isDisabled() ? 'disabled' : ''}
-                            onChange={function (e) {
-                                grid.setPageSize(+e.target.value);
-                            }}
-                        >
-                            {
-                                grid.pageSizes.map((size, ind) => {
-                                    return (
-                                        <option
-                                            value={+size}
-                                            key={`pageSize_${grid.id}_${ind}_`}
-                                        >
-                                            {size}
-                                        </option>
-                                    );
-                                })
-                            }
-                        </select>
-                    );
-                },
-            }
-
-            grid.pagerButtons.push(pgsize);
-            grid.pagerButtonsDict[pgsize.id] = grid.pagerButtonsDict[pgsize.name] = pgsize;
-        }
-
-        const rows = {
-            id: 10,
-            name: 'rows',
-            title: 'Total Rows',
-            label: 'Total Rows',
-            render: function (button, bottom) {
-                const total = `${grid.translate('total rows', 'pager-button')} ${grid.totalRows >= 0 ? grid.totalRows : '0'}`;
-                return (
-                    <span
-                        className={'grid-pager-total'}
-                        title={total}
-                        key={`pager_${bottom ? 'bottom' : 'top'}_${grid.id}_${button.id}_`}
-                        style={{ margin: '5px 2px' }}
-                    >
-                        {total}
-                    </span>
-                );
-            }
-        }
-
-        grid.pagerButtons.push(rows);
-        grid.pagerButtonsDict[rows.id] = grid.pagerButtonsDict[rows.name] = rows;
-
-        if (!grid.sortDisabled) {
-            const sort = {
-                id: 11,
-                name: 'sort',
-                title: 'Sort',
-                label: 'Sort',
-                render: function (button, bottom) {
-                    return (
-                        grid._sortString != null ?
-                            <span
-                                className={'grid-pager-total'}
-                                title={grid._sortString}
-                                key={`pager_${bottom ? 'bottom' : 'top'}_${grid.id}_${button.id}_`}
-                                style={{ margin: '5px 2px' }}
-                            >
-                                {`${grid._sortString}`}
-                            </span>
-                            :
-                            <></>
-                    );
-                }
-            }
-
-            grid.pagerButtons.push(sort);
-            grid.pagerButtonsDict[sort.id] = grid.pagerButtonsDict[sort.name] = sort;
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setPageSize(newSize) {
-        const grid = this;
-
-        if (grid.pageSize === newSize || grid.pageSizes.indexOf(newSize) < 0) return;
-
-        grid.pageSize = newSize;
-        grid.pageNumber = 1;
-        grid.selectedRowIndex = 0;
-        grid.checkPocketState();
-        grid.refresh();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getHeaderGridTemplateColumns(col) {
-        return col.sortInd == null ? 'auto 12px' : 'auto 22px';
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    renderHeaderCell(col, context) {
-        const grid = this;
-        if (grid.sortDisabled) {
-            return super.renderHeaderCell(col, context);
-        }
-
-        const title = grid.translate(col.title || col.name) || '';
-        const sortDir = !col.sortable ? '' : col.asc ? '&#11205;' : col.desc ? '&#11206;' : '';
-
-        const parser = new DOMParser();
-        const decodedString = parser.parseFromString(`<!doctype html><body>${sortDir}`, 'text/html').body.textContent;
-
-        const notDisabled = !grid._waitingRows && !grid.isEditing() && !grid.isDisabled();
-
-        return (
-            <>
-                <span
-                    className={`grid-header-title ${col.sortable ? 'grid-header-title-sortable' : ''}`}
-                    style={{
-                        cursor: col.sortable && notDisabled ? 'pointer' : '',
-                        gridColumn: !sortDir ? 'span 2' : '', opacity: notDisabled ? "1" : "0.6",
-                        whiteSpace: 'nowrap',
-                        overflowX: 'hidden',
-                        width: sortDir ? 'calc(100% - 10px)' : '',
-                        textAlign: 'left',
-                    }}
-                    onClick={(e) => { if (!grid._waitingRows) grid.changeColumnSortOrder(col, e); }}
-                    disabled={grid._waitingRows || col.disabled ? 'disabled' : ''}
-                >
-                    {title}
-                </span>
-                {sortDir ? <span className={'grid-header-sort-sign'} style={{ opacity: notDisabled ? "1" : "0.6" }}>{decodedString + (col.sortInd > 0 ? ` ${col.sortInd} ` : '')}</span> : ''}
-            </>
-        );
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getGridSettingsList() {
-        const grid = this;
-        const res = [
-            { id: 0, text: grid.translate('Reset columns order', 'grid-menu') },
-            { id: 1, text: grid.translate('Reset columns widths', 'grid-menu') },
-        ];
-
-        if (!grid.sortDisabled) {
-            res.push({ id: 2, text: grid.translate('Reset columns sort', 'grid-menu') });
-        }
-
-        return res;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getGridSettings(e) {
-        const grid = this;
-        return new Promise(function (resolve, reject) {
-
-            const items = grid.getGridSettingsList();
-            resolve(items);
-        });
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    showGridSettings(e) {
-        const grid = this;
-
-        if (!grid.menuDropdown) return;
-
-        const elem = document.getElementById(e.target.id);
-        grid.menuDropdown.opt.parentRect = elem ? elem.getBoundingClientRect() : e.target.getBoundingClientRect();
-
-        grid.menuDropdown.popup(e);
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    checkPocketState() {
-        super.checkPocketState();
-
-        const grid = this;
-        if (!grid.multi) return;
-
-        grid.setPocketImage();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    setPocketImage() {
-        const grid = this;
-        if (!grid.multi || !grid.pagerButtonsDict) return;
-
-        const pocket = grid.pagerButtonsDict['pocket'];
-        if (!pocket) return;
-
-        pocket.img = grid.pocketOpened ? Images.images.pocketOpened : Images.images.pocket;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    switchGridPocket(e) {
-        const grid = this;
-        if (!grid.multi) return;
-
-        grid.pocketOpened = !grid.pocketOpened;
-
-        grid.setPocketImage();
-        grid.refreshState();
-
-        if (grid.graph) {
-            grid.graph.triggerWave({ nodes: [grid], withStartNodes: false });
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    loadPocketRows() {
-        const grid = this;
-        super.loadPocketRows();
-
-        grid._sortColumns = [];
-        for (let col of grid.columns) {
-            if (col.sortInd != null && col.sortInd !== null || col.asc || col.desc) {
-                grid._sortColumns.push(col);
-            }
-        }
-
-        if (grid._sortColumns.length > 0) {
-            grid._sortColumns.sort((a, b) => { return a.sortInd > b.sortInd ? 1 : -1 });
-        }
-        else {
-            grid._sortColumns.push({ name: grid.getKeyColumn(), asc: true });
-        }
-
-        //let sortCol = null;
-        //for (let col of grid.columns) {
-        //    if (col.asc || col.desc) {
-        //        sortCol = col;
-        //        break;
-        //    }
-        //}
-
-        //if (sortCol != null) {
-        //    this._selectedRows.sort(function (a, b) { return a[sortCol.name] > b[sortCol.name] ? (sortCol.asc ? 1 : -1) : (sortCol.asc ? -1 : 1); });
-        //}
-
-        grid._selectedRows.sort((a, b) => {
-            let lastCol;
-            for (let col of grid._sortColumns) {
-                if (a[col.name] === b[col.name]) continue;
-                lastCol = col;
-                break;
-            }
-            if (!lastCol) return 0;
-            return a[lastCol.name] > b[lastCol.name] ? (lastCol.asc ? 1 : -1) : (lastCol.asc ? -1 : 1);
-        });
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    onSettingsItemClick(itemId) {
-        const grid = this;
-
-        switch (String(itemId)) {
-            case '0':
-                grid.resetColumnsOrderToDefault();
-                break;
-            case '1':
-                grid.resetColumnsWidthsToDefault();
-                break;
-            case '2':
-                grid.resetColumnsSort();
-                break;
-            default:
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    resetColumnsSort() {
-        const grid = this;
-        grid._sortString = '';
-        let needRefresh = false;
-        for (let col of grid.columns) {
-            needRefresh = needRefresh || col.asc != false || col.desc != false;
-
-            delete col.asc;
-            delete col.desc;
-            delete col.sortInd;
-        }
-        if (needRefresh) {
-            grid.refresh();
-        }
-        else {
-            grid.refreshState();
-        }
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    changeColumnSortOrder(column, e) {
-        const grid = this;
-
-        if (column === grid._skipClickColumn) {
-            delete grid._skipClickColumn;
-            return;
-        }
-
-        if (!column.sortable || grid.isEditing() || grid.isDisabled()) return;
-
-        let nextInd = 1;
-        if (e.shiftKey) {
-            for (let col of grid.columns) {
-                if (col.sortInd != null && col.sortInd !== null) {
-                    nextInd++;
-                }
-                else if (col.asc || col.desc) {
-                    col.sortInd = nextInd++;
-                }
-            }
-        }
-
-        if (column.asc) {
-            delete column.asc;
-            column.desc = true;
-            if (!e.shiftKey) {
-                delete column.sortInd;
-            }
-        }
-        else if (column.desc) {
-            const prevInd = column.sortInd;
-            delete column.desc;
-            delete column.sortInd;
-            if (e.shiftKey) {
-                for (let col of grid.columns) {
-                    if (col.sortInd > prevInd) col.sortInd--;
-                }
-            }
-        }
-        else {
-            column.asc = true;
-            if (e.shiftKey) {
-                column.sortInd = nextInd;
-            }
-            else {
-                delete column.sortInd;
-            }
-        }
-
-        if (!e.shiftKey) {
-            for (let col of grid.columns) {
-                if (col === column) continue;
-
-                delete col.asc;
-                delete col.desc;
-                delete col.sortInd;
-            }
-        }
-
-        delete grid._sortString;
-        grid.selectedRowIndex = 0;
-        grid.afterSortColumn(column);
-        grid.refresh();
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    afterSortColumn(column) {
-        const grid = this;
-        grid.getSortedString();
-        delete grid._selectedRows;
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-    getSortedString() {
-        const grid = this;
-        //if (grid._sortString != null) return grid._sortString;
-
-        grid._sortString = '';
-        if (grid.sortDisabled) return '';
-
-        const sortedColumns = [];
-        for (let col of grid.columns) {
-            if (col.asc || col.desc) sortedColumns.push(col);
-        }
-
-        sortedColumns.sort((a, b) => { return a.sortInd > b.sortInd ? 1 : -1 });
-
-        const arr = [];
-        for (let col of sortedColumns) {
-            arr.push((col.title || col.name) + (col.desc ? ' (' + grid.translate('desc') + ')' : ''));
-        }
-
-        grid._sortString = arr.join(', ');
-
-        grid._sortString = grid._sortString ? grid.translate('sort', 'pager-button') + ': ' + grid._sortString : '';
-    }
-    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
-}