DHTMLX Docs & Samples Explorer

Templates

Templates are describing how the data rendered inside data-view. You can define multiple templates and switch between them dynamically.

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

the { Package:“a”, Version:“b”, Maintainer:“c”} will be rendered as

  a : b <br/> c

Template can be defined as part of constructor or later as

    view.config("type",{
        template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}"
    })

If you need to defin only text string and need not any extra properties, you can use “template” property directly on top level

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

Template types

HTML text
    view.config("type",{
        template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}"
    })
JS method
    view.config("type",{
        template:function(){ return obj.Package +"<br/>"+obj.Maintainer; }
    })
HTML container
      <textarea id="template_container" rows="5" cols="60">
{obj.Package} : {obj.Version}
<br/>{obj.Maintainer}</textarea>
...
    view.config("type",{
        template:"html#template_container",
    })
External file
    view.config("type",{
        template:"http#../common/template.html",
    })
Named templates
      dhtmlx.Type.add(dhtmlXDataView,{
         name:"dataA",
         template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}",
         height:40
      });
 
      data = new dhtmlXDataView({
         container:"data_container", 
         type:"dataA"
      });

Templates syntax

{obj.property} - replaced with value of related property {common.property} - replaced with constant value from template {common.method()} - replaced with result of method call {obj.property?valueA:valueB} - trinary operator {-obj - replaced with ”{obj”

    view.config("type",{
           template:"{obj.a} - {obj.b}"
    })
// a - b
    view.config("type",{
           template:"{obj.a} - {common.mydata}",
           mydata:25
    })
// a - 25
    view.config("type",{
           template:"{obj.a} - {common.mymethod()}",
           mymethod:function(obj){
              return obj.b.toUpperCase();
           }
    })
// a - B
    view.config("type",{
           template:"{obj.a} - {obj.flag?exist:not exist}"
    })
// a - not exist

Changing parameters of templates

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.

Predefined properties of template

    view = new dhtmlXDataView({
	container:"data_container",
	type:{
			template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}",
 
			css:"some",
			width:120,
			height:40,
			margin:5,
			padding:0,
        }
    });
  • template - template definition
  • height - height of the item, int
  • width - width of the item, int
  • margin - margin of the item, int
  • padding - padding of the item, int
  • css - name, which will be used for styling of item, has “default” as default value

Styling of template

The item will have next css style assigned

  .dhx_dataview_default_item

If you will specify “name” parameter it will be

  .dhx_dataview_{name}_item

In selected state, the same item will have css class name as

  .dhx_dataview_default_item_selected

Special templates

In addition to normal template, component can have additional task-specific templates

    view = new dhtmlXDataView({
      container:"data_container",
      edit:true,
      type:{
               template:"{obj.Package} : {obj.Version}<br/>{obj.Maintainer}",
               template_edit:"<input class='dhx_item_editor' bind='obj.Package'>",
               template_loading:"Loading..."
           }
    });