Template in Syncfusion EJ2 JavaScript controls

3 Jul 202324 minutes to read

Syncfusion JavaScript controls are rendered with a pre-defined layout or structure that is used to define how the control should be rendered on the user interface. The user wants to customise the appearance of the control and add functionality that is specific to the needs of the application. Syncfusion JavaScript controls have the option to achieve this using template support. A template can contain a variety of elements, depending on the context in which it is being used.

Types of templates

Syncfusion JavaScript controls have two types of templates, such as:

String template
Script template
Function template

String template

Users can add templates to Syncfusion JavaScript controls by using string literals and JavaScript expressions. Using this approach, the template string is passed to the library’s template engine, which parses the string and generates the corresponding HTML elements along with the data bindings.

The template string can be added directly to the template property of the control. Refer to the following code snippet.

index.js
index.html
var grid = new ej.grids.Grid({
  columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
    { field: 'CustomerName', headerText: 'Customer Name', width: 125 },
    { headerText: 'ShipCountry', template: '<div>${ShipCountry}</div>', width: 125 },
  ],
  dataSource: [
    { OrderID: 10248, ShipCountry: "France", CustomerName: "Paul Henriot" },
    { OrderID: 10249, ShipCountry: "Germany", CustomerName: "Karin Josephs" },
    { OrderID: 10250, ShipCountry: "Brazil", CustomerName: "Mario Pontes" },
    { OrderID: 10251, ShipCountry: "France", CustomerName: "Mary Saveley" }
  ],
  width: 'auto',
  height: 359
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>        
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css" rel="stylesheet">

<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Script template

A script template is a type of template that uses a scripting language, such as JavaScript, to define the structure and layout of the content that is displayed in the control. These template elements can be defined in the script tag along with the unique identifier. The script template’s identifier needs to be mapped to the corresponding control’s template property along with the fragment identifier (#). Refer to the below code sample.

Add the below HTML template to the index.html file.

<script id="customTemplate" type="text/x-template">
    <tr>
        <td class="photo">
            ${EmployeeID}
        </td>
        <td class="details">
            <table class="CardTable" cellpadding="3" cellspacing="2">
                <colgroup>
                    <col width="50%">
                    <col width="50%">
                </colgroup>
                <tbody>
                    <tr>
                        <td class="CardHeader">First Name </td>
                        <td>${FirstName} </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Last Name</td>
                        <td>${LastName} </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Title
                        </td>
    
                        <td>${Title}
                        </td>
                    </tr>
                    <tr>
                        <td class="CardHeader">Country
                        </td>
                        <td>${Country}
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</script>

Here, the script template identifier (customTemplate) is assigned to the template property of the Grid control. Refer to the following code snippet.

index.js
index.html
var grid = new ej.grids.Grid({
    dataSource: employeeData,
    rowTemplate: '#customTemplate',
    columns: [
        { headerText: 'Employee ID', width: 150, textAlign: 'Center', field: 'OrderID' },
        { headerText: 'Employee Details', width: 300, field: 'EmployeeID' }
    ],
    height: 315
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>        
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css" rel="stylesheet">
    <script src="es5-datasource.js"></script>
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <script id="customTemplate" type="text/x-template">
        <tr>
            <td class="photo">
                ${EmployeeID}
            </td>
            <td class="details">
                <table class="CardTable" cellpadding="3" cellspacing="2">
                    <colgroup>
                        <col width="50%">
                        <col width="50%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <td class="CardHeader">First Name </td>
                            <td>${FirstName} </td>
                        </tr>
                        <tr>
                            <td class="CardHeader">Last Name</td>
                            <td>${LastName} </td>
                        </tr>
                        <tr>
                            <td class="CardHeader">Title
                            </td>
    
                            <td>${Title}
                            </td>
                        </tr>
                        <tr>
                            <td class="CardHeader">Country
                            </td>
                            <td>${Country}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </script>
    
    <div id="container">
        <div id="Grid"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Function template

The function template approach is compatible with the strict guidelines of Content-Security-Policy (CSP). In the application, JavaScript functions with string literals can be used to add templates in the Syncfusion JavaScript (ES5) controls. This approach eliminates the need for the unsafe-eval keyword in the meta tag of project pages. It is essential to convert all inline string and script templates into function templates that comply with the Content-Security-Policy (CSP) guidelines in order to avoid potential security risks and enhance the overall safety of the application.

Lets discuss about converting the existing string template and script template into a function template approach.

Convert the existing string template into function template

To convert the existing string template into function template, create a function template and define the template using template literals enclosed in backticks. Add the following function template to the index.html file.

var customTemplate = (data) => `<div class="template">${data.ShipCountry}</div>`

Here, the function template identifier (customTemplate) is assigned to the template property of the Grid control. Refer to the following code snippet.

index.js
index.html
//function template
var customTemplate = (data) => `<div class="template">${data.ShipCountry}</div>`

var grid = new ej.grids.Grid({
  columns: [
    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 125 },
    { field: 'CustomerName', headerText: 'Customer Name', width: 125 },
    { headerText: 'ShipCountry', template: customTemplate, width: 125 },
  ],
  dataSource: [
    { OrderID: 10248, ShipCountry: "France", CustomerName: "Paul Henriot" },
    { OrderID: 10249, ShipCountry: "Germany", CustomerName: "Karin Josephs" },
    { OrderID: 10250, ShipCountry: "Brazil", CustomerName: "Mario Pontes" },
    { OrderID: 10251, ShipCountry: "France", CustomerName: "Mary Saveley" }
  ],
  width: 'auto',
  height: 359
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>        
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css" rel="stylesheet">

<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Convert the existing script template into function template

To convert the existing script template into function template, create a function template and define the template using template literals enclosed in backticks. Add the following function template to the index.js file.

var customTemplate = (data) => `<tr>
    <td class="photo">
      ${data.EmployeeID}
    </td>
    <td class="details">
      <table class="CardTable" cellpadding="3" cellspacing="2">
        <colgroup>
          <col width="50%">
          <col width="50%">
        </colgroup>
        <tbody>
          <tr>
            <td class="CardHeader">First Name </td>
            <td>${data.FirstName} </td>
          </tr>
          <tr>
            <td class="CardHeader">Last Name</td>
            <td>${data.LastName} </td>
          </tr>
          <tr>
            <td class="CardHeader">Title</td>
            <td>${data.Title}</td>
          </tr>
          <tr>
            <td class="CardHeader">Country</td>
            <td>${data.Country}</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>`

Here, the function template identifier (customTemplate) is assigned to the template property of the Grid control. Refer to the following code snippet.

index.js
index.html
var customTemplate = (data) => `<tr>
    <td class="photo">
      ${data.EmployeeID}
    </td>
    <td class="details">
      <table class="CardTable" cellpadding="3" cellspacing="2">
        <colgroup>
          <col width="50%">
          <col width="50%">
        </colgroup>
        <tbody>
          <tr>
            <td class="CardHeader">First Name </td>
            <td>${data.FirstName} </td>
          </tr>
          <tr>
            <td class="CardHeader">Last Name</td>
            <td>${data.LastName} </td>
          </tr>
          <tr>
            <td class="CardHeader">Title</td>
            <td>${data.Title}</td>
          </tr>
          <tr>
            <td class="CardHeader">Country</td>
            <td>${data.Country}</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>`;

var grid = new ej.grids.Grid({
    dataSource: employeeData,
    rowTemplate: customTemplate,
    columns: [
        { headerText: 'Employee ID', width: 150, textAlign: 'Center', field: 'OrderID' },
        { headerText: 'Employee Details', width: 300, field: 'EmployeeID' }
    ],
    height: 315
});
grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">
<head>        
    <title>EJ2 Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css" rel="stylesheet">
    <script src="es5-datasource.js"></script>
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="Grid"></div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>