addView

adds a new view to a dashboard or moves an existing one

view	object	the configuration of the view
index	number	the index a new view will be added at or an existing one will be moved to

string|number

the id of the view

Example

webix.ui({
    view:"dashboard", 
    id:"grid",
    gridColumns:4, gridRows:3,
    cells:[
        { view:"panel", x:0, y:0, dx:1, dy:1, body:{
            template:"Single"
        }},
        { view:"panel", x:1, y:0, dx:2, dy:1, body:{
            template:"Wide 1"
        }},
        // more columns
    ]
});
 
$$("grid").addView({view:"panel",x:1, y:1, dx:1, dy:1, body:{template:"Column1"}});
 
// moves an existing child view to a different index 
$$("grid").addView($$("child"), 3);

Related samples

For this view, the index specified in addView() will have no visual effect since child views are placed at absolute coordinates. However, getChildViews() will return child views in the actual order.

A Dashboard cell possesses its attributes from a GridLayout cell, namely:

• x - (number) the x-index of a grid cell starting point
• y - (number) the y-index of a grid cell starting point
• dx - (number) the width of a view defined as a number of grid cells
• dy - (number) the height of a view defined as a number of grid cells

The "widget" view may have the following attributes:

• body - (object) the body of a "panel" view to place a template of a view inside
• icon - (string,boolean) defines whether a drag handle icon is displayed. The default value is "bars"
• resize - (boolean) defines whether a view is resizable (has a resize handle), false by default
• header - (string) sets a header with the specified text for a view

Back to top