react-graph-grid 0.1.9 → 0.1.12

package/src/Tests/DebugApp.jsx

@@ -0,0 +1,332 @@
+import { useState } from 'react';
+import { TestData } from '../Tests/TestData';
+import { Overlay } from '../Overlay';
+import { Modal } from '../Modal';
+import { Dropdown } from '../Dropdown';
+import { Grid } from '../Grid';
+import { GridGR } from '../GridGR';
+import { GridDB } from '../GridDB';
+import { GridFL } from '../GridFL';
+import { GridFE } from '../GridFE';
+import { GridCD } from '../GridCD';
+import { FieldEdit } from '../FieldEdit';
+
+export function DebugApp() {
+    const [state, setState] = useState({ menuItem: - 2 });
+
+    window._logEnabled = true;
+
+    const GetFamily = function (e) {
+        return new Promise(function (resolve, reject) {
+
+            const rows = new TestData().getFamily(e);
+
+            if (rows != null) {
+                resolve(rows);
+            } else {
+                reject(Error("Error getting rows"));
+            }
+        });
+    };
+
+    const GetButtons = function () {
+        return [
+            {
+                id: 1,
+                name: 'info',
+                title: 'Persone Info',
+                label: 'Persone Info',
+                click: function (e) {
+                    const selRow = e.grid.selectedRowIndex >= 0 && e.grid.rows.length > 0 ? e.grid.rows[e.grid.selectedRowIndex] : null;
+                    if (!selRow) return;
+
+                    alert(`Persone Name = ${selRow.Name}, Persone Birth Day = ${selRow.Date}`);
+                },
+                getDisabled: function (e) {
+                    return !e.grid.rows || e.grid.rows.length <= 0;
+                }
+            },
+            {
+                id: 2,
+                name: 'clear',
+                title: 'Clear console',
+                label: 'Clear console',
+                click: function () {
+                    console.clear();
+                },
+            }
+        ]
+    }
+
+    const GetCities = function (e) {
+        return new Promise(function (resolve, reject) {
+
+            const rows = new TestData().getCity(e);
+
+            if (rows != null) {
+                resolve(rows);
+            } else {
+                reject(Error("Error getting rows"));
+            }
+        });
+    };
+
+    const GetCityColumns = function () {
+        return new TestData().GetCityColumns();
+    }
+
+    const GetFamilyColumns = function () {
+        return new TestData().GetFamilyColumns();
+    }
+
+    const ResetColumnsOrder = function () {
+        const grid = window.gridComponent;
+        if (!grid) return;
+
+        grid.resetColumnsOrderToDefault();
+    }
+
+    const ResetColumnsWidths = function () {
+        const grid = window.gridComponent;
+        if (!grid) return;
+
+        grid.resetColumnsWidthsToDefault();
+    }
+
+    const GetPopupItems = function () {
+        return new Promise(function (resolve) {
+
+            const items = [
+                { id: 1, text: 'test 1 item' },
+                { id: 2, text: 'test 2 item' },
+                { id: 3, text: 'test 3 item' },
+                { id: 4, text: 'test 4 item' },
+                { id: 5, text: 'test 5 item' }
+            ];
+            resolve(items);
+        });
+    };
+
+    const drawGridInModal = function () {
+        return (
+            <>
+                <div className="div-on-menu">
+                    <button onClick={() => { console.clear() }} className="modal-window-footer-button">Clear console</button>
+                </div>
+                <Grid getRows={GetFamily}
+                    init={(grid) => { window.gridComponent = grid }}
+                ></Grid>
+            </>
+        )
+    }
+
+    const drawDropdownInModal = function (wnd) {
+        return (
+            <>
+                <div className="div-on-menu">
+                    <button onClick={() => { console.clear() }} className="modal-window-footer-button">Clear console</button>
+                    <button onClick={(e) => { wnd.ddComponent.popup(e); }} className="modal-window-footer-button">Show Dropdown</button>
+                </div>
+                <div>
+                    {
+                        wnd.ddComponent && wnd.ddComponent.clickedItem ? <span>{'Item Clicked : ' + wnd.ddComponent.clickedItem}</span> : <></>
+                    }
+                </div>
+                <Dropdown init={(dd) => { wnd.ddComponent = dd; }} getItems={GetPopupItems}
+                    onItemClick={(e) => { /*console.log('Item clicked: ' + e.itemId); */e.self.clickedItem = e.itemId; wnd.refreshState(); }}
+                >
+                </Dropdown>
+            </>
+        )
+    }
+
+    const drawClearConsole = function () {
+        return (
+            <button onClick={() => { console.clear() }} className="modal-window-footer-button">Clear console</button>
+        );
+    }
+
+    const drawTest = function () {
+        return (<></>);
+    }
+
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    const getTestApp = () => {
+        console.log('state == ' + state.menuItem);
+        switch (state.menuItem) {
+            case 0:
+                return <></>
+            case 1:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            1. Drag column to reorder
+                            2. Doubleclick on divider to autowidth
+                        </div>
+                        <div className="div-on-menu">
+                            <button onClick={() => ResetColumnsOrder()} className="modal-window-footer-button">Reset columns order</button>
+                            <button onClick={() => ResetColumnsWidths()} className="modal-window-footer-button">Reset columns widths</button>
+                            {drawClearConsole()}
+                        </div>
+                        <Grid getRows={GetFamily} init={(grid) => { window.gridComponent = grid; }}></Grid>
+                    </>
+                )
+            case 2:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            {drawClearConsole()}
+                        </div>
+
+                        <Overlay init={(ovl) => { window.overlayComponent = ovl }} closeWhenEscape={true} closeWhenClick={true}></Overlay>
+                    </>
+                )
+            case 3:
+                return (
+                    <>
+                        <Modal uid="m01" isModal={true} renderContent={() => { return drawGridInModal() }} closeWhenEscape={true}
+                            pos={{ x: 100, y: 100, w: 600, h: 450 }} title='Modal Grid'></Modal>
+                    </>
+                )
+            case 4:
+                return (
+                    <>
+                        <Modal uid="m02" isModal={true} title="Dropdown" renderContent={(wnd) => { return drawDropdownInModal(wnd) }} closeWhenEscape={true}
+                            dimensionsByContent={true}
+                            pos={{ x: 100, y: 100, w: 300, h: 250 }}></Modal>
+                    </>
+                )
+            case 5:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            Change the active record in the parent grid to see the child rows.
+                        </div>
+                        <div className="div-on-menu">
+                            {drawClearConsole()}
+                        </div>
+                        <div className="div-with-grid">
+                            <GridGR uid="people" getRows={GetFamily}></GridGR>
+                        </div>
+                        <div className="div-with-grid">
+                            <GridGR uid="cities" parentGrids="people" getRows={GetCities} getColumns={GetCityColumns}></GridGR>
+                        </div>
+                    </>
+                );
+            case 6:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            Grid with pager, pocket and sortable columns. Hold shift to sort by multiple columns.
+                        </div>
+                        <div className="div-with-grid">
+                            <GridDB getRows={GetFamily} buttons={GetButtons()} getColumns={GetFamilyColumns} multi={true}></GridDB>
+                        </div>
+                    </>
+                );
+            case 7:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            Grid with column filters.
+                        </div>
+                        <div className="div-with-grid">
+                            <GridFL getRows={GetFamily} buttons={GetButtons()} getColumns={GetFamilyColumns}></GridFL>
+                        </div>
+                    </>
+                );
+            case 8:
+                return (
+                    <>
+                        <Modal uid="m01" isModal={true} closeWhenEscape={true}
+                            renderContent={() => {
+                                return (
+                                    <div className="div-with-grid">
+                                        <span>Persona</span>
+                                        <FieldEdit
+                                            column={{
+                                                id: 1,
+                                                name: 'Persona',
+                                                getRows: GetFamily,
+                                                refKeyField: 'Id',
+                                                refNameField: 'Name',
+                                                type: 'lookup',
+                                            }}
+                                        >
+                                        </FieldEdit>
+                                        <br></br>
+                                        <span>Age</span>
+                                        <FieldEdit
+                                            column={{
+                                                id: 2,
+                                                name: 'Age',
+                                            }}
+                                        >
+                                        </FieldEdit>
+                                    </div>
+                                );
+                            }}
+                            pos={{ x: 100, y: 100, w: 400, h: 200 }} title='Field Edit'>
+                        </Modal>
+                    </>
+                )
+            case 9:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            Editable grid.
+                        </div>
+                        <div className="div-with-grid">
+                            <GridFE getRows={GetFamily} getColumns={GetFamilyColumns} allowEdit={true}></GridFE>
+                        </div>
+                    </>
+                );
+            case 10:
+                return (
+                    <>
+                        <div className="div-on-menu">
+                            Editable grid with card-based record view.
+                        </div>
+                        <div className="div-with-grid">
+                            <GridCD getRows={GetFamily} getColumns={GetFamilyColumns} allowEdit={true}></GridCD>
+                        </div>
+                    </>
+                );
+            case 11:
+                return (
+                    <>
+                        {drawTest()}
+                    </>
+                );
+            default:
+                return null;
+        }
+    };
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+    return (
+        <div >
+            <select onChange={(e) => {
+                //console.log('this == ' + e);
+                setState({ menuItem: e.target.selectedIndex });
+            }}>
+                <option>0. None</option>
+                <option>1. React Grid</option>
+                <option>2. Overlay</option>
+                <option>3. Modal</option>
+                <option>4. Dropdown</option>
+                <option>5. Two Grids</option>
+                <option>6. GridDB</option>
+                <option>7. GridFL</option>
+                <option>8. Field Edit</option>
+                <option>9. GridFE</option>
+                <option>10. GridCD</option>
+                <option>11. TEST</option>
+            </select>
+            <div className="div-on-menu">
+                {getTestApp()}
+            </div>
+        </div>
+    );
+}
+
+export default DebugApp;

package/src/Tests/TestData.jsx

@@ -0,0 +1,243 @@
+export class TestData {
+    getFamily(e) {
+        e = e || { grid: {} };
+
+        const family = [
+            { Id: 1, ParentId: [3, 4], Name: 'Mikle', SecondName: 'Razumtsev', Date: '26/01/1979', Comment: 'Good boy', Hometown: 'Voronezh', HometownId: 1 },
+            { Id: 2, ParentId: [0], Name: 'Nataly', SecondName: 'Sche..', Date: '14/01/1999', Comment: 'Good girl', Hometown: 'Hanty-Mansiysk', HometownId: 12 },
+            { Id: 3, ParentId: [11, 23], Name: 'Lyuda', SecondName: 'Razumtseva', Date: '03/07/1953', Comment: 'Mommy', Hometown: 'Novosibirsk', HometownId: 8 }, 
+            { Id: 4, ParentId: [5, 22], Name: 'Borya', SecondName: 'Razumtsev', Date: '14/06/1953', Comment: 'Papa', Hometown: 'Grafskaya', HometownId: 2 }, 
+            { Id: 5, ParentId: [0], Name: 'Nina', SecondName: 'Razumtseva', Date: '17/06/1917', Comment: 'Babushka', Hometown: 'Ustyuzhna', HometownId: 9 },
+            { Id: 6, ParentId: [3, 4], Name: 'Evgenia', SecondName: 'Batyreva', Date: '31/10/1974', Comment: 'Sister', Hometown: 'Voronezh', HometownId: 1 },
+            { Id: 7, ParentId: [9, 10], Name: 'Ilia', SecondName: 'Razumtsev', Date: '16/09/1980', Comment: 'Brother 1', Hometown: 'Pskov', HometownId: 4 }, 
+            { Id: 8, ParentId: [9, 10], Name: 'Mitka', SecondName: 'Razumtsev', Date: '04/07/1989', Comment: 'Brother 2', Hometown: 'Pskov', HometownId: 4 },
+            { Id: 9, ParentId: [5, 22], Name: 'Kolya', SecondName: 'Razumtsev', Date: '02/11/1954', Comment: 'Dadya', Hometown: 'Grafskaya', HometownId: 2 },
+            { Id: 10, ParentId: [11, 23], Name: 'Lara', SecondName: 'Razumtseva', Date: '31/01/1961', Comment: 'Tetya', Hometown: 'Elista', HometownId: 5 },
+            { Id: 11, ParentId: [0], Name: 'Valya', SecondName: 'Mukhlynova', Date: '23/06/1933', Comment: 'Babushka', Hometown: 'Elista', HometownId: 5 },
+            { Id: 12, ParentId: [6, 32], Name: 'Dashka', SecondName: 'Markelova', Date: '08/06/2000', Comment: 'Plemyannica 1', Hometown: 'Elista', HometownId: 5 },
+            { Id: 13, ParentId: [6, 32], Name: 'Katka', SecondName: 'Markelova', Date: '27/05/2003', Comment: 'Plemyannica 2', Hometown: 'Elista', HometownId: 5 },
+            { Id: 14, ParentId: [6, 31], Name: 'Tuyanka', SecondName: 'Batyreva', Date: '15/11/2010', Comment: 'Plemyannica 3', Hometown: 'Elista', HometownId: 5 },
+            { Id: 15, ParentId: [0], Name: 'Shura', SecondName: 'Pelushskaya', Date: '22/04/1919', Comment: 'Dv. Babushka', Hometown: 'Ustyuzhna', HometownId: 9 },
+            { Id: 16, ParentId: [15], Name: 'Ira', SecondName: 'Pelushskaya', Date: '11/06/1947', Comment: 'Dv. Tetya', Hometown: 'Pskov', HometownId: 4 },
+            { Id: 17, ParentId: [11, 23], Name: 'Sveta', SecondName: 'Dolginova', Date: '10/11/1954', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 18, ParentId: [11, 23], Name: 'Rita', SecondName: 'Dolginova', Date: '23/10/1956', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 19, ParentId: [11, 23], Name: 'Nadya', SecondName: 'Shaula', Date: '11/11/1958', Comment: 'Tetya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 20, ParentId: [11, 23], Name: 'Vitia', SecondName: 'Dolginov', Date: '11/11/1958', Comment: 'Dadya', Hometown: 'Novosibirsk', HometownId: 8 },
+            { Id: 21, ParentId: [11, 23], Name: 'Tanya', SecondName: 'Dolginova', Date: '07/01/1963', Comment: 'Tetya', Hometown: 'Elista', HometownId: 5 },
+            { Id: 22, ParentId: [0], Name: 'Misha', SecondName: 'Razumtsev', Date: '05/11/1918', Comment: 'Ded', Hometown: 'Grafskaya', HometownId: 2 },
+            { Id: 23, ParentId: [0], Name: 'Zambo', SecondName: 'Dolginov', Date: '24/04/1926', Comment: 'Ded 2', Hometown: 'Elista', HometownId: 5 },
+            { Id: 24, ParentId: [18, 34], Name: 'Alina', SecondName: 'Ushakova', Date: '??/??/????', Comment: 'Dv. Sister', Hometown: 'Elista', HometownId: 5 },
+            { Id: 25, ParentId: [19, 33], Name: 'Igor', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Energodar', HometownId: 14 },
+            { Id: 26, ParentId: [19, 33], Name: 'Dima', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Energodar', HometownId: 14 },
+            { Id: 27, ParentId: [20, 35], Name: 'Olga', SecondName: 'Dolginova', Date: '??/??/????', Comment: 'Dv. Sister', Hometown: 'Elista', HometownId: 5 },
+            { Id: 28, ParentId: [20, 35], Name: 'Venia', SecondName: 'Dolginov', Date: '??/??/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
+            { Id: 29, ParentId: [20, 36], Name: 'Oleg', SecondName: 'Dolginov', Date: '10/11/????', Comment: 'Dv. Brother', Hometown: 'Elista', HometownId: 5 },
+            { Id: 30, ParentId: [0], Name: 'Yura', SecondName: 'Pelushskiy', Date: '??/??/1921', Comment: 'Dv. Ded', Hometown: 'Ustyuzhna', HometownId: 9 },
+            { Id: 31, ParentId: [0], Name: 'Sanal', SecondName: 'Batyrev', Date: '11/06/????', Comment: 'Muzh Sestry 3', Hometown: 'Elista', HometownId: 5 },
+            { Id: 32, ParentId: [0], Name: 'Dima', SecondName: 'Markelov', Date: '??/??/????', Comment: 'Muzh Sestry 2', Hometown: 'Elista', HometownId: 5 },
+            { Id: 33, ParentId: [0], Name: 'Slava', SecondName: 'Shaula', Date: '??/??/????', Comment: 'Muzh Teti', Hometown: 'Energodar', HometownId: 14 },
+            { Id: 34, ParentId: [0], Name: 'Sasha', SecondName: 'Ushakov', Date: '??/??/????', Comment: 'Muzh Teti', Hometown: 'Elista', HometownId: 5 },
+            { Id: 35, ParentId: [0], Name: 'Toma', SecondName: '???', Date: '??/??/????', Comment: 'Mat Olgi i Veni', Hometown: 'Elista', HometownId: 5 },
+            { Id: 36, ParentId: [0], Name: 'Ira', SecondName: '???', Date: '??/??/????', Comment: 'Mat Olega', Hometown: 'Elista', HometownId: 5 },
+        ];
+
+        if (e.autocompleteColumn) {
+            e.grid._autocomplDict = {};
+            e.grid._autocomplCount = 0;
+        }
+
+        let rows = [];
+
+        for (let row of family) {
+            if (!this.passRow(e.grid, row, e.autocompleteColumn)) continue;
+
+            if (e.autocompleteColumn) {
+                e.grid._autocomplCount++;
+                if (e.grid._autocomplCount > 10) break;
+
+                let cellValue = row[e.autocompleteColumn.name];
+                e.grid._autocomplDict[String(cellValue).toLowerCase()] = 1;
+
+                rows.push(cellValue);
+            }
+            else {
+                rows.push(row);
+            }
+        }
+
+        if (!e.autocompleteColumn) {
+            e.grid.totalRows = rows.length;
+
+            if (e.grid.columns) {
+                let sortCol = null;
+                for (let col of e.grid.columns) {
+                    if (col.asc || col.desc) {
+                        sortCol = col;
+                        break;
+                    }
+                }
+
+                if (sortCol != null) {
+                    rows.sort(function (a, b) { return a[sortCol.name] > b[sortCol.name] ? (sortCol.asc ? 1 : -1) : (sortCol.asc ? -1 : 1); });
+                }
+            }
+        }
+
+        if (e.autocompleteColumn) {
+            rows.sort(function (a, b) { return a > b ? 1 : -1; });
+        }
+        else {
+            rows = e.grid.pageSize > 0 && e.grid.pageNumber > 0 ? rows.slice((e.grid.pageNumber - 1) * e.grid.pageSize, e.grid.pageNumber * e.grid.pageSize) : rows;
+
+            e.grid.rows = rows;
+        }
+
+        return rows;
+    }
+
+    GetFamilyColumns() {
+        return [
+            { name: 'Id', sortable: true, filtrable: true },
+            { name: 'Name', sortable: true, filtrable: true },
+            { name: 'SecondName', sortable: true, filtrable: true },
+            { name: 'Date', sortable: true, type: 'date' },
+            { name: 'Comment', sortable: true, filtrable: true },
+            {
+                name: 'Hometown', sortable: true, filtrable: true, type: 'lookup', keyField: 'HometownId', refKeyField: 'Id', refNameField: 'City', getRows: (e) => {
+                    return new Promise(function (resolve, reject) {
+
+                        const rows = new TestData().getCity(e);
+
+                        if (rows != null) {
+                            resolve(rows);
+                        } else {
+                            reject(Error("Error getting rows"));
+                        }
+                    });
+                }
+            },
+        ]
+    }
+
+    getCity(e) {
+        const cities = [
+            { Id: 1, City: 'Voronezh', ParentId: [1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23] },
+            { Id: 2, City: 'Grafskaya', ParentId: [1, 3, 4, 5, 6, 7, 9, 10, 11, 15, 16, 17, 18, 19, 20, 21, 22, 23] },
+            { Id: 3, City: 'Moskow', ParentId: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 23, 28, 29] },
+            { Id: 4, City: 'Pskov', ParentId: [1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 14, 15, 16, 30] },
+            { Id: 5, City: 'Elista', ParentId: [1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 17, 18, 19, 20, 21, 23, 24, 25, 26, 27, 28, 29] },
+            { Id: 6, City: 'Pyatigorsk', ParentId: [1, 3, 4, 6, 12, 13, 14] },
+            { Id: 7, City: 'Piter', ParentId: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 14, 15, 16] },
+            { Id: 8, City: 'Novosibirsk', ParentId: [1, 3, 4, 11, 14, 17, 18, 19, 20, 23] },
+            { Id: 9, City: 'Ustyuzhna', ParentId: [5, 15, 30] },
+            { Id: 10, City: 'Army', ParentId: [1, 7, 8, 9, 20] },
+            { Id: 11, City: 'Bali', ParentId: [2] },
+            { Id: 12, City: 'Hanty-Mansiysk', ParentId: [2] },
+            { Id: 13, City: 'Paris', ParentId: [21] },
+            { Id: 14, City: 'Energodar', ParentId: [19, 25, 26] },
+        ];
+
+        if (e.autocompleteColumn) {
+            e.grid._autocomplDict = {};
+            e.grid._autocomplCount = 0;
+        }
+
+        let rows = [];
+
+        for (let row of cities) {
+            if (!this.passRow(e.grid, row, e.autocompleteColumn)) continue;
+
+            if (e.filters && e.filters.length) {
+                let filter = e.filters[0];
+                filter = filter.filter ? filter.filter : filter;
+                if (!row['ParentId'] || row['ParentId'].indexOf(+filter) < 0) continue;
+            }
+
+            if (e.autocompleteColumn) {
+                e.grid._autocomplCount++;
+                if (e.grid._autocomplCount > 10) break;
+
+                let cellValue = row[e.autocompleteColumn.name];
+                e.grid._autocomplDict[String(cellValue).toLowerCase()] = 1;
+
+                rows.push(cellValue);
+            }
+            else {
+                rows.push(row);
+            }
+        }
+
+        if (!e.autocompleteColumn && e.grid) {
+            e.grid.totalRows = rows.length;
+
+            if (e.grid.columns) {
+                let sortCol = null;
+                for (let col of e.grid.columns) {
+                    if (col.asc || col.desc) {
+                        sortCol = col;
+                        break;
+                    }
+                }
+
+                if (sortCol != null) {
+                    rows.sort(function (a, b) { return a[sortCol.name] > b[sortCol.name] ? (sortCol.asc ? 1 : -1) : (sortCol.asc ? -1 : 1); });
+                }
+            }
+        }
+
+        if (e.autocompleteColumn) {
+            rows.sort(function (a, b) { return a > b ? 1 : -1; });
+        }
+        else {
+            rows = e.grid.pageSize > 0 && e.grid.pageNumber > 0 ? rows.slice((e.grid.pageNumber - 1) * e.grid.pageSize, e.grid.pageNumber * e.grid.pageSize) : rows;
+
+            e.grid.rows = rows;
+        }
+
+        return rows;
+    }
+
+    GetCityColumns() {
+        return [{ name: 'Id', sortable: true }, { name: 'City', sortable: true, filtrable: true }]
+    }
+
+    passRow(grid, row, autocompleteColumn) {
+        if (!grid || !grid.columns) return true;
+
+        for (let col of grid.columns) {
+            if (!col.filtrable || (col.filter == null || col.filter == '') && !autocompleteColumn) continue;
+
+            const cellValue = String(row[col.name]).toLowerCase();
+            if (cellValue == '') return false;
+
+            const filter = col.filter == null || col.filter == '' ? '' : col.filter.toLowerCase();
+
+            if (filter != '') {
+                if (autocompleteColumn) {
+                    if (autocompleteColumn == col && cellValue.indexOf(filter) != 0 || autocompleteColumn != col && cellValue != filter) return false;
+
+                }
+                else {
+                    if (cellValue != filter) return false;
+                }
+            }
+
+            if (autocompleteColumn && grid._autocomplDict[cellValue]) return false;
+        }
+
+        return true;
+    }
+
+    GetCities = function (e) {
+        return new Promise(function (resolve, reject) {
+
+            const rows = new TestData().getCity(e);
+
+            if (rows != null) {
+                resolve(rows);
+            } else {
+                reject(Error("Error getting rows"));
+            }
+        });
+    };
+}

package/src/Themes/DefaultGridTheme.jsx

@@ -0,0 +1,36 @@
+export class DefaultGridTheme {
+
+    constructor() {
+        this.pagerButtonsClass = 'grid-pager-button';
+        this.toolbarClass = '';
+        this.toolbarButtonsClass = 'grid-toolbar-button';
+        this.pocketButtonsClass = 'grid-pocket-button';
+
+        this.pagerClass = 'mb-1 grid-pager-default';
+
+        this.gridClass = '';
+        //this.headerDivClass = 'grid-header-div-default';
+        this.headerDivClass = ' ';
+        this.selectedRowClass = 'table-active';
+        this.inputClass = 'input-default-class';
+        this.inputClassLG = 'input-default-class-lg';
+        this.selectClass = 'select-default-class';
+
+        this.tabControlButtonClass = 'graph-tabcontrol-button';
+
+        this.menuClass = '';
+        this.menuItemClass = '';
+        this.dropdownWndClass = 'none';
+
+        this.filterButtonClass = 'graph-filter-button';
+        this.clearButtonClass = '';
+
+        this.modalBodyClass = 'modal-window-body';
+        this.modalHeaderClass = 'modal-window-header';
+        this.modalFooterClass = 'modal-window-footer';
+        this.modalFooterButtonClass = 'modal-window-footer-button'
+        this.modalTitleClass = 'modal-window-header-title';
+    }
+
+    // -------------------------------------------------------------------------------------------------------------------------------------------------------------
+}