Templates define how data should be rendered inside 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 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#"
});

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

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

#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# - trinary operator

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

{-obj - replaced with ”#

Sometime it can be usefull to change some parameter of template - as result the view will be repainted with new configuration.

view.customize({
    height:100
});

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

    view = new dhtmlXDataView({
	container:"data_container",
	type:{
			template:"#Package# : #Version#<br/>#Maintainer#",
 
			css:"some",
			width:120,
			height:40,
			margin:5,
			padding:0,
        }
    });

• template - (any) the template definition
• height - (integer) the item height. The default value - 115;
• width - (integer) the item width. The default value - 210;
• margin - (integer) the item margin. The default value - 0;
• padding - (integer) the item padding. The default value - 0;
• border - (integer) 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'.

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
     
     

     <style>
     .dhx_dataview_custom_item_selected{
             font-weight:bold !important;
     }
     .dhx_dataview_custom_item{
             font-size:12px !important;
     }
     </style>

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

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

• template_edit - applied to items during item editing process
• template_loading - used as a stub while dynamic loading 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..."
           }
    });