Kendo UI Grid - Column Template

Kendo UI grid will display the column data in table format. If we need to customize the display value for specific column we can use the template function. It allows us to define the template which renders the actual content for that column.

columns array can be defined like this:

columns: [
    { field: "AccountTitle", title: "AccountTitle"},
    { field: "TransactionType", title: "Type" },
    { field: "DatePosting", title: "Date", format: "{0:dd/MM/yyyy}" },
	{
		field: "Status",
		template: function (dataRow) {
			var linkHtml = "";
			if (dataRow.StatusNo == '1') {
				linkHtml = "<span style='color:green;'>Active</span>";
			}
			else {
				linkHtml = "<span style='color:red;'>Deactive</span<";
			}
			return linkHtml;
		},
		title: "Status"
	},
]

Note that Status column, we have defined a template function, which will accept the dataRow as parameter and return the final html as string, which the Kendo Grid will display as cell's content.

References:

• Kendo UI Grid - Column Template

Related Post(s):

• Kendo UI Grid - Nested child grids