JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › initialize grid with empty dataSource
- This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by admin.
-
AuthorPosts
-
May 9, 2022 at 3:00 pm #103162Dark BeccioParticipant
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 #103170adminKeymasterHi,
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 StoevSmart UI Team
https://www.htmlelements.com/May 10, 2022 at 7:55 am #103184Dark BeccioParticipantwindow.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 #103185adminKeymasterHi,
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 StoevSmart UI Team
https://www.htmlelements.com/May 11, 2022 at 7:26 am #103203Dark BeccioParticipanthttps://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 #103205adminKeymasterHi Dark Beccio,
Thanks, we will take a look. Grazie.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.