Check documentation for the latest version 6.0 of dhtmlxSuite Specifying Templates DHTMLX Docs

Specifying Templates

Basic Information

Templates define the way data is rendered inside of DataView. You can define multiple templates and switch between them dynamically.

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        height:40
    }
});

The { Package:"a", Version:"b", Maintainer:"c"} will be rendered as:

a : b <br/> c

A template can be defined as a part of the constructor (or not) as:

view.define("type",{
    template:"#Package# : #Version#<br/>#Maintainer#"
});

If you need to provide only a text string and don't need any extra properties, you can use the "template" property directly on the top level (i.e. don't use the type parameter):

view = new dhtmlXDataView({
    container:"data_container",
    template:"#Package# : #Version#<br/>#Maintainer#"
});

Types of Templates

JS string

view.define("type",{
    template:"#Package# : #Version#<br/>#Maintainer#"
});

Related sample:  Template from JS string

JS method

view.define("type",{
    template:function(){ return obj.Package +"<br/>"+obj.Maintainer; }
});

Related sample:  Template from JS function

HTML container

<textarea id="template_container" rows="5" cols="60">
#Package# : #Version#
<br/>#Maintainer#</textarea>
...
view.define("type",{
    template:"html->template_container",
})

Related sample:  Template from HTML container

HTML file

view.define("type",{
    template:"http->../common/template.html",
})

Related sample:  Template from HTML file

Named templates

dhtmlx.Type.add(dhtmlXDataView,{
    name:"dataA",
    template:"#Package# : #Version#<br/>#Maintainer#",
    height:40
});
 
data = new dhtmlXDataView({
    container:"data_container", 
    type:"dataA"
});

Related sample:  Named templates

Templates Syntax

"#property#" - replaced with a value of the related property

view.define("type",{
    template:"#a# - #b#"
})
// a - b

"{common.property}" - replaced with a constant value from the template

view.define("type",{
    template:"#a# - {common.mydata}",
    mydata:25
})
// a - 25

"{common.method()}" - replaced with the result of a method call

view.define("type",{
    template:"#a# - {common.mymethod()}",
    mymethod:function(obj){
        return obj.b.toUpperCase();
    }
})
// a - B

"#property?valueA:valueB#" - ternary operator

view.define("type",{
    template:"#a# - #flag?exist:not exist#"
})
// a - not exist

"{-obj" - replaced with #

Related sample:  Template syntax

Changing Parameters of Templates

Sometimes it can be useful to change some parameter of a template. As a result, the view will be repainted with new configuration.

view.customize({
    height:100
});

If you define some property in template as {common.some}, you will be able to change it any time by using the "customize" command.

Predefined Properties of Templates

view = new dhtmlXDataView({
    container:"data_container",
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        css:"some",
        width:120,
        height:40,
        margin:5,
        padding:0,
    }
});
  • template - (string) the template definition
  • height - (number) the item height. The default value - 115;
  • width - (number) the item width. The default value - 210;
  • margin - (number) the item margin. The default value - 0;
  • padding - (number) the item padding. The default value - 0;
  • border - (number) sets the border of the item container. The default value - 1;
  • css - (string) allows applying an additional css class to the template (see details below). The default value - 'default'.

Styling of Templates

If you want apply a custom CSS style to the template, use the following technique:

  1. Set the css property of the type parameter to some value, for example 'custom'
    view = new dhtmlXDataView({
        container:"data_container",
        type:{
            template:"#Package# : #Version#<br/>#Maintainer#",
            css:"custom",
        }
    });
  2. Define 2 css classes on the page with the following names (use the !important declaration to guarantee that the defined css property will be surely applied):
    • .dhx_dataview_[css]_item - applied to items in the unselected state
    • .dhx_dataview_[css]_item_selected - applied to items in the selected state
    .dhx_dataview_custom_item_selected{
        font-weight:bold !important;
    }
    .dhx_dataview_custom_item{
        font-size:12px !important;
    }

Note, the css property has the default value - 'default'. So, you can skip step 1 and define the css classes with the following names:

  • .dhx_dataview_default_item - applied to items in the unselected state
  • .dhx_dataview_default_item_selected - applied to items in the selected state

Special Templates

In addition to a standard template, dataview can have additional task-specific templates defined:

  • template_edit - applied to items during the Items editing process
  • template_loading - used as a stub during the Dynamic loading of data from the server
view = new dhtmlXDataView({
    container:"data_container",
    edit:true,
    type:{
        template:"#Package# : #Version#<br/>#Maintainer#",
        template_edit:"<input class='dhx_item_editor' bind='obj.Package'>",
        template_loading:"Loading..."
    }
});
Back to top