Template Syntax

There are several ways to define a template:

HTML with Text

webix.grid({
  columns:[
    {
          id:"col1",
            header:"Column1",
            template:"#Package# : #Version#<br/>#Maintainer#"
        },
        // more columns
  ]
});

In the code snippet above, values within sharps are replaced with the related properties from data objects that can look like shown below:

// for next data
[
  {Package:"Webix Connector", Version:1.1, Maintainer:"Server side Team"},
  {Package:"Webix Scheduler", Version:3.5, Maintainer:"Scheduler Team"}
]
// the above template will generate text as
var template = "#Package# : #Version#<br/>#Maintainer#"
var text = "Webix Connector : 1.1 <br/>#Maintainer#"

Function

webix.grid({
  columns:[
    { id:"col1", template:function(obj){
          return obj.Package +"<br/>"+obj.Maintainer;
        }}
  ]
});

HTML Container

<textarea id="template_container" style="display:none">
#Package# : #Version# <br/>#Maintainer#</textarea>
<!-- instead of 'textarea' any appropriate HTML tag can be set -->

webix.grid({
  columns:[
    { id:"col1", header:"Column1", template:"html->template_container"},
  ]
});

External File

webix.grid({
  columns:[
    { id:"col1", header:"Column1", template:"http->../common/template.html"},
  ]
});