DHTMLX Docs & Samples Explorer

Index
dhtmlxDataView

## Templates

### Basic information

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:"#Package# : #Version#<br/>#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.define("type",{
            template:"#Package# : #Version#<br/>#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:"#Package# : #Version#<br/>#Maintainer#"
        });

### Template types

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

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

          data = new dhtmlXDataView({
             container:"data_container",
             type:"dataA"
          });

### Templates syntax

#property# - replaced with value of related property

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

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

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

{common.method()} - replaced with result of 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 ”#

### 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:"#Package# : #Version#<br/>#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

- template_edit -used for item during item editing process
- template_loading - used as stub while dynamic loading data from 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..."
               }
        });