Initializing from HTML will stop working in Webix 7.0.
See also general rules of markup initialization that are described in separate article.
Initialization from HTML is a nice feature for those who work in HTML mainly. By the way, a similar technology is used within JQuery Mobile framework.
The page is divided into div blocks that house Webix components defined by their data-view attribute:
<div data-view="rows"> <!--layout-->
<div data-view="template" data-height="35"> My header</div> <!--template-->
</div>
To parse your markup correctly, remember that you should provide all HTML elements in one line. Do not separate them with newlines.
DIV "data" attributes set other properties of the component:
<div data-view="text" data-name="email" data-label="Email"></div>
In other words, you use the same properties as in JSON configuration, but prefix them with "data-".
Pay attention that while parsing from HTML, camelCase attributes must be replaced with dashed ones: "minWidth" => "data-min-width":
<div data-view="list" data-width="320" data-max-width="500" data-min-width="100">
#id#: #value#
<ul data-view="data">
<li data-id="9998">Item 1</li>
<li data-id="9999" class='myitem'>Item 2</li>
</ul>
</div>
Inner HTML of a DIV block defines visible text:
<div data-view="button" data-width="150">Button</div>
<div data-view="text" data-label="Phone">123456789</div>
<div data-view="template" data-height="35"> My header</div>
<div data-view="window" data-id="win1">
<div data-view="head">Test header</div>
...
</div>
Related sample: HTML Initialization:Window
<div data-view="list" data-url="data/data.json" data-select="true">
Package: #Package# (#Version#)
</div>
Related sample: HTML Initialization
<div data-view="layout" data-stack="cols">
<div data-view="template">Cell 1.1</div>
<div data-view="template">Cell 1.2</div>
</div>
Related sample: HTML Initialization: Nested Layouts
<div data-view="headerlayout" data-stack="cols">
<div data-view="body" data-header="Section A">
<div data-view="list" data-url="data/data.json"> #id#: #Package# </div>
</div>
<div data-view="body" data-header="Section B">
<div data-view="list" data-url="data/data.json"> #id#: #Package# </div>
</div>
</div>
Related sample: HTML Initialization: Accordion
By default, the sub items will be treated as rows for layouts and form and cols for toolbar.
<div data-view="toolbar"> <!--data-stack="cols"-->
<div data-view="button" data-width="150">Button</div>
<div data-view="label" data-label="Press the button to run App"></div>
</div>
Related sample: HTML Initialization
<div data-view="list">
<config name="type" height="50" width="200"></config>
#id#: #value#
<ul data-view="data">
<li data-id="9998">Item 1</li>
<li data-id="9999" class='myitem'>Item 2</li>
</ul>
</div>
Standard HTML is used for:
<form>
<input type="text" name="title" value="" placeholder="Book title" /><br/>
<textarea name="annotation" id="annotation" rows="4">some book annotation is here
</textarea><br/>
</form>
Such code can be easily turned into Webix HTMLForm component:
<form data-view="htmlform" data-id="formView">..
Related sample: HTML Initialization:HTML Form
<div data-view="list" data-width="320">
#id#: #value#
<ul data-view="data">
<li data-id="9998">Item 1</li>
<li data-id="9999" class='myitem'>Item 2</li>
</ul>
</div>
Note that inline data source is marked by data-view attribute with data value.
Related sample: HTML Initialization
Datatable and treetable columns are built from child DIVs of the main component container:
<div data-view="datatable" data-autoheight="true" data-width="400">
<div data-view="column" data-width="150" data-id="firstname">
First Name
</div>
<div data-view="column" data-width="150" data-id="lastname">
Last Name
</div>
...
</div>
Related sample: HTML Initialization: DataTable
When initialized from markup Webix pager should be placed into a separate DIV block while the master component should refer to it by its ID:
<div data-view="datatable" data-pager="mypager">
...
</div>
<div data-view="pager" data-id="mypager" group="10" size="3"></div>
Note that pager properties are not prefixed with "data-".
Related sample: HTML Initialization: DataTable with Pager
Webix TabView and Accordion are made of separate blocks, each of which featuring header with title and body with content inside.
In markup you need to place each block into a separate DIV with the attributes:
<div data-view="tabview">
<div data-view="body" data-header="List 1">
<div data-view="list" data-url="data/data.json"> #id#: #Package# </div>
</div>
<div data-view="body" data-header="Text 2">
<div data-view="template">Just some text here</div>
</div>
</div>
Related sample: HTML Initialization: Tabbar
<div data-view="accordion">
<div data-view="body" data-header="Section A">
<div data-view="list" data-width="320" data-url="data/data.json">
#id#: #Package#
</div>
</div>
<div data-view="body" data-header="Section B">
<div data-view="list" data-width="320" data-url="data/data.json">
#id#: #Package#
</div>
</div>
</div>
Related sample: HTML Initialization: Accordion
Chart axes are defined by config tags in HTML markup:
<div data-view="chart" data-type="stackedArea" data-color="#58dccd"
data-value="#sales#" data-alpha="0.7" data-url="data/chart.json">
<config name="xAxis" template="#year#"></config>
<config name="yAxis"></config>
</div>
Axis names are defined by name attributes while other attributes are not prefixed by "data-" and are the same as in JSON configuration.
If series are needed for the chart they are initialized via a separate config object:
<div data-view="chart" data-type="stackedArea" alpha="0.7"
eventRadius="5" data-url="data/chart.json">
<config name="xAxis" template="#year#"></config>
<config name="yAxis"></config>
<config stack='series'>
<config value="#sales#" color="#58dccd">
<config name="tooltip" template="#bottom#"></config>
</config>
<config value="#sales2#" color="#dc58cd">
<config name="tooltip" template="#bottom#"></config>
</config>
...
</config>
</div>
The attributes of series are not prefixed by "data-" and are the same as in JSON configuration.
Related sample: HTML Initialization: Chart
When initializing Webix window from markup, you need to remember the following things:
<div data-view="rows">
<!--layout config>-->
</div>
...
<div data-view="window" data-id="win1">
<div data-view="head">Test header</div>
<div data-view="body">
<div data-view="template">Cell 1.2</div>
</div>
</div>
webix.markup.init();
$$("win1").show();
Related sample: HTML Initialization:Window
If menu is initialized from markup it's vital to remember that its sub-menus should be as well initialized the same way as windows:
<div data-view="submenu" data-id="submenu1">
<ul data-view="data">
<li data-id="1.1" data-submenu="submenu3">Item 1.1</li>
<li data-id="1.2">Item 1.2</li>
</ul>
</div>
And then they should be included into the main menu (or other sub-menus) with the help of their submenu property (submenu ID should be specified):
<div data-view="menu" data-height="50">
<ul data-view="data">
<div data-view="menu">
<ul data-view="data">
<li data-id="1" data-submenu="submenu1">Item 1</li>
<li data-id="2" data-submenu="submenu2">Item 2</li>
</ul>
</div>
<li data-id="3">Item 3</li>
</ul>
</div>
Any level of nesting is possible.
Related sample: HTML Initialization: Menu
You can also initialize Combo and other selection widgets from HTML markup. The list of options should be provided without IDs in the config HTML element. IDs are automatically generated on the base of values.
<div data-view="combo">
<config stack="options">
<li>Item 1</li>
<li>Item 2</li>
</config>
</div>
Related sample: HTML Initialization: Combo
Back to top