UI according to json

Webix JS
#1

Hello Webix Team,

https://snippet.webix.com/0x9wipdm

In above snippet, I want to generate UI according to the json like in one row I have 2 columns, I am trying it by addView but it is giving me wrong result.

#2

Please provide solution to add column dynamically in dynamically created row.

#3

Hello,

Unfortunately, there is no ready to use solution.

addView works correctly here. It just adds a view on a certain layout level.
If this level is declared as rows, the new cell (an object) will be added as a row. In the mentioned implementation, the expected result looks like

rows:[
  { cols: [
     {  template:'sdd'  }
  ]},
  { cols: [
     {  template:'sdd'  }
  ]},
  { cols: [
     {  template:'sdd'  }
  ]},
]

A proper solution here is to create the nested structure and add the top-level cells with the needed config:

https://snippet.webix.com/2w959gx2

In general, in case of translating a custom JSON to webix config, you need to write a corresponding parser which will result in the new JSON which could be processed by webix.ui() constructor or addView method.

Here’s a quick demo created from your example:

Code Snippet

#4

You can just convert your rows|columns configuration into webix layout config and use a single addView command to create all cells at once.

Please check Code Snippet