Sidebar in Layout

Hi there,

We’re busy evaluating Webix as a possible new framework.

What I’m trying to do is create the sidebar in a webix layout. Eg:

webix.ui({
  container:"container",
  id:"layout",
  gravity: 1,
  rows:[
    {id: "top_menu", template:"row 1", gravity:0.1},
    {cols:[
      {
        id:"left_div",
        template:"column 1",
        gravity:0.1
      },
    { 
      id: "frame", template:"column 2"
    }
    ]
  }
]
}).show();

But when I set the sidebar’s container to the id for a column or row in the layout, it gives me Cannot read property ‘_settings’ of null.

Eg:

var menu_data = [
{id: "dashboard", icon: "dashboard", value: "Dashboards", data:[
{ id: "dashboard1", value: "Dashboard 1"},
{ id: "dashboard2", value: "Dashboard 2"}
]},
{id: "layouts", icon: "columns", value:"Layouts", data:[
{ id: "accrodions", value: "Accordions"},
{ id: "portlets", value: "Portlets"}
]},
{id: "tables", icon: "table", value:"Data Tables", data:[
{ id: "tables1", value: "Datatable"},
{ id: "tables2", value: "TreeTable"},
{ id: "tables3", value: "Pivot"}
]},
{id: "uis", icon: "puzzle-piece", value:"UI Components", data:[
{ id: "dataview", value: "DataView"},
{ id: "list", value: "List"},
{ id: "menu", value: "Menu"},
{ id: "tree", value: "Tree"}
]},
{id: "tools", icon: "calendar-o", value:"Tools", data:[
{ id: "kanban", value: "Kanban Board"},
{ id: "pivot", value: "Pivot Chart"},
{ id: "scheduler", value: "Calendar"}
]},
{id: "forms", icon: "pencil-square-o", value:"Forms", data:[
{ id: "buttons", value: "Buttons"},
{ id: "selects", value: "Select boxes"},
{ id: "inputs", value: "Inputs"}
]},
{id: "demo", icon: "book", value:"Documentation"}
];

webix.ready(function(){
webix.ui({
container: "layout",
rows: [ 
{ view: "toolbar", padding:3, elements: [
{ view: "label", label: "Menu"},
]
},
{
cols:[
{
view: "sidebar",
data: menu_data,
on:{
onAfterSelect: function(id){
webix.message("Selected: "+this.getItem(id).value)
}
}
}
]
}
]
});
});

However, they display when I set the container to a div outside of the layout.

Please help as I cannot find much on Stackoverflow and being able to do this or not will make or break the decision to go with Webix as the Framework.

Thanks in Advance

Hello,

Sure, Sidebar can be placed in Webix layout: https://webix.com/snippet/14ffd958

Please, note that the container property can point only to the ID of some HTML element in the document body, not another Webix component.