Templates

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

Basic concepts

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 

Template types

There are several ways to define a template:

HTML text
var view = new dhx.ui({
        view:"dataview",
	template:"#Package# : #Version#<br/>#Maintainer#",
	url:"data.xml",
	datatype:"xml"
})
JS method
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; }
})
HTML container
<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"
})
External file
var view = dhx.ui({
        view:"dataview",
	template:"http->../common/template.html",
	url:"data.xml",
	datatype:"xml"
})
Named templates
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"
});
Advanced type - 'FreeSize'

The type places data presentation under your control.

Features:

  • Initially, there are no any borders between cells.
  • Height and width of cell is determined according to content size.
  • The desired borders can be set through HTML markup.
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", "...")

Templates syntax

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

Changing parameters of templates

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

Styling of template

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

Special templates

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