Apply Template to Kendo Grid Dynamically

Here is some code which will show you how you can apply template for kendo grid view.

(1) For this post, i assume that you have kendo grid with datasource is already applied and you only need to apply template dynamically.

(2) while initializing kendo grid, give your name of the template like below
$('#grid').kendoGrid({
....
rowTemplate: kendo.template($("#template").html()),
....
});

your template "template" will be placed at your html view.
- so for this, whenever your page get load it will automatically bind this template for your individual item
- for this view, if you want to show only template not column title then mark "visible:false" or "hidden:true" or both in you columns so it will just hide your column title on top and show only the item template for each item.

(3) to change your template, find event wherever you want to apply another template and in that event apply below code

var _grid = $('#grid').data('kendoGrid');
_grid.options.rowTemplate = kendo.template($("#othertemplate").html());
_grid.refresh();


(4) so, wherever you want to apply another template just find grid and apply template then refresh grid will reflect your grid with new template applied on it.