Multiple DataTables In Common Parent View

Webix JS
#1

I am attempting to add n DataTables into a parent view. Each DataTable has 2 rows. When I loop through the data to populate the individual DataTables using $$(“parent”).addView(newDataTable), only the first DataTable in the loop gets the data. The remaining DataTables show up, but they have no rows.

I am not sure if this is a Webix issue, or a JavaScript issue.

#2

Nobody has any idea?

#3

Could you please share a snippet of your code (https://webix.com/snippet)?

#4

Hmm the problem is not with the DataTable itself, but with how I am building the DataTable from a template of various DataTable configurations.

https://webix.com/snippet/20931b03

I am re-using a template dataTableTemplates[“TEST”] and that is causing the data to only populate in the top-most DataTable (the first one added to the parent view)

#5

The thing is that inner Datatable logic modifies columns configuration, so you cannot safely reuse it as is. You need to make a copy of the columns configuration object, if you want to use the same afterwards:

webix.copy(dataTable.config.columns)

Please, check the updated snippet: https://webix.com/snippet/01d978e4

The same is also true for hierarchical data.

#6

When I try webix.copy(dataTable.config.columns), i get this error: “Attempt to copy object with self reference”.

#7

You should copy not the columns of an already initialized datatable, but the array of columns’ configurations that you want to provide for each particular datatable.

var columns = [
      {id: "COL1",    header: "COL1", fillspace: true},
      {id: "COL2",    header: "COL2", fillspace: true}
];

webix.ui({
    view:"datatable",  columns:webix.copy(columns);
});

In the snippet I shared earlier the method works as expected.