x4js 1.4.52 → 1.4.53

package/lib/esm/gridview.js

@@ -0,0 +1,889 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file gridview.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
+const T_UPDATE = Symbol('update');
+/**
+ * todo: sizable column
+ * todo: button in a column
+ */
+import { x4document } from './x4dom';
+import { HLayout, VLayout } from './layout';
+import { Component, EvDblClick, flyWrap, html, SizerOverlay, Flex } from './component';
+import { Label } from './label';
+import { _tr } from './i18n';
+import { downloadData, isFunction } from './tools';
+import { DataStore } from './datastore';
+import { EvContextMenu, EvSelectionChange, BasicEvent } from "./x4events";
+import { Icon } from './icon.js';
+export function EvGridCheck(rec, chk) {
+    return BasicEvent({ rec, chk });
+}
+class ColHeader extends Component {
+    m_sens;
+    m_sorted;
+    constructor(props, title) {
+        super(props);
+        this.m_sorted = false;
+        this.m_sens = 'dn';
+        this.setContent([
+            new Component({
+                tag: 'span',
+                content: title
+            }),
+            new Icon({
+                ref: 'sorter',
+                cls: '@hidden sort',
+                icon: 'var( --x4-icon-arrow-down )'
+            })
+        ]);
+    }
+    get sorted() {
+        return this.m_sorted;
+    }
+    //set sorted( v ) {
+    //	this.m_sorted = v;
+    //	this.m_sens = 'dn';
+    //	this.itemWithRef<Icon>( 'sorter' ).show( v );
+    //}
+    sort(v, sens) {
+        this.m_sorted = v;
+        this.m_sens = sens;
+        const ic = this.itemWithRef('sorter');
+        ic.icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+        ic.show(v);
+    }
+    get sens() {
+        return this.m_sens;
+    }
+    toggleSens() {
+        this.m_sens = this.m_sens == 'up' ? 'dn' : 'up';
+        this.itemWithRef('sorter').icon = this.m_sens == 'up' ? 'var( --x4-icon-arrow-down )' : 'var( --x4-icon-arrow-up )';
+    }
+}
+/**
+ * gridview class
+ */
+export class GridView extends VLayout {
+    m_dataview;
+    m_data_cx;
+    m_columns;
+    m_view_el;
+    m_container;
+    m_header;
+    m_footer;
+    m_empty_msg;
+    m_empty_text;
+    m_selection;
+    m_itemHeight;
+    m_topIndex;
+    m_visible_rows; // shown elements
+    m_hasMarks;
+    m_marks; // checked elements
+    m_recycler;
+    m_rowClassifier;
+    constructor(props) {
+        super(props);
+        this.m_columns = props.columns;
+        this.m_hasMarks = props.hasMarks ?? false;
+        this.m_marks = new Set();
+        // prepend the checkable column
+        if (this.m_hasMarks) {
+            this.m_columns.unshift({
+                id: 'id',
+                title: '',
+                width: 30,
+                renderer: (e) => this._renderCheck(e)
+            });
+        }
+        this.setAttribute('tabindex', 0);
+        this.m_topIndex = 0;
+        this.m_itemHeight = 0;
+        this.m_recycler = [];
+        this.m_rowClassifier = props.calcRowClass;
+        this.m_empty_text = props.empty_text ?? _tr.global.empty_list;
+        //this.setDomEvent('create', this._handleCreate, this);
+        this.setDomEvent('click', (e) => this._itemClick(e));
+        this.setDomEvent('dblclick', (e) => this._itemDblClick(e));
+        this.setDomEvent('contextmenu', (e) => this._itemMenu(e));
+        this.setDomEvent('keydown', (e) => this._handleKey(e));
+        this.setStore(props.store);
+    }
+    componentCreated() {
+        this._updateScroll(true);
+    }
+    /**
+     *
+     */
+    _moveSel(sens, select = true) {
+        let sel = this.m_selection;
+        let scrolltype = null;
+        if (sel === undefined) {
+            sel = this.m_dataview.getByIndex(0).getID();
+        }
+        else {
+            let index = this.m_dataview.indexOfId(this.m_selection);
+            if (sens == 1) {
+                index++;
+            }
+            else if (sens == -1) {
+                index--;
+            }
+            else if (sens == 2) {
+                index += this.m_visible_rows.length - 1;
+            }
+            else if (sens == -2) {
+                index -= this.m_visible_rows.length - 1;
+            }
+            if (sens < 0) {
+                scrolltype = 'start';
+            }
+            else {
+                scrolltype = 'end';
+            }
+            if (index < 0) {
+                index = 0;
+            }
+            else if (index >= this.m_dataview.count) {
+                index = this.m_dataview.count - 1;
+            }
+            sel = this.m_dataview.getByIndex(index).getID();
+        }
+        if (this.m_selection != sel && select) {
+            this._selectItem(sel, null, scrolltype);
+        }
+        return sel;
+    }
+    /**
+     *
+     */
+    _handleKey(event) {
+        if (!this.m_dataview || this.m_dataview.count == 0) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'Down': {
+                this._moveSel(1);
+                break;
+            }
+            case 'ArrowUp':
+            case 'Up': {
+                this._moveSel(-1);
+                break;
+            }
+            case 'PageUp': {
+                this._moveSel(-2);
+                break;
+            }
+            case 'PageDown': {
+                this._moveSel(2);
+                break;
+            }
+        }
+    }
+    /**
+     *
+     */
+    getNextSel(sens) {
+        return this._moveSel(sens, false);
+    }
+    _scrollIntoView(id, sens) {
+        let itm = this._findItem(id);
+        if (itm) {
+            itm.scrollIntoView({
+                block: 'center' //<ScrollLogicalPosition>sens ?? 'nearest'
+            });
+        }
+        else {
+            this.m_topIndex = this.m_dataview.indexOfId(id);
+            this.m_view_el.dom.scrollTop = this.m_topIndex * this.m_itemHeight;
+            this._buildItems();
+            this._scrollIntoView(id);
+        }
+    }
+    /**
+     * change the list of item displayed
+     * @param items - new array of items
+     */
+    setStore(store) {
+        this.m_selection = undefined;
+        if (store instanceof DataStore) {
+            this.m_dataview = store.createView();
+        }
+        else {
+            this.m_dataview = store;
+        }
+        if (this.m_hasMarks) {
+            this.clearMarks();
+        }
+        // unlink previous observer
+        if (this.m_data_cx) {
+            this.m_data_cx.dispose();
+        }
+        if (this.m_dataview) {
+            this.m_data_cx = this.m_dataview.on('view_change', (ev) => {
+                if (ev.action == 'change') {
+                    this.m_selection = undefined;
+                }
+                this._updateScroll(true);
+            });
+            //this.update( );
+            this._updateScroll(true);
+        }
+    }
+    getView() {
+        return this.m_dataview;
+    }
+    /**
+     * return the current selection (row id) or null
+     */
+    getSelection() {
+        return this.m_selection;
+    }
+    getSelRec() {
+        if (this.m_selection) {
+            return this.m_dataview.getById(this.m_selection);
+        }
+        return null;
+    }
+    setSelection(recId) {
+        this._selectItem(recId, null, 'center');
+    }
+    /** @ignore */
+    render() {
+        this.m_recycler = [];
+        this.m_container = new Component({
+            cls: 'content',
+        });
+        this.m_empty_msg = new Label({
+            cls: 'empty-msg',
+            text: ''
+        });
+        this.m_view_el = new Component({
+            cls: '@scroll-view',
+            flex: 1,
+            dom_events: {
+                sizechange: () => this._updateScroll(true),
+                scroll: () => this._updateScroll(false)
+            },
+            content: this.m_container
+        });
+        let flex = false;
+        let cols = this.m_columns.map((col, index) => {
+            let cls = '@cell';
+            if (col.cls) {
+                cls += ' ' + col.cls;
+            }
+            let comp = new ColHeader({
+                cls,
+                flex: col.flex,
+                sizable: 'right',
+                style: {
+                    width: col.width
+                },
+                dom_events: {
+                    click: (ev) => {
+                        let t = flyWrap(ev.target);
+                        if (!t.hasClass('@sizer-overlay')) { // avoid sizer click
+                            this._sortCol(col);
+                            ev.preventDefault();
+                        }
+                    }
+                }
+            }, col.title);
+            const resizeCol = (ev) => {
+                this._on_col_resize(index, ev.size.width);
+                if (this.m_footer) {
+                    let col = Component.getElement(this.m_footer.dom.childNodes[index]);
+                    if (col) {
+                        col.setStyleValue('width', ev.size.width);
+                    }
+                }
+            };
+            new SizerOverlay({
+                target: comp,
+                sens: 'right',
+                events: { resize: (e) => resizeCol(e) }
+            });
+            if (col.flex) {
+                flex = true;
+            }
+            col.$hdr = comp;
+            return comp;
+        });
+        cols.push(new Flex({
+            ref: 'flex',
+            cls: flex ? '@hidden' : ''
+        }));
+        // compute full width
+        let full_width = 0;
+        this.m_columns.forEach((col) => {
+            full_width += col.width ?? 0;
+        });
+        this.m_header = new HLayout({
+            cls: '@header',
+            content: cols,
+            style: {
+                minWidth: full_width
+            }
+        });
+        if (this.m_props.hasFooter) {
+            let foots = this.m_columns.map((col, index) => {
+                let cls = '@cell';
+                if (col.align) {
+                    cls += ' ' + col.align;
+                }
+                if (col.cls) {
+                    cls += ' ' + col.cls;
+                }
+                let comp = new Component({
+                    cls,
+                    data: { col: index },
+                    flex: col.flex,
+                    style: {
+                        width: col.width
+                    }
+                });
+                col.$ftr = comp;
+                return comp;
+            });
+            foots.push(new Flex({
+                ref: 'flex',
+                cls: flex ? '@hidden' : ''
+            }));
+            this.m_footer = new HLayout({
+                cls: '@footer',
+                content: foots,
+                style: {
+                    minWidth: full_width
+                }
+            });
+        }
+        else {
+            this.m_footer = null;
+        }
+        this.setContent([
+            this.m_header,
+            this.m_view_el,
+            this.m_footer,
+            this.m_empty_msg,
+        ]);
+    }
+    _on_col_resize(col, width) {
+        const _col = this.m_columns[col];
+        let updateFlex = false;
+        if (width >= 0) {
+            _col.width = width;
+            if (_col.flex) {
+                _col.$hdr.removeClass('@flex');
+                _col.$ftr?.removeClass('@flex');
+                _col.flex = undefined;
+                updateFlex = true;
+            }
+        }
+        else if (width < 0 && !_col.flex) {
+            _col.$hdr.addClass('@flex');
+            _col.$ftr?.addClass('@flex');
+            _col.flex = 1;
+            updateFlex = true;
+        }
+        if (updateFlex) {
+            let flex = false;
+            this.m_columns.forEach(c => {
+                if (c.flex) {
+                    flex = true;
+                }
+            });
+            this.m_header.itemWithRef('flex')?.show(flex ? false : true);
+            if (this.m_footer) {
+                this.m_footer.itemWithRef('flex')?.show(flex ? false : true);
+            }
+        }
+        this._updateScroll(true);
+    }
+    /**
+     *
+     */
+    sortCol(name, asc = true) {
+        const col = this.m_columns.find(c => c.id == name);
+        if (col === undefined) {
+            console.assert(false, "unknown field " + name + " in grid.sortCol");
+            return;
+        }
+        this._sortCol(col, asc ? "dn" : "up");
+    }
+    /**
+     *
+     */
+    _sortCol(col, sens = "up") {
+        if (col.sortable === false) {
+            return;
+        }
+        this.m_columns.forEach((c) => {
+            if (c !== col) {
+                c.$hdr.sort(false, "dn");
+            }
+        });
+        const $hdr = col.$hdr;
+        if ($hdr.sorted) {
+            $hdr.toggleSens();
+        }
+        else {
+            $hdr.sort(true, sens);
+        }
+        if (this.m_dataview) {
+            this.m_dataview.sort([
+                { field: col.id, ascending: $hdr.sens == 'dn' ? false : true }
+            ]);
+        }
+    }
+    /**
+     *
+     */
+    _computeItemHeight() {
+        let gr = x4document.createElement('div');
+        gr.classList.add('x-row');
+        let gv = x4document.createElement('div');
+        gv.classList.add('x-grid-view');
+        gv.style.position = 'absolute';
+        gv.style.top = '-1000px';
+        gv.appendChild(gr);
+        this.dom.appendChild(gv);
+        let rc = gr.getBoundingClientRect();
+        this.dom.removeChild(gv);
+        this.m_itemHeight = rc.height;
+    }
+    _createRow(props) {
+        let row;
+        if (this.m_recycler.length) {
+            row = this.m_recycler.pop();
+            row.clearClasses();
+            row.addClass(props.cls);
+            row.setContent(props.content);
+            row.setStyle(props.style);
+            for (let n in props.data) {
+                row.setData(n, props.data[n]);
+            }
+        }
+        else {
+            row = new HLayout(props);
+        }
+        if (!row.dom) {
+            this.m_container.appendChild(row);
+        }
+        return row;
+    }
+    _buildItems(canOpt = true) {
+        let rc = this.getBoundingRect();
+        let rh = this.m_header.getBoundingRect();
+        let height = rc.height - rh.height + this.m_itemHeight;
+        if (this.m_itemHeight == 0) {
+            this._computeItemHeight();
+        }
+        let top = this.m_topIndex * this.m_itemHeight;
+        let y = 0;
+        let cidx = 0;
+        let index = this.m_topIndex;
+        let count = this.m_dataview ? this.m_dataview.count : 0;
+        let full_width = 0; // todo: +4 pixel of left border
+        let even = this.m_topIndex & 1 ? true : false;
+        // compute full width
+        this.m_columns.forEach((col) => {
+            full_width += col.width ?? 0;
+        });
+        // if items height make scroll visible, update header width
+        if (((count + 1) * this.m_itemHeight) >= height) {
+            let w = Component.getScrollbarSize();
+            this.m_header.setStyleValue("paddingRight", w);
+            this.m_footer?.setStyleValue("paddingRight", w);
+        }
+        else {
+            this.m_header.setStyleValue("paddingRight", 0);
+            this.m_footer?.setStyleValue("paddingRight", 0);
+        }
+        // passe 0 - all created cells are moved to the recycler
+        if (this.m_visible_rows) {
+            this.m_visible_rows.forEach((c) => {
+                this.m_recycler.push(c);
+            });
+        }
+        this.m_visible_rows = [];
+        let limit = 100;
+        while (y < height && index < count && --limit > 0) {
+            let rec = this.m_dataview.getByIndex(index);
+            let rowid = rec.getID();
+            let crow = canOpt ? this.m_recycler.findIndex((r) => r.getData('row-id') == rowid) : -1;
+            if (crow >= 0) {
+                let rrow = this.m_recycler.splice(crow, 1)[0];
+                rrow.setStyle({
+                    top: y + top,
+                    minWidth: full_width,
+                });
+                if (this.m_hasMarks) {
+                    rrow.setClass('@marked', this.m_marks.has(rowid));
+                }
+                rrow.removeClass('@hidden');
+                rrow.setClass('@selected', this.m_selection === rowid);
+                this.m_visible_rows[cidx] = rrow;
+            }
+            else {
+                let cols = this.m_columns.map(col => {
+                    let cls = '@cell';
+                    if (col.align) {
+                        cls += ' ' + col.align;
+                    }
+                    if (col.cls) {
+                        cls += ' ' + col.cls;
+                    }
+                    let cell;
+                    if (col.renderer) {
+                        cell = col.renderer(rec);
+                        if (cell) {
+                            cell.addClass(cls);
+                            cell.setStyleValue('width', col.width);
+                            if (col.flex !== undefined) {
+                                cell.addClass('@flex');
+                                cell.setStyleValue('flex', col.flex);
+                            }
+                        }
+                    }
+                    else {
+                        let fmt = col.formatter;
+                        let text;
+                        if (fmt && fmt instanceof Function) {
+                            text = fmt(rec.getRaw(col.id), rec);
+                        }
+                        else {
+                            text = rec.getField(col.id);
+                        }
+                        cell = new Component({
+                            cls,
+                            width: col.width,
+                            content: html `<span>${text}</span>`,
+                            flex: col.flex
+                        });
+                    }
+                    return cell;
+                });
+                let cls = '@row @hlayout center';
+                if (this.m_hasMarks) {
+                    if (this.m_marks.has(rowid)) {
+                        cls += ' @marked';
+                    }
+                }
+                if (this.m_selection === rowid) {
+                    cls += ' @selected';
+                }
+                let row = this.m_visible_rows[cidx] = this._createRow({
+                    cls,
+                    content: cols,
+                    style: {
+                        top: y + top,
+                        minWidth: full_width,
+                    },
+                    data: {
+                        'row-id': rowid,
+                        'row-idx': index
+                    }
+                });
+                row.addClass(even ? 'even' : 'odd');
+                even = !even;
+                if (this.m_rowClassifier) {
+                    this.m_rowClassifier(rec, row);
+                }
+            }
+            y += this.m_itemHeight;
+            index++;
+            cidx++;
+        }
+        // if some cells are still in cache, hide them
+        this.m_recycler.forEach((c) => {
+            c.addClass('@hidden');
+        });
+        //this.m_container.setContent(<ComponentContent>this.m_visible_rows);
+        let show = !count;
+        let msg = (this.m_empty_text instanceof Function) ? this.m_empty_text() : this.m_empty_text;
+        this.m_empty_msg.text = msg;
+        if (show && msg.length == 0) {
+            show = false;
+        }
+        this.m_empty_msg.show(show);
+        if (full_width < rc.width) {
+            this.m_header.setStyleValue('width', null);
+            this.m_footer?.setStyleValue('width', null);
+            this.m_container.setStyle({
+                height: count * this.m_itemHeight,
+                width: null
+            });
+        }
+        else {
+            this.m_header.setStyleValue('width', full_width + 1000);
+            this.m_footer?.setStyleValue('width', full_width + 1000);
+            this.m_container.setStyle({
+                height: count * this.m_itemHeight,
+                width: full_width
+            });
+        }
+    }
+    /**
+     *
+     */
+    _updateScroll(forceUpdate) {
+        if (!this.m_view_el || !this.m_view_el.dom) {
+            return;
+        }
+        const update = () => {
+            // element destroyed between updateScroll and now
+            if (!this.dom) {
+                return;
+            }
+            let newTop = Math.floor(this.m_view_el.dom.scrollTop / (this.m_itemHeight || 1));
+            if (newTop != this.m_topIndex || forceUpdate) {
+                this.m_topIndex = newTop;
+                this._buildItems(!forceUpdate);
+            }
+            let newLeft = this.m_view_el.dom.scrollLeft;
+            this.m_header.setStyleValue('left', -newLeft);
+            this.m_footer?.setStyleValue('left', -newLeft);
+        };
+        if (forceUpdate) {
+            this.singleShot(update, 10);
+        }
+        else {
+            update();
+        }
+    }
+    /** @ignore */
+    _rowFromTarget(dom) {
+        let self = this.dom;
+        while (dom && dom != self) {
+            let itm = Component.getElement(dom);
+            if (itm) {
+                let id = itm.getData('row-id');
+                if (id !== undefined) {
+                    return { id, itm };
+                }
+            }
+            dom = dom.parentElement;
+        }
+        return undefined;
+    }
+    _itemClick(e) {
+        let hit = this._rowFromTarget(e.target);
+        if (hit) {
+            this._selectItem(hit.id, hit.itm);
+        }
+        else {
+            this._selectItem(undefined, undefined);
+        }
+    }
+    _itemDblClick(e) {
+        let hit = this._rowFromTarget(e.target);
+        if (hit) {
+            this._selectItem(hit.id, hit.itm);
+            let rec = this.m_dataview.getById(hit.id);
+            this.emit('dblClick', EvDblClick(rec));
+            if (this.m_hasMarks) {
+                this._toggleMark(rec);
+            }
+        }
+    }
+    /** @ignore */
+    _itemMenu(e) {
+        let dom = e.target, self = this.dom;
+        while (dom && dom != self) {
+            let itm = Component.getElement(dom), id = itm?.getData('row-id');
+            if (id !== undefined) {
+                this._selectItem(id, itm);
+                let idx = itm.getData('row-idx');
+                let rec = this.m_dataview.getByIndex(idx);
+                this._showItemContextMenu(e, rec);
+                e.preventDefault();
+                return;
+            }
+            dom = dom.parentElement;
+        }
+    }
+    /**
+     *
+     */
+    _findItem(id) {
+        for (let i = 0; i < this.m_visible_rows.length; i++) {
+            let itm = this.m_visible_rows[i];
+            if (itm.getData('row-id') === id) {
+                return itm;
+            }
+        }
+        return null;
+    }
+    /**
+     * @ignore
+     * called when an item is selected by mouse
+     */
+    _selectItem(item, dom_item, scrollIntoView) {
+        if (this.m_selection !== undefined) {
+            let old = this._findItem(this.m_selection);
+            if (old) {
+                old.removeClass('@selected');
+            }
+        }
+        this.m_selection = item;
+        if (item) {
+            if (scrollIntoView) {
+                this._scrollIntoView(item, scrollIntoView);
+            }
+            if (!dom_item) {
+                dom_item = this._findItem(item);
+            }
+            if (dom_item) {
+                dom_item.addClass('@selected');
+            }
+            let rec = this.m_dataview.getById(item);
+            this.emit('selectionChange', EvSelectionChange(rec));
+        }
+        else {
+            this.emit('selectionChange', EvSelectionChange(null));
+        }
+    }
+    /**
+     *
+     */
+    _showItemContextMenu(event, item) {
+        this.emit('contextMenu', EvContextMenu(event, item));
+    }
+    /**
+     *
+     */
+    clearSelection() {
+        this._selectItem(null, null);
+    }
+    /**
+     * todo: moveto datastore
+     */
+    exportData(filename) {
+        let data = '';
+        const fsep = '\t';
+        const lsep = '\r\n';
+        let rec = '';
+        this.m_columns.map((col) => {
+            if (rec.length) {
+                rec += fsep;
+            }
+            rec += col.title;
+        });
+        data += rec + lsep;
+        let count = this.m_dataview.count;
+        for (let i = 0; i < count; i++) {
+            let record = this.m_dataview.getByIndex(i);
+            rec = '';
+            let cols = this.m_columns.map((col) => {
+                let text = record.getField(col.id);
+                let fmt = col.formatter;
+                if (fmt && fmt instanceof Function) {
+                    text = fmt(text, record);
+                }
+                if (rec.length > 0) {
+                    rec += fsep;
+                }
+                rec += text;
+            });
+            data += rec + lsep;
+        }
+        //todo: review that
+        data = data.replace(/[àâä]/gm, 'a');
+        data = data.replace(/[éèê]/gm, 'e');
+        data = data.replace(/[îï]/gm, 'i');
+        data = data.replace(/[ûüù]/gm, 'u');
+        data = data.replace(/ /gm, ' '); // non breaking space
+        downloadData(data, 'text/csv', filename);
+    }
+    set empty_text(text) {
+        this.m_empty_msg.text = text;
+    }
+    _renderCheck(rec) {
+        let icon = '--x4-icon-square';
+        if (this.m_marks.has(rec.getID())) {
+            icon = '--x4-icon-square-check';
+        }
+        return new Icon({ icon: `var(${icon})` });
+    }
+    _toggleMark(rec) {
+        let id = rec.getID();
+        let chk = false;
+        if (this.m_marks.has(id)) {
+            this.m_marks.delete(id);
+        }
+        else {
+            this.m_marks.add(id);
+            chk = true;
+        }
+        this.emit('gridCheck', EvGridCheck(rec, chk));
+        this._buildItems(false);
+    }
+    getMarks() {
+        let ids = [];
+        for (const v of this.m_marks.values()) {
+            ids.push(v);
+        }
+        return ids;
+    }
+    clearMarks() {
+        if (this.m_marks.size) {
+            this.m_marks = new Set();
+            this._buildItems(false);
+        }
+    }
+    setFooterData(rec) {
+        if (!this.m_footer) {
+            return;
+        }
+        this.m_footer.enumChilds((c) => {
+            let cid = c.getData('col');
+            if (cid) {
+                let col = this.m_columns[cid];
+                let value = rec[col.id];
+                if (value !== undefined) {
+                    if (isFunction(value)) { // FooterRenderer
+                        value(c);
+                    }
+                    else {
+                        let text;
+                        const fmt = col.formatter;
+                        if (fmt && fmt instanceof Function) {
+                            text = fmt(value, rec);
+                        }
+                        else {
+                            text = value;
+                        }
+                        c.setContent(text, false);
+                    }
+                }
+            }
+        });
+    }
+}