Templates

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

Template types

There are several ways to define a template:

HTML text
view.define("type",{
        template:"#Package# : #Version#<br/>#Maintainer#"
})
JS method
view.define("type",{
        template:function(){ return obj.Package +"<br/>"+obj.Maintainer; }
})
HTML container
<textarea id="template_container" rows="5" cols="60"> #Package# : #Version# <br/>#Maintainer#</textarea>
...
view.define("type",{
       template:"html->template_container",
})
External file
view.define("type",{
       template:"http->../common/template.html",
})
Named templates
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"
});

Templates syntax

#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

Changing parameters of templates

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.

Styling of template

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

Special templates

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..."
           }
});