Please note, throughout the article you'll see examples that relate to dataview. If you use a different component that supports mentioned functionality, just replace dataView with the appropriate component (e.g. view:“list”).
Related sample: 06_grid/02_templates.html
Templates is applicable to all the components that operate on data (e.g. list, grid) and specify what data will be presented in component and how. You can define multiple templates and switch between them dynamically.
Template is defined by the parameter type.
You can define template as a part of constructor:
var view = new dhx.ui({ view:"dataview", template:"#Package# : #Version#<br/>#Maintainer#", url:"xml/data.xml", datatype:"xml" })
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:
var view = new dhx.ui({ view:"dataview", template:"#Package# : #Version#<br/>#Maintainer#", url:"data.xml", datatype:"xml" })
var view = new dhx.ui({ view:"dataview", template:function(obj){ return obj.Package +"<br/>"+obj.Maintainer; }, url:"data.xml", datatype:"xml" }) view.define("type",{ template:function(){ return obj.Package +"<br/>"+obj.Maintainer; } })
<textarea id="template_container" style="display:none"> #Package# : #Version# <br/>#Maintainer#</textarea> // instead of 'textarea' can be any appropriate HTML tag ... var view = dhx.ui({ view:"dataview", template:"html->template_container", url:"data.xml", datatype:"xml" })
var view = dhx.ui({ view:"dataview", template:"http->../common/template.html", url:"data.xml", datatype:"xml" })
dhx.Type(dhx.ui.dataview,{ name:"dataA", template:"#Package# : #Version#<br/>#Maintainer#", height:40 }); var view = new dhx.ui({ view:"dataview", type:"dataA", url:"data.xml", datatype:"xml" });
The type places data presentation under your control.
Features:
var view = new dhx.ui({ view:"dataview", type:"FreeSize", template:"..."// here you should specify data for loading and the desired borders (if required) }) //or view.define("type","FreeSize"); view.define ("template", "...")
#property# - replaced with a value of the related property
var view = new dhx.ui({ view:"dataview", template:"#Package#-#Version#:#Maintainer#" ... })
{common.property} - replaced with a constant value from template
var view = new dhx.ui({ view:"dataview", template:"#Package#-{common.mydata}:#Maintainer#", type:{ mydata:25//any name } ... })
{common.method()} - replaced with the result of the method call
var view = new dhx.ui({ view:"dataview", template:"#Package# - {common.mymethod()}:#Maintainer#", type:{ mymethod:function(obj){return obj.Version.toUpperCase();}//any name of method } ... })
#property?valueA:valueB# - trinary operator
var view = new dhx.ui({ view:"dataview", template:"#Package# - {obj.Version?#Version#:unknown}", ... })
Sometimes, 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.
var view = new dhx.ui({ view:"dataview", template:"#a#-{common.mydata}:#c#", type:{ mydata:30//any name } ... }) view.customize({ mydata:300 });
The item will have next assigned css style:
.dhx_dataview_default_item// for other components replace dataview with the appropriate component, e.g. for list - .dhx_list_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
Applicable just to dataView.
In addition to normal template, component can have additional task-specific templates:
var view = new dhx.ui({ view:"dataview", edit:true, type:{ template:"#Package# : #Version#<br/>#Maintainer#", templateEdit:"<input class='dhx_item_editor' bind='obj.Package'>", templateLoading:"Loading..." } });