Adding and Deleting MultiView Cells Dynamically

Here two approaches are possible:

1 . If you are using multiview with a switching control (tabbar or segmented) - you should treat multiview and a switching control separately. In other words you should add and remove options for tabbar (segmented button) and at the same time add and remove views for the multiview.

2 . If you are using tabview (integral component that consists of a built-in multiview and tabbar) - note that it features dedicated methods to add and remove views together with the corresponding tabs.

Using Tabbar and MultiView

Both Tabbar and Segmented Button feature separate parts - tabs or segments - that are defined by options property.
Each of its options can be connected with a separate view or a separate click handler.

Table 1 Switch controls
view:"segmented"
view:"tabbar"

Tabs/segments can be added and deleted on the go with the help of the following methods:

  • addOption() - adds a new tab/segment according to the provided configuration;
  • removeOption() - removes the tab/segment according to the provided ID.

MultiView cells can be added and deleted dynamically by using:

  • addView() - adds view to layout (multiview is layout) according to the provided configuration;
  • removeView() - removed layout cell by the given ID.

Adding

rows:[
    {view:"tabbar", id:"tabs", multiview:true, options:[], ..}, //empty tabbar
    {view:"multiview", id:"views", cells:[
        {template:"..."} //multiview should have at least one cell
    ]}
]    
...
 
function open_new_tab(id){  
    var item = $$('list1').getItem(id);
 
    //adding a new cell to multiview
    $$("views").addView({ view:"template", id:item.id, template:item.title});
    //adding option to the tabbar
    $$('tabs').addOption(item.id, item.title, true);
};

Deletion

function del_tab(){
    //getting the ID of the active tab
    var id = $$("tabs").getValue(); 
 
    //removing tabbar option
    $$("tabs").removeOption(id);
 
    //removing corresponding view
    $$("views").removeView(id);
}

Related sample:  Dynamic Adding/Deleting of Tabs in Tabbar

The logic of view adding and removal can be studied in detail in the 
Dynamic UI Modifications.

Using TabView

TabView is a hybrid of a multiview and tabbar.
It features two methods that allow adding and removing cells together with corresponding tabs.

Each combination of a tab and a cell is configured as:

{ header:"header_title", body:{ ..view config ..}

The same configuration is passed into the addView() method:

$$("tabview1").addView({
    header:"New Tab",
    body:{ //webix.uid() generates a random number
        template:"New content "+webix.uid()
    }
});

The TabView cell can be removed by removeView() method that required an ID if this cell:

var id = $$("tabview1").getValue(); //id of active cell
$$("tabview1").removeView(id);

Related sample:  Tabview: Adding and Removing tabs

Built-in Tab 'Close' Button

Webix Tabbar can be equipped with a 'Close' button:

//all tabs
{view:"tabbar", close:true, options:[]}
 
//some tabs
{view:"tabbar", options:[
    {id:1, value:"Tab 1", close:true},
    {id:2, value:"Tab 2"}
]}

If a closable tab is used in a separate tabbar, you should provide logic to remove the corresponding view.

tabbar.attachEvent("onOptionRemove", function(id, value){
    $$("multiview").removeView(id);
});

ID of the tab coincides with ID of the view, normally.

If a closable tab is used within a tabview, the corresponding tab will be removed from the app automatically.

Back to top