[Solved] how to return Kendo.template from JavaScript funtion?

[Laksh]

How do I return kendo template from JavaScript function. The code below renders actual html instead of button

<script id="action-template1" type="text/x-kendo-template">
    <button class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Approve</button>
</script>
<script id="action-template2" type="text/x-kendo-template">
    <button class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Delete</button>
</script>

$grid.kendoGrid({
    dataSource: gridDS,
    autoBind: true,
    columnMenu: true,
    scrollable: false,
    sortable: false,
    filterable: {
        extra: false,
        operators: {
            string: {
                eq: "Is equal to",
                neq: "Is not equal to"
            }
        }
    },
    pageable: false,
    columns: [

        {
            template: createActionTemplate,
            title: "Action",
        },
    ]
});


function createActionTemplate(dataItem: any): any {
    if(dataItem.Status == "SUCCESS")
        return kendo.template($("#action-template1").html());
    else
        return kendo.template($("#action-template2").html());
}

[Alexander Valchev]

Hello Laksh,

I recommend you to return directly the template result.

function createActionTemplate(dataItem) {
    if(dataItem.Status == "SUCCESS")
        return kendo.template($("#action-template1").html())(dataItem);
    else
        return kendo.template($("#action-template2").html())(dataItem);
}

In order to avoid compiling the template every time you may save it as a variable:

var tmp1 = kendo.template($("#action-template1").html());
var tmp2 = kendo.template($("#action-template2").html());

//and call directly
return tmp1(dataItem);

I hope this information will help.

Regards,
Alexander Valchev
Telerik