I try but not able to add.
var columns = webix.toArray(this.dtable.columns);
columns.addView({ view:"text",
value:"test",
options:["one", "two"]
}, 1);It’s impossible to add a view into the array of columns.
The only possibility is to add a column with valid configuration, as described here. You can also check the sample to see how it actually works.
Hi,
I am trying to add column dynamically.When user click at button then It will add a column.I seen the link you share.But I am not able to implement.I tried
below code but not working.
Please help me.
this.grid = new webix.ui({
view:"datatable",
visibleBatch:1,
columns:[
{ id:"id", header:"#", css:"rank", batch:2, width:50},
{ id:"title", header:"Film title", fillspace:true },
{ id:"year", batch:1, header:"Released" , width:80},
{ id:"category", header:"Category", batch:1},
{ id:"votes", batch:3, header:"Votes", width:100},
{ id:"rating", batch:3, header:"Rating", width:100},
{ id:"rank", header:"Rank", css:"rank", batch:2,width:50}
]
});
var columns = webix.toArray(this.grid.columns);
columns.insertAt({
id:"title"+webix.uid(),
header:"New column"
},2);
this.grid.refreshColumns();
}
You should access the columns via the Datatable’s configuration object (config) as grid.config.columns like it is shown in the sample.
Check the updated snippet of your code, please: http://webix.com/snippet/6f51121a
Thanks Helga resolved.
Hi,I am trying to add column dynamically on button click.Bu it is showing error at browser.
I got the following error.
Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at h.xk (eval at module.exports (scripts.bundle.js:1), :905:273)
at h.vj (eval at module.exports (scripts.bundle.js:1), :893:280)
at h.render (eval at module.exports (scripts.bundle.js:1), :849:77)
at h.$setSize (eval at module.exports (scripts.bundle.js:1), :918:297)
at h.adjust (eval at module.exports (scripts.bundle.js:1), :209:81)
at webix.ui.resize (eval at module.exports (scripts.bundle.js:1), :193:383)
Here my code starts
this.grid = new webix.ui({
view: “datatable”,
columns: [
{ id: “id”, header: “#”, css: “rank”, batch: 2, width: 50 },
{ id: “title”, header: “”, fillspace: true },
{ id: “year”, batch: 1, header: “Released”, width: 80 },
{ id: “category”, header: “Category”, batch: 1 },
{ id: “votes”, batch: 3, header: “Votes”, width: 100 },
{ id: “rating”, batch: 3, header: “Rating”, width: 100 },
{ id: “rank”, header: “Rank”, css: “rank”, batch: 2, width: 50 }
],
data: [
{ “id”: “100”, title: “Tripathi”, year: “2017”, category: “Number one”, votes: “Yes”, rating: “good”, rank: “One” },
{ “id”: “101”, title: “Tripathi”, year: “2017”, category: “Number one”, votes: “Yes”, rating: “good”, rank: “One” },
{ “id”: “102”, title: “Tripathi”, year: “2017”, category: “Number one”, votes: “Yes”, rating: “good”, rank: “One” },
{ “id”: “103”, title: “Tripathi”, year: “2017”, category: “Number one”, votes: “Yes”, rating: “good”, rank: “One” }
],
onClick: {
"delbtn": function (e, id, trg) {
// webix.message("Delete row: "+id);
// return false; //here it blocks default behavior
columns.insertAt({
width: 200,
id: "title" + webix.uid(),
header: "New column"
}, 2);
return false;
}
},
});
var columns = webix.toArray(this.grid.config.columns);
console.log(columns)
this.grid.refreshColumns();Please, check the following snippet: http://webix.com/snippet/c5616df8
And please change it to demonstrate the issue, as we have not spotted it.
I don’t know how to change it to demonstrate the issue.I am not getting your sentence ‘change it to demonstrate the issue, as we have not spotted it’
Could you please change the snippet above (http://webix.com/snippet/c5616df8) so that it shows the browser error you have described?
We could not reproduce it with default settings, as far as you can see from the snippet. You can change the code in the snippet, click the “Share” button and get the shareble link, which you can post here.
I will do like that.
I have a snippet at which I get JSON data into combo option drop down.But once I select data from option then it is not showing selected data.
Please help me I have a problem with snippet below.
Hi,
when you add new dynamic column is it possible to add dynamic scheme for this new column?
@jcr what do you mean by “dynamic scheme”?
Data scheme is not linked with the columns configuration and can be defined only on component’s init, while column properties (template, format, etc.) can be redefined at any time.
Hello together This is a behave in version webix 5.4: under some circumstances I’ll get this error
webix_debug.js:20994 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at o.xk (webix_debug.js:20994)
at o.vj (webix_debug.js:20715)
at o.render (webix_debug.js:19710)
at window.tableRowsRenew (functions.js:932)
at o.eval (eval at globalEval (jquery-2.2.4.min.js:2), :304:9)
at o.callEvent (webix_debug.js:576)
at o.hideColumn (webix_debug.js:25008)
at o.showColumn (webix_debug.js:25093)
at o. (webix_debug.js:27306)
at o. (webix_debug.js:249)
On hiding columns or viewing when columns are not fully be seen cause table have to many columns which are not all seen in the browser. When reloading the page all is okay. You can have a access on my side to see whats going on… if you want.
Michael
Hi @Michael
Could you please describe the use-case and provide a snippet/example which will allow to repeat and test this issue?
The error stack is quite useful while debugging, but as we didn’t succeed in repeating this behaviour, I would request more information on it, including the configuration of your datatable and the precise actions which lead to the mentioned error.
Thank you!
Oh Listopad.
I’ve got the error. It was my fault! Sorry. I set tableObj.render() which cause the error in “onAfterColumnShow” “onAfterColumnHide” - Event
So everything works fine for me now.
But something else I would like to know how to activate headermenu on touch screens?
Michael
There is a possibility to open header menu on left click (or on touch).
Please, check the example of implementation in the related article.