Hi When I tired to set the state to data table(grid), which was saved earlier it is working fine, but some times I am getting below error
Uncaught TypeError: Cannot set property ‘node’ of undefined webix.js:769
webix.extend.refreshColumns webix.js:769
webix.DataState.setState webix.js:709
webix.ui.headermenu.on.onItemClick list_controller.js:76
webix.EventSystem.callEvent webix.js:22
webix.MouseEvents.Yc webix.js:186
webix.MouseEvents.Sc webix.js:184
(anonymous function)
Can you share the configuration of your datatable? Do you use header menu?
There’s a known bug with column visibility, state and headermenu options. Maybe this can help you? http://forum.webix.com/discussion/3070/issue-with-the-use-of-restoring-state-of-a-data-table-with-headermenutrue#Item_3
Thanks Helga.
But the solution is not working that was provided in the link.
This issue happens only in one scenario.
I have 4 columns(column1, column2, column3, column4), save initial sate. Now hide column1. reorder the columns to column3, column2, column4. when refresh try to reset to the original sate.
I tried this, but everything works smoothly for me. http://webix.com/snippet/9a5db5f0
Thanks Helga.
This issue is reproducible only when the user exits the app & try to open the app in previous exited state(hide column1. reorder the columns to column3, column2, column4) & do the reset to original/default state.
Still I can’t see any problem. http://webix.com/snippet/f73d6cfc.
Maybe you grid lies in the multiview cell?
Thanks Helga for your continuos support.
I am not using the multi view cell. Please find the code below.
var grid = new webix.ui({
// template: "ji",
container: "dataGridView",
id: "myGrid",
view: "datatable",
borderless: true,
// autoConfig: true,
drag: "source",
select: "row",
// height: '50',
responsive: true,
scrollX: false,
fixedRowHeight: false,
rowLineHeight: 20,
rowHeight: 60,
multiselect: true,
dragColumn: "order",
resizeColumn: true,
headermenu: {
id: "headerMenu",
css:"webix-contextmenu",
width:150,
data: [{
id: "data",
value: "Flag",
}, {
id: "type",
value: "Type",
}, {
id: "name",
value: "Name",
}, {
id: "description",
value: "Description",
}, {
id: "updated_at",
value: "Date Added",
}, {
id: "reset",
value: "Reset To Defaults",
}],
on: {
"onItemClick": function(id, e) {
if (id === "reset") {
//loading the default state on click
var state = webix.storage.local.get("originalState");
if (state) {
if (grid !== undefined) {
console.log(grid);
var presentState = grid.getState();
grid.setState(state);
//console.log(List.Controller.getDefaultGridOrder());
if (List.Controller.getDefaultGridOrder() !== undefined) {
grid.data.order =
List.Controller.getDefaultGridOrder();
grid.refresh();
}
}
}
} else {
List.Controller.updateHeaderMenu(id);
}
}
}
},
//data: '',
on: {
// onBeforeLoad: function() {},
onAfterLoad: function() {
console.log("****************");
// Loading the saved state on launch & storing the default sort order
List.Controller.setDefaultGridOrder(grid.data.order);
var allFolderState = webix.storage.local.get("allFolderState");
if (allFolderState) {
grid.setState(allFolderState);
}
else {
var state = webix.storage.local.get("exitState");
console.log("****************");
console.log(state);
if (state) {
grid.setState(state);
}
}
}
},
columns: [{
id: "data",
header: "Flag",
css: "",
width: 50,
sort: "int",
// fillspace: true,
}, {
id: "type",
header: "Type",
sort: "string",
width: 80,
template: "<div class='#type#'></div>",
// addCellCss: "#type#",
}, {
id: "name",
sort: "string",
header: "Name",
width: 150,
// fillspace: true,
}, {
id: "description",
sort: "string",
header: "Description",
width: 400,
fillspace: true,
}, {
id: "updated_at",
sort: "string",
header: "Date Added",
width: 150,
}],
});
if (grid !== undefined) {
// storing the original state for defaults
webix.storage.local.put("originalState", grid.getState());
//Saving the state when the window is closed
var win = require("nw.gui").Window.get();
win.on('close', function() {
this.hide(); // Pretend to be closed already
//storing the current state on exit
webix.storage.local.put("exitState", grid.getState());
this.close(true);
});
var state = webix.storage.local.get("exitState");
if (state) {
grid.setState(state);
}
};
Thanks Helga.
The only difference that I noticed is I am setting the grid data after receiving the data from service & setting in below way.
$$(‘myGrid’).clearAll();
$$(‘myGrid’).parse(gridData);
This must not cause the issue. getState, setState works with grid’s configuration and doesn’t related to the data.
Are you using the single grid or multiple grid’s with such functionality ? In second case - be sure to use different names for local storage, as if you are using the same name - configuration of one grid will overwrite config of other grid which can lead to complex errors.
Thanks Maksim.
I am using only 1 grid, after debugging some more I found out that if the exit state columns ids are stored in the original (columns order) then there is no issue. If not with all the above steps I am facing this issue.
originalState/default state
{“ids”:[“data”,“type”,“name”,“description”,“updated_at”],“size”:[50,80,150,345,150],“select”:[],“scroll”:{“x”:0,“y”:0},“hidden”:[]}
Exit State Data
1.)
{“ids”:[“name”,“description”,“updated_at”],“size”:[150,475,150],“select”:[],“scroll”:{“x”:0,“y”:0},“sort”:{“id”:“name”,“dir”:“desc”},“hidden”:[“data”,“type”]}
2.)
{“ids”:[“description”,“name”,“updated_at”],“size”:[150,475,150],“select”:[],“scroll”:{“x”:0,“y”:0},“sort”:{“id”:“name”,“dir”:“desc”},“hidden”:[“data”,“type”]}
The 2 exit state data is causing the issue. Please let me know if any more info is required.
Steps to reproduce.
Load all five columns(column1 to column5), save state(originalState).
Now hide column1, column2, reorder remaining columns to column4, column3, column5. Sort the data in column3 to ascending or descending order.Save state(exitState).
Now launch the app & show the exitState columns(which will show column4, column3, column5)
Now try to reset to original state.
In console below error is observed.
Uncaught TypeError: Cannot set property ‘node’ of undefined webix.js:769 webix.extend.refreshColumns webix.js:769 webix.DataState.setState webix.js:709