How to create columns from indexed list for DataTable

Webix JS
#1

I need a DataTable with some fixed columns and some dynamic columns which gets bound to the DataTable from the indexed list. So I have the following data structure:

data: [{
    _indexer: "7a928c28-c473-4f30-bf37-7ea33a1c9718",
    _Day: "20/06/2017",
    _Target: "Target1",
    '_ListColumn[47d410bd_9022_4ee9_9a4d_de73d79e1c56].Value': "value1",
    '_ListColumn.Index': "47d410bd-9022-4ee9-9a4d-de73d79e1c56",        
    '_ListColumn[5643872a_03af_4e45_bdc4_d2bd2c239426].Value': "value2",
    '_ListColumn.Index': "5643872a-03af-4e45-bdc4-d2bd2c239426",
    _ID: "7a928c28-c473-4f30-bf37-7ea33a1c9718"
}
}]

It works fine except when I do the grid.data.pull, it has got only one _ListColumn.Index with the value “5643872a-03af-4e45-bdc4-d2bd2c239426”. I need the datatable to hold both _ListColumn.Index as it’s required to be sent to Server as MVC model binder needs all the indexes so that data gets mapped the view model. Is it possible to do this?

#2

Hello,

It’s not Webix, but a general JavaScript limitation: you cannot create associative arrays with duplicate keys. That is why there’s only 1 '_ListColumn.Index' field in the data element, the last one.

I can suggest you to change the input data to:

data: [
  {
    _indexer: "7a928c28-c473-4f30-bf37-7ea33a1c9718",
   ...
    '_ListColumn.Index': [ //array of values
           "47d410bd-9022-4ee9-9a4d-de73d79e1c56", 
           "5643872a-03af-4e45-bdc4-d2bd2c239426"
    ]
  }
]

and render it in Webix Datatable with the help of column templates.

Please, check the following snippet: https://webix.com/snippet/19b2602a