Check out the programming example below to be able to rebuild the layout of your web app dynamically. The code can be used to redraw layouts or replace any existing objects. Feel free to use our coding samples or a snippet tool below to facilitate the process of web development.
webix.ui({
rows:[
{
view:"button", value:"Rebuild form",
inputWidth:150, align:"center",
click:rebuildForm
},
{
view:"form",
id:'myform',
elements:[
{view:"text", placeholder:"First Name"},
{view:"text", placeholder:"Last Name"},
{cols:[
{view:"button", value:"Cancel"},
{view:"button", value:"Sumbit", type:"form"}
]}
]
},
{
view:"button", value:"Replace grid",
inputWidth:150, align:"center",
click:replaceGrid
},
{id:"mylayout", rows:[
{ view:'toolbar', elements:[
{},
{view:"icon", width:40, icon:"mdi mdi-home"},
{view:"icon", width:40, icon:"mdi mdi-undo"},
{view:"icon", width:40, icon:"mdi mdi-redo"}
]},
{
view:'datatable',
id:'mydatatable',
scroll:false,
autoheight:true,
columns:[
{id:"rank", header:"", width:40},
{id:"title", header:"title", fillspace:true},
{id:"year", header:"Year", width:100},
{id:"votes", header:"Votes", width:100}
],
data:grid_data
}
]}
]
});
function rebuildForm(){
webix.ui([
{view:"datepicker", label:"Date"},
{view:"colorpicker", label:"Color"},
{view:"slider"}
], $$('myform'));
this.disable();
}
function replaceGrid(){
if ($$('mylayout') && $$('mydatatable'))
webix.ui({
view:"dataview",
template:"<b>#title#</b><br>#year#",
xCount:2,
type:{
height:83,
width:"auto"
},
data:grid_data
}, $$('mylayout'), $$('mydatatable'));
this.disable()
}
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.7.94/css/materialdesignicons.css" type="text/css" charset="utf-8">