initialize grid with empty dataSource

[Dark Beccio]

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

[admin]

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/

[Dark Beccio]

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?

[admin]

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/

[Dark Beccio]

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.

[admin]

Hi Dark Beccio,

Thanks, we will take a look. Grazie.

Best regards,
Peter Stoev

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

[Author]

Posts