Syncfusion JavaScript(ES5) 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(ES5) 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.
Syncfusion JavaScript(ES5) controls have two types of templates, such as:
Users can add templates to Syncfusion JavaScript(ES5) 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.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EJ2 JS Template Sample</title>
<script src="https://cdn.syncfusion.com/ej2/21.2.3/20.4.43/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/21.2.3/20.4.43/material.css" rel="stylesheet">
</head>
<body>
<div id="Grid"></div>
<script>
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');
</script>
</body>
</html>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">
<div class="template">${ShipCountry}</div>
</script>Here, the script template identifier (customTemplate) is assigned to the template property of the Grid control. Refer to the following code snippet.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EJ2 JS Template Sample</title>
<script src="https://cdn.syncfusion.com/ej2/21.2.3/20.4.43/dist/ej2.min.js" type="text/javascript"></script>
<link href="https://cdn.syncfusion.com/ej2/21.2.3/20.4.43/material.css" rel="stylesheet">
</head>
<body>
<div id="Grid"></div>
<script id="customTemplate" type="text/x-template">
<div class="template">${ShipCountry}</div>
</script>
<script>
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');
</script>
</body>
</html>