How to add dynamic column to webix datatable.

edited February 2017 in Technical questions

I try but not able to add.
var columns = webix.toArray(this.dtable.columns);

columns.addView({ view:"text",
                           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.

  • edited February 2017

    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({
        { 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);
        header:"New column"
  • 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:

  • 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
            width: 200,
            id: "title" + webix.uid(),
            header: "New column"
          }, 2);
          return false;
    var columns = webix.toArray(this.grid.config.columns);
  • edited March 2017

    Please, check the following snippet:

    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 ( 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.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!