Available only in PRO Edition

DataLayout

The view is based on Layout and operates the DataStore API.

It's intended for creating complex data structures, e.g. big lists with dynamic data sub-loading, multipage forms, etc. and allows placing several data components into one layout.

Simple Mode

In order to create a simple data layout, you need to define an empty rows or cols collection that will define the arrangement of elements on the page (vertical or horizontal).

Then place configurations of the necessary views into the data configuration object. For example, a DataLayout can contain several templates:

webix.ui({
    view:"datalayout",
    type:"space",
    rows:[],
    data:[
        { id:"a1", template:"A1", type:" header" },
        { id:"a2", template:"A2", type:" header" },
        { id:"a3", template:"A3", type:" header" },
        { id:"a4", template:"A4", type:" header" }
    ]
});

Pay attention that in the above example the view:"template" definition is omitted for simplicity, as specifying the view type as "template" is optional.

Related sample:  Data Layout

Repeater Mode

To create a more complex structure, you should specify a common template for DataLayout elements as a value of its rows/cols property. It will be applied for each layout element (a row or a column).

webix.ui({
    view:"datalayout",
    type:"space",
    rows:[
        { name:"$value", type:"header", template:"#month# 2016" },
        { name:"data", view:"list", template:"#income#, #count#" }
    ],
    data:[
        { month:"January", 
          data:[
            { income: 122342, count:12 }, 
            { income: 92342, count:8 }, 
            { income: 222342, count:20 }
          ] 
        },
        { month:"February", data:[{ income: 2342, count:2 }] }
    ]
});

In the above example, the rows collection contains a common template that defines that two views will be shown in each DataLayout element: a template view for the header and a list with data.

Each view in DataLayout has the name property that defines which data elements will be passed to the view. This property can have one of the two values:

  • "$value" - presupposes that the whole data item is passed to the view, and a view "decides" what data property should be displayed;
  • "some_property" - implies that the value of a particular property in the data item will be passed and displayed in the view.

The view displays the passed data in the following way:

1) If the view is a data component, the passed data will be parsed into the view;

2) If the view is a single-value component (e.g. a label or a button), the passed data will be used as a value of this view.

Related sample:  Data Layout - Repeater Mode

Loading Data

Data can be loaded into DataLayout in the same way as into any other data component, i.e. by:

  • parsing from a string or an array:
webix.ui({
    view:"datalayout",
    type:"space",
    rows:[
        { name:"$value", type:"header", template:"#month# 2016" },
        { name:"data", view:"list", template:"#income#, #count#" }
    ],
    data:[
        { month:"January", data:[{ income: 122342, count:12 }] },
        { month:"February", data:[{ income: 2342, count:2 }] }
    ]
});
webix.ui({
    view:"datalayout",
    id:"data",
    type:"space",
    rows:[
      { name:"$value", type:"header", template:"#month# 2016" },
      { name:"data", view:"list", autoheight:true, template:"#income#, #count#" }
    ],
    url:"data/data.js"
});

The details are given in the article Data Loading.

Operations with Data

You can perform usual operations with data of Data Layout, e.g. add, update, remove elements:

  • adding new elements into layout
$$("data").add({
  "month":"April", "data":[{"income":5894,"count":4}, {"income": 1458, "count":2}] 
});
  • getting and updating elements
var last = $$("data").getItem($$("data").getLastId());
if(last){
    last.month = "Hello, December";
    $$("data").updateItem(last.id, last)
}
  • removing elements
var first = $$("data").getFirstId();
if(first) 
 $$("data").remove(first);

Related sample:  Data Layout - CRUD operations

Complex Data Layout

You can also create a complex data layout with nested rows and columns. It can be implemented like this, for example:

Specify the layout you want to embed into the DataLayout:

var subconfig = {
    isolate:true,
    rows:[
        { view:"toolbar", elements:[
            { view:"button", value:"Add record", width: 120 },
            { view:"label", name:"month" }
        ]},
        { cols:[
            { id:"l1", name:"data", view:"list", template:"#income#" },
            { },
            { id:"l2", name:"data", view:"list", template:"#count#" }
        ]}
    ]
};

Define the config of the DataLayout and specify the sub-layout in the rows collection. Set the data source as well:

webix.ui({
    view:"datalayout",
    id:"data",
    type:"space",
    rows:[
        subconfig
    ],
    url:"data/data.js"
});

Related sample:  Data Layout - Complex structure operations

Back to top