jsl-ui 9.28.3 → 9.28.4

package/lib/grid/slick.creator.js

@@ -1,726 +1,726 @@
-import { Slick } from "./slick.core";
-import { SlickGrid } from "./slick.grid";
-import { RowSelectionModel } from "./plugins/slick.rowselectionmodel";
-import { DataView } from "./slick.dataview";
-import { GroupItemMetadataProvider } from "./slick.groupitemmetadataprovider";
-import { jQueryReplacement } from "../core/jq";
-import { HeaderMenu } from "./plugins/slick.headermenu";
-import { HeaderButtons } from "./plugins/slick.headerbuttons";
-import { TextFormatter } from "./slick.formatters";
-import { ExcelFilter } from "./filterDialogs/excelFilter";
-import { UILang } from "../core/lang";
-import { RowMoveManager } from "./plugins/slick.rowmovemanager";
-import { Overlays } from "./plugins/ext.overlay";
-import { helper } from "../core/helper";
-const $ = jQueryReplacement;
-export function createJSLGrid(selector, data, columns, option) {
-    const formulaObjects = [];
-    let headerMenu;
-    let headerButtons;
-    const formulas = {};
-    let container;
-    let filters = [];
-    let customCommandHandler;
-    let grid;
-    let dataView;
-    let rowMoveManager;
-    //let options: ISlickCreatorOptions;
-    function createMe() {
-        sanitizeColumns(columns);
-        const options = $.shallowExtend({ explicitInitialization: true, mode: "client" }, option);
-        container = typeof (selector) === "string" ?
-            document.querySelector(selector) :
-            selector;
-        if (!container) {
-            throw new Error("error: selector for SlickCreator is invalid");
-        }
-        if (options.showColumnGroups) {
-            options.createPreHeaderPanel = true;
-            options.showPreHeaderPanel = true;
-        }
-        customCommandHandler = option.editCommandHandler;
-        options.editCommandHandler = (a, b, c) => { handleEditCommand(a, b, c); };
-        const groupItemMetadataProvider = options.groupItemMetadataProvider || GroupItemMetadataProvider(options.groupItemOptions);
-        if (options.dataView != null) {
-            dataView = options.dataView;
-        }
-        else {
-            dataView = new DataView({ inlineFilters: true, groupItemMetadataProvider });
-            dataView.setItems(data, options.primaryKey);
-        }
-        grid = new SlickGrid(container, dataView, columns, options);
-        grid.registerPlugin(groupItemMetadataProvider);
-        grid.setSelectionModel(new RowSelectionModel());
-        grid.onHeaderCellRendered.subscribe((e, args) => {
-            if (columnHasFilter(args.column.id)) {
-                //this column is filtered
-                args.node.classList.add("slick-filtered-header");
-            }
-        });
-        addCustomEvents();
-        setupDefaultSort();
-        setupChangeEvents();
-        if (options.showHeaderMenu) {
-            setupHeaderMenu();
-        }
-        setupHeaderButtons();
-        if (options.allowRowMove) {
-            rowMoveManager = new RowMoveManager({
-                cancelEditOnDrag: true,
-                singleRowMove: true,
-                disableRowSelection: true,
-                hideRowMoveShadow: false,
-                rowMoveShadowScale: 0.7,
-                rowMoveShadowOpacity: 0.9 // defaults to 0.95
-            });
-            grid.registerPlugin(rowMoveManager);
-            rowMoveManager.onBeforeMoveRows.subscribe(function (e, args) {
-                // debugger;
-            });
-            rowMoveManager.onMoveRows.subscribe(function (e, args) {
-                var extractedRows = [], left, right;
-                var rows = args.rows;
-                var insertBefore = args.insertBefore;
-                left = data.slice(0, insertBefore);
-                right = data.slice(insertBefore, data.length);
-                rows.sort(function (a, b) { return a - b; });
-                for (var i = 0; i < rows.length; i++) {
-                    extractedRows.push(data[rows[i]]);
-                }
-                rows.reverse();
-                for (var i = 0; i < rows.length; i++) {
-                    var row = rows[i];
-                    if (row < insertBefore) {
-                        left.splice(row, 1);
-                    }
-                    else {
-                        right.splice(row - insertBefore, 1);
-                    }
-                }
-                data = left.concat(extractedRows.concat(right));
-                var selectedRows = [];
-                for (var i = 0; i < rows.length; i++)
-                    selectedRows.push(left.length + i);
-                // grid.resetActiveCell();
-                dataView.beginUpdate();
-                dataView.setItems(data);
-                dataView.endUpdate();
-                grid.render();
-            });
-        }
-        const isTouch = helper.isTouchScreen();
-        if (option.enableFillDown && !isTouch) {
-            var overlayPlugin = new Overlays({});
-            // Event fires when a range is selected
-            overlayPlugin.onFillUpDown.subscribe(function (e, args) {
-                const column = grid.getColumns()[args.range.fromCell];
-                // Ensure the column is editable
-                if (column.editor == null || column.readonly || !grid.getOptions().editable) {
-                    return;
-                }
-                // Find the initial value
-                dataView.beginUpdate();
-                let value;
-                const items = [];
-                if (args.direction === "down") {
-                    const item = dataView.getItem(args.range.fromRow);
-                    value = grid.getDataItemValueForColumn(item, column); // item[column.field];
-                    // Copy the value down
-                    for (let i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
-                        if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column }, e) !== false) {
-                            const currentItem = dataView.getItem(i);
-                            items.push(currentItem);
-                            // if (options.setDataItemValueForColumn != null) {
-                            //     options.setDataItemValueForColumn(currentItem, column, value);
-                            // } else {
-                            //     dataView.getItem(i)[column.field] = value;
-                            // }
-                            // grid.invalidateRow(i);
-                            // grid.onAfterEdit.notify({ grid, oldValue, newValue: value, column, item: dataView.getItem(i) }, e);
-                        }
-                    }
-                }
-                else {
-                    const item = dataView.getItem(args.range.toRow);
-                    items.push(item);
-                    value = grid.getDataItemValueForColumn(item, column); // item[column.field];
-                    // Copy the value up
-                    for (let i = args.range.fromRow; i <= args.range.toRow - 1; i++) {
-                        if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column }, e) !== false) {
-                            const currentItem = dataView.getItem(i);
-                            items.push(currentItem);
-                            // if (options.setDataItemValueForColumn != null) {
-                            //     options.setDataItemValueForColumn(currentItem, column, value);
-                            // } else {
-                            //     dataView.getItem(i)[column.field] = value;
-                            // }
-                            // grid.invalidateRow(i);
-                            // grid.onAfterEdit.notify({ grid, oldValue, newValue: value, column, item: dataView.getItem(i) }, e);
-                        }
-                    }
-                }
-                grid.onAfterFillDown.notify({ grid, value, column, direction: args.direction, range: args.range, items: items }, e);
-                dataView.endUpdate();
-                grid.render();
-            });
-            grid.registerPlugin(overlayPlugin);
-        }
-        if (!option.explicitInitialization) {
-            grid.init();
-        }
-        if (options.showColumnGroups) {
-            setTimeout(() => {
-                // TODO -> find better solution then timeout
-                grid.onColumnsResized.subscribe(() => {
-                    CreateColumnGroups();
-                });
-                CreateColumnGroups();
-            }, 1);
-        }
-        if (options.saveColumnsKey) {
-            grid.onColumnsResized.subscribe(() => {
-                storeColumnSettings();
-            });
-            grid.onColumnsReordered.subscribe(() => {
-                storeColumnSettings();
-            });
-            loadColumnSettings();
-        }
-    }
-    function CreateColumnGroups() {
-        const options = grid.getOptions();
-        const columns = grid.getColumns();
-        if (options.frozenColumn >= 0) {
-            // Add column groups to left panel
-            let $preHeaderPanel = $(grid.getPreHeaderPanel());
-            renderHeaderGroups($preHeaderPanel, 0, options.frozenColumn + 1);
-            // Add column groups to right panel
-            $preHeaderPanel = $(grid.getPreHeaderPanelRight());
-            renderHeaderGroups($preHeaderPanel, options.frozenColumn + 1, columns.length);
-        }
-        else {
-            const $preHeaderPanel = $(grid.getPreHeaderPanel());
-            renderHeaderGroups($preHeaderPanel, 0, columns.length);
-        }
-        function renderHeaderGroups(preHeaderPanel, start, end) {
-            preHeaderPanel.empty()
-                .addClass("slick-header-columns")
-                .css("left", "-1000px")
-                .width(grid.getHeadersWidth());
-            preHeaderPanel[0].parentElement.classList.add("slick-header");
-            const headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
-            let header;
-            let lastColumnGroup = "";
-            let widthTotal = 0;
-            for (let i = start; i < end; i++) {
-                const m = columns[i];
-                if (lastColumnGroup === m.columnGroup && i > start) {
-                    widthTotal += m.width;
-                    header.width(widthTotal - headerColumnWidthDiff);
-                }
-                else {
-                    widthTotal = m.width;
-                    header = $("<div class='ui-state-default slick-header-column' />")
-                        .html("<span class='slick-column-name'>" + (m.columnGroup || '') + "</span>")
-                        .width(m.width - headerColumnWidthDiff)
-                        .appendTo(preHeaderPanel);
-                }
-                lastColumnGroup = m.columnGroup;
-            }
-        }
-    }
-    function storeColumnSettings() {
-        const cols = grid.getColumns();
-        const options = grid.getOptions();
-        const colSettings = cols.map((c) => ({ id: c.id, width: c.width }));
-        if (window.localStorage) {
-            localStorage.setItem("_grid_col_settings_" + options.saveColumnsKey, JSON.stringify(colSettings));
-        }
-    }
-    function loadColumnSettings() {
-        if (!window.localStorage) {
-            return;
-        }
-        const options = grid.getOptions();
-        const key = options.saveColumnsKey;
-        if (key) {
-            const cols = grid.getColumns();
-            const colSettings = JSON.parse(localStorage.getItem("_grid_col_settings_" + key));
-            if (!colSettings) {
-                return;
-            }
-            for (let i = 0; i < colSettings.length; i++) {
-                for (let j = 0; j < cols.length; j++) {
-                    if (cols[j].id === colSettings[i].id) {
-                        const c = cols[j];
-                        c.width = colSettings[i].width;
-                        if (i !== j) {
-                            cols.splice(j, 1);
-                            cols.splice(i, 0, c);
-                        }
-                        break;
-                    }
-                }
-            }
-            grid.setColumns(cols);
-        }
-    }
-    function sanitizeColumns(cols) {
-        for (let i = 0; i < cols.length; i++) {
-            const c = cols[i];
-            if (c.field === undefined && c.id) {
-                c.field = c.id;
-            }
-        }
-    }
-    function addCustomEvents() {
-        grid.onAfterEdit = new Slick.Event();
-        grid.onFiltersChanged = new Slick.Event();
-        grid.onAfterFillDown = new Slick.Event();
-    }
-    function setupChangeEvents() {
-        dataView.onRowsChanged.subscribe((e, args) => {
-            grid.invalidateRows(args.rows);
-            grid.render();
-            // for (let idx = 0; idx < args.rows.length; idx++) {
-            //     grid.updateRow(args.rows[idx]);
-            // }
-            // grid.invalidate();
-        });
-        dataView.onRowCountChanged.subscribe((e, args) => {
-            grid.updateRowCount();
-            grid.render();
-        });
-        grid.onAddNewRow.subscribe((e, args) => {
-            const options = grid.getOptions();
-            if (options.provideDefaultValues != null) {
-                const result = options.provideDefaultValues(args.item);
-                if (result === false) {
-                    return;
-                }
-            }
-            dataView.addItem(args.item);
-            grid.onAfterEdit.notify({
-                grid,
-                oldValue: undefined,
-                newValue: grid.getDataItemValueForColumn(args.item, args.column),
-                column: args.column,
-                item: args.item
-            });
-        });
-    }
-    function setupDefaultSort() {
-        const options = grid.getOptions();
-        if (options.mode === "client") {
-            grid.onSort.subscribe((e, args) => {
-                sort(args.sortCol, args.sortAsc);
-            });
-        }
-        // TODO: multi column sort
-    }
-    function setupHeaderButtons() {
-        headerButtons = new HeaderButtons({});
-        grid.registerPlugin(headerButtons);
-    }
-    function setupHeaderMenu() {
-        headerMenu = new HeaderMenu({});
-        grid.registerPlugin(headerMenu);
-        headerMenu.onBeforeMenuShow.subscribe((e, args) => {
-            const column = args.column;
-            const menu = args.menu;
-            if (column.sortable) {
-                menu.items.push({
-                    title: UILang.grid.Sort + " " + UILang.grid.Asc,
-                    command: "sort-asc"
-                });
-                menu.items.push({
-                    title: UILang.grid.Sort + " " + UILang.grid.Desc,
-                    command: "sort-desc"
-                });
-            }
-            if (column.filterable) {
-                menu.items.push({
-                    title: UILang.grid.Filter,
-                    command: "filter"
-                });
-                if (filters.filter((f) => f.columnId === column.id).length > 0) {
-                    menu.items.push({
-                        title: UILang.grid.ClearFilter,
-                        command: "clear-filter"
-                    });
-                }
-            }
-        });
-        headerMenu.onCommand.subscribe((e, args) => {
-            if (args.command === "sort-asc" || args.command === "sort-desc") {
-                grid.onSort.notify({
-                    sortAsc: args.command === "sort-asc",
-                    sortCol: args.column,
-                    columnId: args.column.id,
-                    sortCols: [{ columnId: args.column.id, sortCol: args.column, sortAsc: args.command === "sort-asc" }],
-                    multiColumnSort: false
-                }, e);
-                // sort(args.column, args.command === "sort-asc");
-            }
-            else if (args.command === "filter") {
-                const options = grid.getOptions();
-                if (options.showFilterDialog != null) {
-                    options.showFilterDialog(args.column, grid);
-                }
-                else {
-                    new ExcelFilter(grid).show(args.column);
-                }
-            }
-            else if (args.command === "clear-filter") {
-                clearFilter(args.column.id);
-            }
-        });
-    }
-    // refresh formulas depending on the given column
-    function triggerFormula(column, item) {
-        const options = grid.getOptions();
-        const f = formulas[column];
-        if (f) {
-            for (let i = 0, l = f.length; i < l; i++) {
-                if (options.setDataItemValueForColumn != null) {
-                    options.setDataItemValueForColumn(item, f[i].column, f[i].fnc(item, column));
-                }
-                else {
-                    item[f[i].column] = f[i].fnc(item, column);
-                }
-            }
-        }
-    }
-    function handleEditCommand(item, column, editCommand) {
-        const options = grid.getOptions();
-        const oldVal = grid.getDataItemValueForColumn(item, column);
-        if (customCommandHandler) {
-            customCommandHandler(item, column, editCommand);
-        }
-        else {
-            editCommand.execute();
-        }
-        triggerFormula(column.field, item);
-        dataView.updateItem(item[options.primaryKey], item);
-        const afterEditResult = grid.onAfterEdit.notify({
-            grid,
-            oldValue: oldVal,
-            newValue: grid.getDataItemValueForColumn(item, column),
-            column,
-            item
-        });
-        if (afterEditResult === false) {
-            if (options.setDataItemValueForColumn != null) {
-                options.setDataItemValueForColumn(item, column, oldVal);
-            }
-            else {
-                item[column.field] = oldVal;
-            }
-            triggerFormula(column.field, item);
-            dataView.updateItem(item[options.primaryKey], item);
-        }
-    }
-    function setHeight(height) {
-        $(container).height(height);
-        grid.resizeCanvas();
-    }
-    function getHeight() {
-        return $(container).height();
-    }
-    function sort(column, sortAsc) {
-        function _comparer(a, b) {
-            let x = grid.getDataItemValueForColumn(a, column);
-            let y = grid.getDataItemValueForColumn(b, column);
-            if (typeof x === "string" && typeof y === "string") {
-                x = x.toLocaleLowerCase();
-                y = y.toLocaleLowerCase();
-            }
-            if (x == null && y != null) {
-                return -1;
-            }
-            else if (x != null && y == null) {
-                return 1;
-            }
-            else {
-                return (x === y ? 0 : (x > y ? 1 : -1));
-            }
-        }
-        function _visibleComparer(a, b) {
-            const x = column.formatter(0, 0, grid.getDataItemValueForColumn(a, column), column, a);
-            const y = column.formatter(0, 0, grid.getDataItemValueForColumn(b, column), column, b);
-            let xStr = (Object.prototype.toString.call(x) !== "[object Object]" ? x : x.text);
-            let yStr = (Object.prototype.toString.call(y) !== "[object Object]" ? y : y.text);
-            if (typeof x === "string" && typeof y === "string") {
-                xStr = x.toLocaleLowerCase();
-                yStr = y.toLocaleLowerCase();
-            }
-            return (xStr === yStr ? 0 : (xStr > yStr ? 1 : -1));
-        }
-        const comparer = column.comparer || (column.sortByVisibleValue ? _visibleComparer : _comparer);
-        dataView.sort(comparer, sortAsc ? true : false);
-    }
-    function setData(newData) {
-        data = newData;
-        dataView.setItems(data);
-        refresh();
-    }
-    function getData() {
-        return data;
-    }
-    function refreshData() {
-        // var selrows = self.getSelectedRows();
-        dataView.setItems(data);
-        // self.setSelectedRows(selrows);
-        refresh();
-    }
-    function refresh() {
-        grid.invalidate();
-    }
-    function addFormula(field, fnc, usedColumns) {
-        formulaObjects.push({ fnc, column: field });
-        for (let i = 0; i < usedColumns.length; i++) {
-            if (!formulas[usedColumns[i]]) {
-                formulas[usedColumns[i]] = [];
-            }
-            formulas[usedColumns[i]].push({ fnc, column: field });
-        }
-    }
-    /**
-     * returns the string representation of a value based on column settings
-     */
-    function getFormattedValue(column, value, item) {
-        const formatter = column.formatter || TextFormatter;
-        const formatterResult = formatter(0, 0, value, column, item, grid);
-        return (Object.prototype.toString.call(formatterResult) !== "[object Object]" ?
-            formatterResult :
-            (formatterResult.text));
-    }
-    function getContentWidth(column, row) {
-        const item = dataView.getItem(row);
-        const html = getFormattedValue(column, grid.getDataItemValueForColumn(item, column), item);
-        if (html.indexOf("<") >= 0) {
-            return calcLengthInternal(html, true) + 12;
-        }
-        else {
-            if (convertElement == null) {
-                convertElement = document.createElement("span");
-            }
-            convertElement.innerHTML = html;
-            return calcTextLength(convertElement.textContent) + 12;
-        }
-    }
-    let measureElement;
-    let convertElement;
-    const charWidth = {};
-    function calcTextLength(text) {
-        let result = 0;
-        for (let i = 0; i < text.length; i++) {
-            const c = text[i];
-            let w = charWidth[c];
-            if (w == null) {
-                charWidth[c] = w = calcLengthInternal(c, false);
-            }
-            result += w;
-        }
-        return result;
-    }
-    function calcLengthInternal(c, isHTML) {
-        if (measureElement == null) {
-            measureElement = document.createElement("span");
-            measureElement.style.top = "-100000px";
-            measureElement.style.position = "absolute";
-            measureElement.style.whiteSpace = "pre";
-            document.body.appendChild(measureElement);
-            grid.onBeforeDestroy.subscribe(() => {
-                if (measureElement.parentElement != null) {
-                    measureElement.parentElement.removeChild(measureElement);
-                }
-            });
-        }
-        if (isHTML) {
-            measureElement.innerHTML = c;
-        }
-        else {
-            measureElement.textContent = c;
-        }
-        return measureElement.getBoundingClientRect().width;
-    }
-    function fitToContent(column) {
-        let width = 10;
-        for (let idx = 0, len = grid.getDataLength(); idx < len; idx++) {
-            //const d = grid.getDataItem(idx);
-            width = Math.max(width, getContentWidth(column, idx));
-        }
-        column.width = width;
-        grid.setColumns(grid.getColumns());
-        // TODO: raise column resize event
-        // TODO (2): find more performant way to refresh columns
-    }
-    function triggerAllFormulas() {
-        if (formulaObjects.length === 0) {
-            return;
-        }
-        for (let j = 0; j < formulaObjects.length; j++) {
-            for (let i = 0; i < data.length; i++) {
-                const val = formulaObjects[j].fnc(data[i], grid, formulaObjects[j].column);
-                data[i][formulaObjects[j].column] = val;
-            }
-        }
-        refreshData();
-    }
-    function columnHasFilter(columnId) {
-        for (let i = 0, l = (filters ? filters.length : 0); i < l; i++) {
-            if (filters[i].columnId === columnId) {
-                return true;
-            }
-        }
-        return false;
-    }
-    function refreshDataItem(item) {
-        const options = grid.getOptions();
-        dataView.updateItem(item[options.primaryKey], item);
-        // formula refresh
-        for (const f in formulas) {
-            if (formulas.hasOwnProperty(f)) {
-                triggerFormula(f, item);
-            }
-        }
-        grid.updateRow(dataView.getRowByItem(item));
-    }
-    function addFilter(filter, dontrefresh) {
-        let filterArray;
-        if (Array.isArray(filter)) {
-            filterArray = filter;
-        }
-        else {
-            filterArray = [filter];
-        }
-        for (let idx = 0; idx < filterArray.length; idx++) {
-            // add filter
-            filters.push(filterArray[idx]);
-        }
-        if (!dontrefresh) {
-            refreshFilters();
-        }
-    }
-    function setFilters(f, dontrefresh) {
-        filters = f;
-        if (!dontrefresh) {
-            refreshFilters();
-        }
-    }
-    function getFilters() {
-        return filters;
-    }
-    function clearFilter(columnId, dontrefresh) {
-        if (columnId === undefined) { // clear all filters
-            filters.length = 0;
-        }
-        else {
-            for (let i = 0; i < filters.length; i++) {
-                if (filters[i].columnId === columnId) {
-                    filters.splice(i, 1);
-                    i--;
-                }
-            }
-        }
-        if (!dontrefresh) {
-            refreshFilters();
-        }
-    }
-    function refreshFilters(noColumnHeaderRefresh) {
-        const options = grid.getOptions();
-        function client_filter(item, args) {
-            const filterArray = args;
-            // no filter present -> show all rows
-            if (filterArray.length === 0) {
-                return true;
-            }
-            if (filterArray.length === 1) {
-                return filterArray[0].match.call(null, item, filterArray[0].field);
-            }
-            else {
-                let result = true;
-                let i = 0;
-                while (i < filterArray.length) {
-                    let orResult = false;
-                    while (i < filterArray.length) { // combine or(s)
-                        if (orResult || filterArray[i].match.call(null, item, filterArray[i].field)) {
-                            orResult = true;
-                        }
-                        if (filterArray[i].combine !== "or") {
-                            break;
-                        }
-                        else {
-                            i++;
-                        }
-                    }
-                    if (!orResult) {
-                        result = false;
-                        break;
-                    }
-                    i++;
-                }
-                return result;
-            }
-        }
-        if (options.mode === "client") {
-            dataView.setFilterArgs(filters);
-            dataView.setFilter(client_filter);
-        }
-        // redraw columns
-        if (!noColumnHeaderRefresh) {
-            grid.setColumns(grid.getColumns());
-        }
-        grid.onFiltersChanged.notify();
-    }
-    function getSelectedItems() {
-        const selRows = grid.getSelectedRows();
-        const rows = [];
-        for (let i = 0; i < selRows.length; i++) {
-            const rowIdx = selRows[i];
-            const toPush = dataView.getItem(rowIdx);
-            if (toPush !== undefined && !toPush.__group && !toPush.__groupTotals) {
-                rows.push(toPush);
-            }
-        }
-        return rows;
-    }
-    function getRowMoveManager() {
-        return rowMoveManager;
-    }
-    function getHeaderMenu() {
-        return headerMenu;
-    }
-    // function setHierachy(o: IGridTreeOptions): GridTree {
-    //     return new GridTree(this, o);
-    // }
-    createMe();
-    return $.shallowExtend(grid, {
-        dataView,
-        setHeight,
-        getHeight,
-        sort,
-        refreshData,
-        setData,
-        getData,
-        refresh,
-        addFormula,
-        getFormattedValue,
-        getContentWidth,
-        fitToContent,
-        triggerAllFormulas,
-        columnHasFilter,
-        refreshDataItem,
-        addFilter,
-        setFilters,
-        getFilters,
-        clearFilter,
-        refreshFilters,
-        getSelectedItems,
-        getRowMoveManager,
-        getHeaderMenu,
-        refreshColumnGroups: CreateColumnGroups
-        // setHierachy
-    });
-}
+import { Slick } from "./slick.core";
+import { SlickGrid } from "./slick.grid";
+import { RowSelectionModel } from "./plugins/slick.rowselectionmodel";
+import { DataView } from "./slick.dataview";
+import { GroupItemMetadataProvider } from "./slick.groupitemmetadataprovider";
+import { jQueryReplacement } from "../core/jq";
+import { HeaderMenu } from "./plugins/slick.headermenu";
+import { HeaderButtons } from "./plugins/slick.headerbuttons";
+import { TextFormatter } from "./slick.formatters";
+import { ExcelFilter } from "./filterDialogs/excelFilter";
+import { UILang } from "../core/lang";
+import { RowMoveManager } from "./plugins/slick.rowmovemanager";
+import { Overlays } from "./plugins/ext.overlay";
+import { helper } from "../core/helper";
+const $ = jQueryReplacement;
+export function createJSLGrid(selector, data, columns, option) {
+    const formulaObjects = [];
+    let headerMenu;
+    let headerButtons;
+    const formulas = {};
+    let container;
+    let filters = [];
+    let customCommandHandler;
+    let grid;
+    let dataView;
+    let rowMoveManager;
+    //let options: ISlickCreatorOptions;
+    function createMe() {
+        sanitizeColumns(columns);
+        const options = $.shallowExtend({ explicitInitialization: true, mode: "client" }, option);
+        container = typeof (selector) === "string" ?
+            document.querySelector(selector) :
+            selector;
+        if (!container) {
+            throw new Error("error: selector for SlickCreator is invalid");
+        }
+        if (options.showColumnGroups) {
+            options.createPreHeaderPanel = true;
+            options.showPreHeaderPanel = true;
+        }
+        customCommandHandler = option.editCommandHandler;
+        options.editCommandHandler = (a, b, c) => { handleEditCommand(a, b, c); };
+        const groupItemMetadataProvider = options.groupItemMetadataProvider || GroupItemMetadataProvider(options.groupItemOptions);
+        if (options.dataView != null) {
+            dataView = options.dataView;
+        }
+        else {
+            dataView = new DataView({ inlineFilters: true, groupItemMetadataProvider });
+            dataView.setItems(data, options.primaryKey);
+        }
+        grid = new SlickGrid(container, dataView, columns, options);
+        grid.registerPlugin(groupItemMetadataProvider);
+        grid.setSelectionModel(new RowSelectionModel());
+        grid.onHeaderCellRendered.subscribe((e, args) => {
+            if (columnHasFilter(args.column.id)) {
+                //this column is filtered
+                args.node.classList.add("slick-filtered-header");
+            }
+        });
+        addCustomEvents();
+        setupDefaultSort();
+        setupChangeEvents();
+        if (options.showHeaderMenu) {
+            setupHeaderMenu();
+        }
+        setupHeaderButtons();
+        if (options.allowRowMove) {
+            rowMoveManager = new RowMoveManager({
+                cancelEditOnDrag: true,
+                singleRowMove: true,
+                disableRowSelection: true,
+                hideRowMoveShadow: false, // defaults to true
+                rowMoveShadowScale: 0.7, // defaults to 0.75
+                rowMoveShadowOpacity: 0.9 // defaults to 0.95
+            });
+            grid.registerPlugin(rowMoveManager);
+            rowMoveManager.onBeforeMoveRows.subscribe(function (e, args) {
+                // debugger;
+            });
+            rowMoveManager.onMoveRows.subscribe(function (e, args) {
+                var extractedRows = [], left, right;
+                var rows = args.rows;
+                var insertBefore = args.insertBefore;
+                left = data.slice(0, insertBefore);
+                right = data.slice(insertBefore, data.length);
+                rows.sort(function (a, b) { return a - b; });
+                for (var i = 0; i < rows.length; i++) {
+                    extractedRows.push(data[rows[i]]);
+                }
+                rows.reverse();
+                for (var i = 0; i < rows.length; i++) {
+                    var row = rows[i];
+                    if (row < insertBefore) {
+                        left.splice(row, 1);
+                    }
+                    else {
+                        right.splice(row - insertBefore, 1);
+                    }
+                }
+                data = left.concat(extractedRows.concat(right));
+                var selectedRows = [];
+                for (var i = 0; i < rows.length; i++)
+                    selectedRows.push(left.length + i);
+                // grid.resetActiveCell();
+                dataView.beginUpdate();
+                dataView.setItems(data);
+                dataView.endUpdate();
+                grid.render();
+            });
+        }
+        const isTouch = helper.isTouchScreen();
+        if (option.enableFillDown && !isTouch) {
+            var overlayPlugin = new Overlays({});
+            // Event fires when a range is selected
+            overlayPlugin.onFillUpDown.subscribe(function (e, args) {
+                const column = grid.getColumns()[args.range.fromCell];
+                // Ensure the column is editable
+                if (column.editor == null || column.readonly || !grid.getOptions().editable) {
+                    return;
+                }
+                // Find the initial value
+                dataView.beginUpdate();
+                let value;
+                const items = [];
+                if (args.direction === "down") {
+                    const item = dataView.getItem(args.range.fromRow);
+                    value = grid.getDataItemValueForColumn(item, column); // item[column.field];
+                    // Copy the value down
+                    for (let i = args.range.fromRow + 1; i <= args.range.toRow; i++) {
+                        if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column }, e) !== false) {
+                            const currentItem = dataView.getItem(i);
+                            items.push(currentItem);
+                            // if (options.setDataItemValueForColumn != null) {
+                            //     options.setDataItemValueForColumn(currentItem, column, value);
+                            // } else {
+                            //     dataView.getItem(i)[column.field] = value;
+                            // }
+                            // grid.invalidateRow(i);
+                            // grid.onAfterEdit.notify({ grid, oldValue, newValue: value, column, item: dataView.getItem(i) }, e);
+                        }
+                    }
+                }
+                else {
+                    const item = dataView.getItem(args.range.toRow);
+                    items.push(item);
+                    value = grid.getDataItemValueForColumn(item, column); // item[column.field];
+                    // Copy the value up
+                    for (let i = args.range.fromRow; i <= args.range.toRow - 1; i++) {
+                        if (grid.onBeforeEditCell.notify({ row: i, cell: args.range.fromCell, item: dataView.getItem(i), column }, e) !== false) {
+                            const currentItem = dataView.getItem(i);
+                            items.push(currentItem);
+                            // if (options.setDataItemValueForColumn != null) {
+                            //     options.setDataItemValueForColumn(currentItem, column, value);
+                            // } else {
+                            //     dataView.getItem(i)[column.field] = value;
+                            // }
+                            // grid.invalidateRow(i);
+                            // grid.onAfterEdit.notify({ grid, oldValue, newValue: value, column, item: dataView.getItem(i) }, e);
+                        }
+                    }
+                }
+                grid.onAfterFillDown.notify({ grid, value, column, direction: args.direction, range: args.range, items: items }, e);
+                dataView.endUpdate();
+                grid.render();
+            });
+            grid.registerPlugin(overlayPlugin);
+        }
+        if (!option.explicitInitialization) {
+            grid.init();
+        }
+        if (options.showColumnGroups) {
+            setTimeout(() => {
+                // TODO -> find better solution then timeout
+                grid.onColumnsResized.subscribe(() => {
+                    CreateColumnGroups();
+                });
+                CreateColumnGroups();
+            }, 1);
+        }
+        if (options.saveColumnsKey) {
+            grid.onColumnsResized.subscribe(() => {
+                storeColumnSettings();
+            });
+            grid.onColumnsReordered.subscribe(() => {
+                storeColumnSettings();
+            });
+            loadColumnSettings();
+        }
+    }
+    function CreateColumnGroups() {
+        const options = grid.getOptions();
+        const columns = grid.getColumns();
+        if (options.frozenColumn >= 0) {
+            // Add column groups to left panel
+            let $preHeaderPanel = $(grid.getPreHeaderPanel());
+            renderHeaderGroups($preHeaderPanel, 0, options.frozenColumn + 1);
+            // Add column groups to right panel
+            $preHeaderPanel = $(grid.getPreHeaderPanelRight());
+            renderHeaderGroups($preHeaderPanel, options.frozenColumn + 1, columns.length);
+        }
+        else {
+            const $preHeaderPanel = $(grid.getPreHeaderPanel());
+            renderHeaderGroups($preHeaderPanel, 0, columns.length);
+        }
+        function renderHeaderGroups(preHeaderPanel, start, end) {
+            preHeaderPanel.empty()
+                .addClass("slick-header-columns")
+                .css("left", "-1000px")
+                .width(grid.getHeadersWidth());
+            preHeaderPanel[0].parentElement.classList.add("slick-header");
+            const headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
+            let header;
+            let lastColumnGroup = "";
+            let widthTotal = 0;
+            for (let i = start; i < end; i++) {
+                const m = columns[i];
+                if (lastColumnGroup === m.columnGroup && i > start) {
+                    widthTotal += m.width;
+                    header.width(widthTotal - headerColumnWidthDiff);
+                }
+                else {
+                    widthTotal = m.width;
+                    header = $("<div class='ui-state-default slick-header-column' />")
+                        .html("<span class='slick-column-name'>" + (m.columnGroup || '') + "</span>")
+                        .width(m.width - headerColumnWidthDiff)
+                        .appendTo(preHeaderPanel);
+                }
+                lastColumnGroup = m.columnGroup;
+            }
+        }
+    }
+    function storeColumnSettings() {
+        const cols = grid.getColumns();
+        const options = grid.getOptions();
+        const colSettings = cols.map((c) => ({ id: c.id, width: c.width }));
+        if (window.localStorage) {
+            localStorage.setItem("_grid_col_settings_" + options.saveColumnsKey, JSON.stringify(colSettings));
+        }
+    }
+    function loadColumnSettings() {
+        if (!window.localStorage) {
+            return;
+        }
+        const options = grid.getOptions();
+        const key = options.saveColumnsKey;
+        if (key) {
+            const cols = grid.getColumns();
+            const colSettings = JSON.parse(localStorage.getItem("_grid_col_settings_" + key));
+            if (!colSettings) {
+                return;
+            }
+            for (let i = 0; i < colSettings.length; i++) {
+                for (let j = 0; j < cols.length; j++) {
+                    if (cols[j].id === colSettings[i].id) {
+                        const c = cols[j];
+                        c.width = colSettings[i].width;
+                        if (i !== j) {
+                            cols.splice(j, 1);
+                            cols.splice(i, 0, c);
+                        }
+                        break;
+                    }
+                }
+            }
+            grid.setColumns(cols);
+        }
+    }
+    function sanitizeColumns(cols) {
+        for (let i = 0; i < cols.length; i++) {
+            const c = cols[i];
+            if (c.field === undefined && c.id) {
+                c.field = c.id;
+            }
+        }
+    }
+    function addCustomEvents() {
+        grid.onAfterEdit = new Slick.Event();
+        grid.onFiltersChanged = new Slick.Event();
+        grid.onAfterFillDown = new Slick.Event();
+    }
+    function setupChangeEvents() {
+        dataView.onRowsChanged.subscribe((e, args) => {
+            grid.invalidateRows(args.rows);
+            grid.render();
+            // for (let idx = 0; idx < args.rows.length; idx++) {
+            //     grid.updateRow(args.rows[idx]);
+            // }
+            // grid.invalidate();
+        });
+        dataView.onRowCountChanged.subscribe((e, args) => {
+            grid.updateRowCount();
+            grid.render();
+        });
+        grid.onAddNewRow.subscribe((e, args) => {
+            const options = grid.getOptions();
+            if (options.provideDefaultValues != null) {
+                const result = options.provideDefaultValues(args.item);
+                if (result === false) {
+                    return;
+                }
+            }
+            dataView.addItem(args.item);
+            grid.onAfterEdit.notify({
+                grid,
+                oldValue: undefined,
+                newValue: grid.getDataItemValueForColumn(args.item, args.column),
+                column: args.column,
+                item: args.item
+            });
+        });
+    }
+    function setupDefaultSort() {
+        const options = grid.getOptions();
+        if (options.mode === "client") {
+            grid.onSort.subscribe((e, args) => {
+                sort(args.sortCol, args.sortAsc);
+            });
+        }
+        // TODO: multi column sort
+    }
+    function setupHeaderButtons() {
+        headerButtons = new HeaderButtons({});
+        grid.registerPlugin(headerButtons);
+    }
+    function setupHeaderMenu() {
+        headerMenu = new HeaderMenu({});
+        grid.registerPlugin(headerMenu);
+        headerMenu.onBeforeMenuShow.subscribe((e, args) => {
+            const column = args.column;
+            const menu = args.menu;
+            if (column.sortable) {
+                menu.items.push({
+                    title: UILang.grid.Sort + " " + UILang.grid.Asc,
+                    command: "sort-asc"
+                });
+                menu.items.push({
+                    title: UILang.grid.Sort + " " + UILang.grid.Desc,
+                    command: "sort-desc"
+                });
+            }
+            if (column.filterable) {
+                menu.items.push({
+                    title: UILang.grid.Filter,
+                    command: "filter"
+                });
+                if (filters.filter((f) => f.columnId === column.id).length > 0) {
+                    menu.items.push({
+                        title: UILang.grid.ClearFilter,
+                        command: "clear-filter"
+                    });
+                }
+            }
+        });
+        headerMenu.onCommand.subscribe((e, args) => {
+            if (args.command === "sort-asc" || args.command === "sort-desc") {
+                grid.onSort.notify({
+                    sortAsc: args.command === "sort-asc",
+                    sortCol: args.column,
+                    columnId: args.column.id,
+                    sortCols: [{ columnId: args.column.id, sortCol: args.column, sortAsc: args.command === "sort-asc" }],
+                    multiColumnSort: false
+                }, e);
+                // sort(args.column, args.command === "sort-asc");
+            }
+            else if (args.command === "filter") {
+                const options = grid.getOptions();
+                if (options.showFilterDialog != null) {
+                    options.showFilterDialog(args.column, grid);
+                }
+                else {
+                    new ExcelFilter(grid).show(args.column);
+                }
+            }
+            else if (args.command === "clear-filter") {
+                clearFilter(args.column.id);
+            }
+        });
+    }
+    // refresh formulas depending on the given column
+    function triggerFormula(column, item) {
+        const options = grid.getOptions();
+        const f = formulas[column];
+        if (f) {
+            for (let i = 0, l = f.length; i < l; i++) {
+                if (options.setDataItemValueForColumn != null) {
+                    options.setDataItemValueForColumn(item, f[i].column, f[i].fnc(item, column));
+                }
+                else {
+                    item[f[i].column] = f[i].fnc(item, column);
+                }
+            }
+        }
+    }
+    function handleEditCommand(item, column, editCommand) {
+        const options = grid.getOptions();
+        const oldVal = grid.getDataItemValueForColumn(item, column);
+        if (customCommandHandler) {
+            customCommandHandler(item, column, editCommand);
+        }
+        else {
+            editCommand.execute();
+        }
+        triggerFormula(column.field, item);
+        dataView.updateItem(item[options.primaryKey], item);
+        const afterEditResult = grid.onAfterEdit.notify({
+            grid,
+            oldValue: oldVal,
+            newValue: grid.getDataItemValueForColumn(item, column),
+            column,
+            item
+        });
+        if (afterEditResult === false) {
+            if (options.setDataItemValueForColumn != null) {
+                options.setDataItemValueForColumn(item, column, oldVal);
+            }
+            else {
+                item[column.field] = oldVal;
+            }
+            triggerFormula(column.field, item);
+            dataView.updateItem(item[options.primaryKey], item);
+        }
+    }
+    function setHeight(height) {
+        $(container).height(height);
+        grid.resizeCanvas();
+    }
+    function getHeight() {
+        return $(container).height();
+    }
+    function sort(column, sortAsc) {
+        function _comparer(a, b) {
+            let x = grid.getDataItemValueForColumn(a, column);
+            let y = grid.getDataItemValueForColumn(b, column);
+            if (typeof x === "string" && typeof y === "string") {
+                x = x.toLocaleLowerCase();
+                y = y.toLocaleLowerCase();
+            }
+            if (x == null && y != null) {
+                return -1;
+            }
+            else if (x != null && y == null) {
+                return 1;
+            }
+            else {
+                return (x === y ? 0 : (x > y ? 1 : -1));
+            }
+        }
+        function _visibleComparer(a, b) {
+            const x = column.formatter(0, 0, grid.getDataItemValueForColumn(a, column), column, a);
+            const y = column.formatter(0, 0, grid.getDataItemValueForColumn(b, column), column, b);
+            let xStr = (Object.prototype.toString.call(x) !== "[object Object]" ? x : x.text);
+            let yStr = (Object.prototype.toString.call(y) !== "[object Object]" ? y : y.text);
+            if (typeof x === "string" && typeof y === "string") {
+                xStr = x.toLocaleLowerCase();
+                yStr = y.toLocaleLowerCase();
+            }
+            return (xStr === yStr ? 0 : (xStr > yStr ? 1 : -1));
+        }
+        const comparer = column.comparer || (column.sortByVisibleValue ? _visibleComparer : _comparer);
+        dataView.sort(comparer, sortAsc ? true : false);
+    }
+    function setData(newData) {
+        data = newData;
+        dataView.setItems(data);
+        refresh();
+    }
+    function getData() {
+        return data;
+    }
+    function refreshData() {
+        // var selrows = self.getSelectedRows();
+        dataView.setItems(data);
+        // self.setSelectedRows(selrows);
+        refresh();
+    }
+    function refresh() {
+        grid.invalidate();
+    }
+    function addFormula(field, fnc, usedColumns) {
+        formulaObjects.push({ fnc, column: field });
+        for (let i = 0; i < usedColumns.length; i++) {
+            if (!formulas[usedColumns[i]]) {
+                formulas[usedColumns[i]] = [];
+            }
+            formulas[usedColumns[i]].push({ fnc, column: field });
+        }
+    }
+    /**
+     * returns the string representation of a value based on column settings
+     */
+    function getFormattedValue(column, value, item) {
+        const formatter = column.formatter || TextFormatter;
+        const formatterResult = formatter(0, 0, value, column, item, grid);
+        return (Object.prototype.toString.call(formatterResult) !== "[object Object]" ?
+            formatterResult :
+            (formatterResult.text));
+    }
+    function getContentWidth(column, row) {
+        const item = dataView.getItem(row);
+        const html = getFormattedValue(column, grid.getDataItemValueForColumn(item, column), item);
+        if (html.indexOf("<") >= 0) {
+            return calcLengthInternal(html, true) + 12;
+        }
+        else {
+            if (convertElement == null) {
+                convertElement = document.createElement("span");
+            }
+            convertElement.innerHTML = html;
+            return calcTextLength(convertElement.textContent) + 12;
+        }
+    }
+    let measureElement;
+    let convertElement;
+    const charWidth = {};
+    function calcTextLength(text) {
+        let result = 0;
+        for (let i = 0; i < text.length; i++) {
+            const c = text[i];
+            let w = charWidth[c];
+            if (w == null) {
+                charWidth[c] = w = calcLengthInternal(c, false);
+            }
+            result += w;
+        }
+        return result;
+    }
+    function calcLengthInternal(c, isHTML) {
+        if (measureElement == null) {
+            measureElement = document.createElement("span");
+            measureElement.style.top = "-100000px";
+            measureElement.style.position = "absolute";
+            measureElement.style.whiteSpace = "pre";
+            document.body.appendChild(measureElement);
+            grid.onBeforeDestroy.subscribe(() => {
+                if (measureElement.parentElement != null) {
+                    measureElement.parentElement.removeChild(measureElement);
+                }
+            });
+        }
+        if (isHTML) {
+            measureElement.innerHTML = c;
+        }
+        else {
+            measureElement.textContent = c;
+        }
+        return measureElement.getBoundingClientRect().width;
+    }
+    function fitToContent(column) {
+        let width = 10;
+        for (let idx = 0, len = grid.getDataLength(); idx < len; idx++) {
+            //const d = grid.getDataItem(idx);
+            width = Math.max(width, getContentWidth(column, idx));
+        }
+        column.width = width;
+        grid.setColumns(grid.getColumns());
+        // TODO: raise column resize event
+        // TODO (2): find more performant way to refresh columns
+    }
+    function triggerAllFormulas() {
+        if (formulaObjects.length === 0) {
+            return;
+        }
+        for (let j = 0; j < formulaObjects.length; j++) {
+            for (let i = 0; i < data.length; i++) {
+                const val = formulaObjects[j].fnc(data[i], grid, formulaObjects[j].column);
+                data[i][formulaObjects[j].column] = val;
+            }
+        }
+        refreshData();
+    }
+    function columnHasFilter(columnId) {
+        for (let i = 0, l = (filters ? filters.length : 0); i < l; i++) {
+            if (filters[i].columnId === columnId) {
+                return true;
+            }
+        }
+        return false;
+    }
+    function refreshDataItem(item) {
+        const options = grid.getOptions();
+        dataView.updateItem(item[options.primaryKey], item);
+        // formula refresh
+        for (const f in formulas) {
+            if (formulas.hasOwnProperty(f)) {
+                triggerFormula(f, item);
+            }
+        }
+        grid.updateRow(dataView.getRowByItem(item));
+    }
+    function addFilter(filter, dontrefresh) {
+        let filterArray;
+        if (Array.isArray(filter)) {
+            filterArray = filter;
+        }
+        else {
+            filterArray = [filter];
+        }
+        for (let idx = 0; idx < filterArray.length; idx++) {
+            // add filter
+            filters.push(filterArray[idx]);
+        }
+        if (!dontrefresh) {
+            refreshFilters();
+        }
+    }
+    function setFilters(f, dontrefresh) {
+        filters = f;
+        if (!dontrefresh) {
+            refreshFilters();
+        }
+    }
+    function getFilters() {
+        return filters;
+    }
+    function clearFilter(columnId, dontrefresh) {
+        if (columnId === undefined) { // clear all filters
+            filters.length = 0;
+        }
+        else {
+            for (let i = 0; i < filters.length; i++) {
+                if (filters[i].columnId === columnId) {
+                    filters.splice(i, 1);
+                    i--;
+                }
+            }
+        }
+        if (!dontrefresh) {
+            refreshFilters();
+        }
+    }
+    function refreshFilters(noColumnHeaderRefresh) {
+        const options = grid.getOptions();
+        function client_filter(item, args) {
+            const filterArray = args;
+            // no filter present -> show all rows
+            if (filterArray.length === 0) {
+                return true;
+            }
+            if (filterArray.length === 1) {
+                return filterArray[0].match.call(null, item, filterArray[0].field);
+            }
+            else {
+                let result = true;
+                let i = 0;
+                while (i < filterArray.length) {
+                    let orResult = false;
+                    while (i < filterArray.length) { // combine or(s)
+                        if (orResult || filterArray[i].match.call(null, item, filterArray[i].field)) {
+                            orResult = true;
+                        }
+                        if (filterArray[i].combine !== "or") {
+                            break;
+                        }
+                        else {
+                            i++;
+                        }
+                    }
+                    if (!orResult) {
+                        result = false;
+                        break;
+                    }
+                    i++;
+                }
+                return result;
+            }
+        }
+        if (options.mode === "client") {
+            dataView.setFilterArgs(filters);
+            dataView.setFilter(client_filter);
+        }
+        // redraw columns
+        if (!noColumnHeaderRefresh) {
+            grid.setColumns(grid.getColumns());
+        }
+        grid.onFiltersChanged.notify();
+    }
+    function getSelectedItems() {
+        const selRows = grid.getSelectedRows();
+        const rows = [];
+        for (let i = 0; i < selRows.length; i++) {
+            const rowIdx = selRows[i];
+            const toPush = dataView.getItem(rowIdx);
+            if (toPush !== undefined && !toPush.__group && !toPush.__groupTotals) {
+                rows.push(toPush);
+            }
+        }
+        return rows;
+    }
+    function getRowMoveManager() {
+        return rowMoveManager;
+    }
+    function getHeaderMenu() {
+        return headerMenu;
+    }
+    // function setHierachy(o: IGridTreeOptions): GridTree {
+    //     return new GridTree(this, o);
+    // }
+    createMe();
+    return $.shallowExtend(grid, {
+        dataView,
+        setHeight,
+        getHeight,
+        sort,
+        refreshData,
+        setData,
+        getData,
+        refresh,
+        addFormula,
+        getFormattedValue,
+        getContentWidth,
+        fitToContent,
+        triggerAllFormulas,
+        columnHasFilter,
+        refreshDataItem,
+        addFilter,
+        setFilters,
+        getFilters,
+        clearFilter,
+        refreshFilters,
+        getSelectedItems,
+        getRowMoveManager,
+        getHeaderMenu,
+        refreshColumnGroups: CreateColumnGroups
+        // setHierachy
+    });
+}