Templates specify what data will be present in dataview and how. You can define multiple templates and switch them dynamically. Template is defined by the parameter type.
Template can be defined as a part of the constructor:
var view = new dhx.ui({ view:"dataview", container:"data_container", type:{ template:"#Package# : #Version#<br/>#Maintainer#", height:40 } })
or separately:
view.define("type",{ template:"#Package# : #Version#<br/>#Maintainer#" })
Anyway, in the code snippets above the data { Package:“a”, Version:“b”, Maintainer:“c”} will be rendered as
a : b <br/> c
There are several ways to define a template:
view.define("type",{ template:"#Package# : #Version#<br/>#Maintainer#" })
view.define("type",{ template:function(){ return obj.Package +"<br/>"+obj.Maintainer; } })
<textarea id="template_container" rows="5" cols="60"> #Package# : #Version# <br/>#Maintainer#</textarea> ... view.define("type",{ template:"html->template_container", })
view.define("type",{ template:"http->../common/template.html", })
dhx.Type(dhx.ui.dataview,{ name:"dataA", template:"#Package# : #Version#<br/>#Maintainer#", height:40 }); data = new dhx.ui({ view:"dataview", container:"data_container", type:"dataA" });
#property# - replaces with a value of the related property
view.define("type",{ template:"#a# - #b#" }) // a - b
{common.property} - replaces with a constant value from template
view.define("type",{ template:"#a# - {common.mydata}", mydata:25 }) // a - 25
{common.method()} - replaces with the result of the method call
view.define("type",{ template:"#a# - {common.mymethod()}", mymethod:function(obj){ return obj.b.toUpperCase(); } }) // a - B
#property?valueA:valueB# - trinary operator
view.define("type",{ template:"#a# - #flag?exist:not exist#" }) // a - not exist
Sometime you may need to change some parameter of template - as a result, the view will be rebuilt with new configuration.
view.customize({ height:100 });
If you define some property in template as {common.some} , then you may change it by using “customize” command at any time.
The item will have next assigned css style:
.dhx_dataview_default_item
If you'll specify “name” parameter it will be:
.dhx_dataview_{name}_item
For the selected state, the same item will have name of css class as:
.dhx_dataview_default_item_selected
In addition to normal template, component can have additional task-specific templates:
var view = new dhx.ui({ view:"dataview", container:"data_container", edit:true, type:{ template:"#Package# : #Version#<br/>#Maintainer#", templateEdit:"<input class='dhx_item_editor' bind='obj.Package'>", templateLoading:"Loading..." } });