String Templates

String Templates

To customize data content and specify which data will be presented in DataGrid and how, you can use templates. Data templates are set in the related column by attribute template.

By value wrapped in the hash signs (e.g. "#title#") you refer to the definite property of a data item.

You can read about templates syntax in the article Templates.Syntax.

Specifying data template for a specific column

webix.grid({
  ...
  columns:[
    { id:"title", header:"Film title",    template:"<strong>#title#</strong>"},
    { id:"year",  header:"Release year" , template:"at #year#",}
  ]
});

Related sample:  Using String Templates

Templates can be used for presenting almost any content in Datagrid (anything that can be done through HTML can be placed in a DataGrid cell) such as: images, links, numbers, string, dates.

Table 1 Templates for different types of content

Content	Example of template
strings	template:"<strong>#title#</strong>" </td> </tr> <tr> <td>images</td> <td> template:"<img src="/docs/media/.imgs/#id#.jpg"/>" </td> </tr> <tr> <td>links</td> <td> template:"<a href='http://google.com?q=#title#'>#title#</a>" </td> </tr> </tbody>

Complex Templates

You can set custom template for a column by setting the template attribute as a function. This function accepts a raw data object and should return a text string or valid HTML.

webix.grid({
    columns:[
        {id:"title", header:"Film title"},
        {id:"votes", header:"Votes", template:function(obj){
          return obj.votes / 1.2547;
        }};
    ],
    ...
})

Related sample:  Converting Strings to Dates

Parameters of Template Function

This is the full list of a template function parameters for DataGrid:

• obj - each data item
• common - common built-in elements
• value - the value of the current cell
• col - the column configuration
• ind - the index of the current data item

Using custom templates

webix.grid({
    data:grid_data,
    columns: [
    {
        id: "title",
        template: function(obj, common, value, column, index) {
        return obj.title
        }
    }
    ]
});

For more on styling, read article Styling DataGrid

Combining templates and formats

If you want to use both template and format for the same column, you should include the formatting method into a template function:

webix.grid({
    columns:[
        {id:"votes", header:"Votes", template:function(obj, common){
            return "no more than "+ webix.i18n.numberFormat(obj.votes);
        }}
    ],
    ...
});

Adding buttons in templates

You can insert any custom html to the row elements, which gives an easy way for adding buttons or similar controls to DataGrid rows

webix.grid({
    columns:[
        {id:"votes", header:"Votes",
        template:"#votes#<input type='button' value='Details' class='details_button'>"}
    ],
    onClick:{
      details_button:function(id, ev){
            //will be called on button click
          some_custom_method(id.row, id.column);
        }
    }
    ...
});

Related sample:  DataGrid: Custom Handler

Built-in Templates

Through the template you can define common elements for the cells belonging to one and the same column, namely:

• checkboxes;
• radio buttons;
• “edit” icons;
• “trash” icons;
• sparklines.

webix.grid({
    ...
    columns:[
        { id:"ch1", header:"", template:"{common.checkbox()}"},
        { id:"ra1", header:"", template:"{common.radio()}"}
    ]
});

Related sample:  Checkbox and Radio in DataGrid

Learn more about checkboxes and radios in a separate article - Checkbox and Radio in DataGrid.

webix.grid({
    columns:[
        { id:"edit", header:"", template:"{common.editIcon()}"},
        { id:"trash", header:"", template:"{common.trashIcon()}"}
    ]
});

You can set built-in template via a function:

webix.grid({
    ...
    columns:[
      //for radio and checkbox
        { id:"ra1", template:function(obj, common, value, config){
             return common.radio(obj, common, value, config);
    }},
        //for editIcon and trashIcon
        { id:"edit", header:"", template:function(obj, common){
          return common.editIcon(obj, common);
        }}
    ]
});

As you can see, common.checkbox() and common.radio() functions take four parameters:

• item object with its properties from the dataset;
• common object with four methods:
  • common.checkbox(obj, common, value, config);
  • common.radio(obj, common, value, config);
  • common.editIcon(obj, common);
  • common.trashIcon(obj, common);
• value - current checkbox/radio state;
• config - column configuration object.