Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Data Grid › initialize grid with empty dataSource

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 9, 2022 at 3:00 pm #103162
    Dark Beccio
    Participant

    Hi, until Smart UI v12.0.0 i used to initialize an empty grid like this :

    const data = null;

    Smart(‘#myEmptyGrid’, class {
    get properties() {
    return {
    dataSource: data,
    columns: [myDefinedColumns]
    }
    }
    });

    after updating to Smart UI v14.0.0 i get this error at smart.grid.js:1437:

    Uncaught TypeError: Cannot read properties of undefined (reading ‘set’)
    at BaseElement._recycle (smart.grid.js:1437:147434)
    at BaseElement._clearSelection (smart.grid.js:1514:39587)
    at BaseElement.clearSelection (smart.grid.js:1514:62995)
    at o (smart.grid.js:1437:134964)
    at BaseElement._refreshLayout (smart.grid.js:1437:135207)
    at BaseElement._refresh (smart.grid.js:1437:123867)
    at BaseElement.refresh (smart.grid.js:1437:161000)
    at BaseElement.r (smart.router.js:20:72232)
    at Proxy.propertyChanged (smart.grid.js:1430:13612)
    at t (smart.grid.js:1437:118396)

    so i tried like this:

    const data = {};

    but i still get an error, this time at smart.grid.js:1521 :

    Uncaught TypeError: t.dataSource.clearSort is not a function
    at BaseElement.clearSort (smart.grid.js:1521:128)
    at BaseElement.dataBind (smart.grid.js:1437:160293)
    at BaseElement.r (smart.router.js:20:72232)
    at BaseElement.propertyChangedHandler (smart.grid.js:1437:66179)
    at BaseElement.t.updateProperty (smart.router.js:20:74956)
    at BaseElement.set [as dataSource] (smart.router.js:20:76090)
    at smart.router.js:20:83494
    at window.<computed> (smart.router.js:20:83554)
    at initGrid (index.js:406:5)
    at window.initLista (index.js:397:5)

    how can i initialize my grid with empty dataSource?

    TY

    May 9, 2022 at 5:22 pm #103170
    admin
    Keymaster

    Hi,

    We will need more information about that, because we are unable to reproduce it https://codepen.io/jqwidgets/pen/OJQNmZJ?editors=1112

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    May 10, 2022 at 7:55 am #103184
    Dark Beccio
    Participant

    window.onload = function () {
    initGrid();
    };
    function initGrid() {
    Smart(“#grid”, class {
    get properties() {
    return {
    selection: {
    enabled: false,
    allowRowSelection: false,
    checkBoxes: {
    enabled: true
    }
    },
    onCommand: function (args) {
    if (args.name === “commandColumnRowMenuCommand”) {
    const row = args.details;
    const menu = document.getElementById(“menuGrid”);
    args.event.preventDefault();
    let contextMenuGridOpenedOn = args.details;
    window.numOrdine = contextMenuGridOpenedOn.data.NumeroOrdine;
    menu.open(args.event.pageX – 30, args.event.pageY – 80);
    args.handled = true;
    }
    },
    editing: {
    enabled: true,
    mode: “row”,
    action: “none”,
    dialog: {
    enabled: true
    },
    commandColumn: {
    visible: true,
    position: “near”,
    dataSource: {
    commandColumnMenu: {
    visible: true
    },
    commandColumnRowMenu: {
    visible: true
    }
    }
    }
    },
    dataSource: [],
    columns: [
    {
    label: “IDCliente”,
    dataField: “IDCliente”,
    dataType: “number”
    },
    {
    label: “IDAzienda”,
    dataField: “IDAzienda”,
    dataType: “number”
    },
    {
    label: “aziNome”,
    dataField: “aziNome”,
    dataType: “string”
    }
    ]
    };
    }
    }
    );
    }

    the problem seems to be commandColumn property inside editing,If i remove it the grid work fine.

    In your codepen commandColumn has no problem, is it because u call an instance of smart.dataAdapter?

    May 10, 2022 at 10:53 am #103185
    admin
    Keymaster

    Hi,

    Unfortunately, we cannot reproduce this and we will need a complete codepen sample or something similar. Here is our test code based on your last post:

    Smart('#grid', class {
    get properties() {
        return {
            sorting: {
                enabled: true
            },
            editing: {
                enabled: true,
                mode: 'row',
                action: 'none',
                dialog: {
                    enabled: true
                },
                commandColumn: {
                    visible: true,
                    position: "near",
                    dataSource: {
                        commandColumnMenu: {
                            visible: true
                        },
                        commandColumnRowMenu: {
                            visible: true
                        }
                    }
                }
            },
            locale: 'de',
            selection: {
                enabled: false,
                allowRowSelection: false,
                checkBoxes: {
                    enabled: true
                }
            },

            filtering: {
                enabled: true
            },
            behavior: { allowColumnReorder: true },
            onCommand: function (args) {
                if (args.name === "commandColumnRowMenuCommand") {
                    const row = args.details;
                    const menu = document.getElementById("grid");
                    args.event.preventDefault();
                    let contextMenuGridOpenedOn = args.details;
                    window.numOrdine = contextMenuGridOpenedOn.data.NumeroOrdine;
                    menu.open(args.event.pageX - 30, args.event.pageY - 80);
                    args.handled = true;
                }
            },
            dataSource: [],
            columns: [
                {
                    label: 'First Name', dataField: 'firstName', filterMenuMode: 'excel'
                },
                { label: 'Last Name', dataField: 'lastName' },
                { label: 'Date', dataField: 'date', align: 'right', cellsAlign: 'right', },
                { label: 'Product', dataField: 'productName' },
                { label: 'Quantity', dataField: 'quantity', align: 'right', cellsAlign: 'right', }
            ]
        }
    }
});

    No errors in the console. The grid displays with columns and empty data source.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

    May 11, 2022 at 7:26 am #103203
    Dark Beccio
    Participant

    https://codepen.io/andreaguarducci/pen/bGLeraK?editors=1111

    there you go.

    if u inspect the page u can see this sample trigger the error :

    Uncaught TypeError: Cannot read properties of undefined (reading ‘set’).

    if u remove commandColumn property the grid works fine.

    May 11, 2022 at 7:50 am #103205
    admin
    Keymaster

    Hi Dark Beccio,

    Thanks, we will take a look. Grazie.

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.