Templates are describing how the data rendered inside data-view. You can define multiple templates and switch between them dynamically.
view = new dhtmlXDataView({ container:"data_container", type:{ template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}", height:40 } });
the { Package:“a”, Version:“b”, Maintainer:“c”} will be rendered as
a : b <br/> c
Template can be defined as part of constructor or later as
view.config("type",{ template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}" })
If you need to defin only text string and need not any extra properties, you can use “template” property directly on top level
view = new dhtmlXDataView({ container:"data_container", template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}" });
view.config("type",{ template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}" })
view.config("type",{ template:function(){ return obj.Package +"<br/>"+obj.Maintainer; } })
<textarea id="template_container" rows="5" cols="60"> {obj.Package} : {obj.Version} <br/>{obj.Maintainer}</textarea> ... view.config("type",{ template:"html#template_container", })
view.config("type",{ template:"http#../common/template.html", })
dhtmlx.Type.add(dhtmlXDataView,{ name:"dataA", template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}", height:40 }); data = new dhtmlXDataView({ container:"data_container", type:"dataA" });
{obj.property} - replaced with value of related property {common.property} - replaced with constant value from template {common.method()} - replaced with result of method call {obj.property?valueA:valueB} - trinary operator {-obj - replaced with ”{obj”
view.config("type",{ template:"{obj.a} - {obj.b}" }) // a - b
view.config("type",{ template:"{obj.a} - {common.mydata}", mydata:25 }) // a - 25
view.config("type",{ template:"{obj.a} - {common.mymethod()}", mymethod:function(obj){ return obj.b.toUpperCase(); } }) // a - B
view.config("type",{ template:"{obj.a} - {obj.flag?exist:not exist}" }) // a - not exist
Sometime it can be usefull to change some parameter of template - as result the view will be repainted with new configuration.
view.customize({ height:100 });
If you will define some property in template as {common.some} , then you will be able to change it in any time by using “customize” command.
view = new dhtmlXDataView({ container:"data_container", type:{ template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}", css:"some", width:120, height:40, margin:5, padding:0, } });
The item will have next css style assigned
.dhx_dataview_default_item
If you will specify “name” parameter it will be
.dhx_dataview_{name}_item
In selected state, the same item will have css class name as
.dhx_dataview_default_item_selected
In addition to normal template, component can have additional task-specific templates
view = new dhtmlXDataView({ container:"data_container", edit:true, type:{ template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}", template_edit:"<input class='dhx_item_editor' bind='obj.Package'>", template_loading:"Loading..." } });