I would like to use an external template for a column in my grid.
@(
Html.Kendo().Grid<ViewModels.UserSummary>()
.Name(
"EmployeeGrid"
)
.Columns( columns => {
columns.Bound(c => c.FirstName);
columns.Bound(c => c.LastName);
columns.Bound(c => c.Email);
columns.Bound(c => c.LastLogin).Format(
"{0:dd-MMM-yyyy}"
);
columns.Bound(c => c.Active).Title(
"Active"
).ClientTemplate(
"myTemplate"
);
})
.DataSource(ds => ds.Ajax()
.PageSize(24)
.Read(r => r.Action(
"GetEmployees"
,
"Employee"
))
)
.Pageable()
.Sortable()
)
<script id="myTemplate" type="text/x-kendo-template">
<input type='checkbox' value='testing'
#= Active ? 'checked' : '' #
disabled
></input>
</script>
7 Answers, 1 is accepted
To achieve this you should first initialize the template and then pass it as a client template to the column. Here is a sample approach.
E.g.
<script id=
"columnTemplate"
type=
"text/x-kendo-template"
>
//template content
</script>
<script>
var
myTemplate = kendo.template($(
'#columnTemplate'
).html());
</script>
columns.Bound(p => p.Active).ClientTemplate(
"#=myTemplate(data)#"
);
Have a great day!
Regards,
Dimiter Madjarov
Telerik


@Dimiter,
I also needed this and your example works fine. However, I defined the 2 <script>'s further down in the view, below the Kendo MVC Grid configuration, and yet it still worked. I would think since the kendo.template() is run after the Kendo MVC grid setup that it would not work. Does the Kendo MVC Grid get run after <script>'s, or is this a timing thing and I got lucky?
Should the <script> that runs kendo.template() be executed before the Kendo MVC grid or does it matter? Thanks.

Hello Curt,
In this case the data is bound via ajax, so the client template will only be evaluated after the items are requested. This is why there should no be timing issues depending on the placement of the external script block.
Regards,Dimiter Madjarov
Telerik

HI
I have test the ClientTemplate() with kendo external template works perfect,
but Is there have any way to pass the custom arguments into kendo template script ?
EX.
<script id="columnTemplate" type="text/x-kendo-template">
//template content
#= myArg1 #
#= myArg2 #
</script>
columns.Bound(p => p.Active).ClientTemplate("#=myTemplate(data, 'myValue1', 'myValue2')#");
*myArg1 = 'myValue1'.
Best regards
Chris
It is possible to pass other arguments in the ClientTemplate in this way, however, I am not sure I understand the reasoning behind it since the arguments will be identical for each row in that column. In other words, they could simply be included in the JavaScript function instead.
Nonetheless, the arguments are passed on:
columns.Bound(p => p.Active).ClientTemplate(
"#=myTemplate(data, 'myValue1', 'myValue2')#"
);
<script>
function
myTemplate(data) {
console.log(arguments);
}
</script>
If this is not the desired result, please provide some more details about the desired outcome, so we can look into possible approaches to accomplish it.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik