Correct Way to Add Row/Column/Cell

Webix JS
1

I was looking for a way to dynamically add rows/columns/cells but the only add function I found was addView(). Can this be done easily?

2

There are two ways to change the existing layout (accordion, multiview, tabview) dynamically:

  1. using addView() and removeView() methods;
  2. using webix.ui() method to rebuilt the layout.

Both of them are described in the documentation.

1 Like
3

I already reviewed the documentation. There are no functions called addRow(), addColumn() or anything similar. For example, if the row has no explicit rows and columns like :

{
view:‘layout’,
id:‘myView’
}

how to I add a ROW and how do i add a COLUMN?

4

If you use a simple view such as layout, are there implied rows:[] and cols:[] already built in? Or, do you need to specify them in the json like this:

{ view:‘layout’, id:‘myView’, rows;[], cols:[] }

Also, how are cells defined? Are they mapped internally to rows and columns?

5

You cannot instantiate a layout (multiview, accordion) without defining a collection of its subviews.

  • Layout and accordion are built of rows or cols. The collection of subviews can be empty.
{ rows:[ ]} //layout with subviews placed vertically
{ cols:[ ]} //layout with subviews placed horizontally
  • Multiview is comprised of cells and at least one cell should be defined. Only one cell is visible at a time.
{ cells:[
   { } //at least an empty view
 ]}

As you can see, view name is implied and can be omitted.

So, if you apply the addView() method to the layout that already features rows (cols), it means that you add another row/column to the collection and place the dedicated view into this row/column. http://webix.com/snippet/4c6b527f

If you apply the addView() method to the view that already features cells (multiview) you add just another cell to the collection and place the dedicated view into this cell. http://webix.com/snippet/e952c418

1 Like
6

Very Good. This helps me move forward.