How to Use External Template in kendo Grid

[Laksh]

I have defined external template and trying to use it in kendo as mentioned here

Howevere when page rendered i get error in kendo.all.min.js "0x800a138f - JavaScript runtime error: Unable to get property 'replace' of undefined or null reference". not sure what im doing wrong. 

Also i'm passing ID's to javascript functions, i had to use single quote around ID's so cshtml wont show error, is that correct?

<div>
    @(Html.Kendo().Grid<Detail>()
    .Name("assetImportDetail")
    .Columns(col =>
    {
        col.Bound(p => p.Cost);
        col.Bound(p => p.Status);
        col.Bound(p => p.FileName);
        col.Bound(p => p.FileID).ClientTemplate("#=myTemplate(data)#").Title("Action");
    })
    .AutoBind(true)
    .Pageable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read
            .Action("GetDetails", "MyDetail", new { ID = Model.ID })))
    )
</div>

 

<script>
    var myTemplate = kendo.template($('#actionTemplate').html());
</script>



<script id="actionTemplate" type="text/x-kendo-template">
    # if (Status == "Error") { #
    <button class="resolve-button" onclick="Download('#= ID1#','#= ID2#');">Resolve</button>
    # } else if (Status == "Ready") { #
    <button class="approve-button" onclick="Approve('#= lID1 #');">Approve</button>
    # } else if (Status == "Imported") { #
    <button class="remove-button" onclick="Remove('#= ID1 #','#= ID2#');">Remove</button>
    #}#
</script>

[Laksh]

i think i resolved it by changing the order of the script. It needs to be after the template declaration. However im still not able to figure out how to pass ID's as integer instead of string.

[Dimiter Madjarov]

Hello Laksh,

In this case you should remove the single quotes from the function parameter. Visual Studio will underline it as invalid, but in this case it is correct.
E.g.

<button class="remove-button" onclick="Remove(#= ID1 #)">Remove</button>

Regards,
Dimiter Madjarov
Telerik

 

 

[Shawn]

How can I apply this same approach to a column's .GroupHeaderTemplate property?

[Stefan]

Hello, Shawn,

When the ClientGroupHeaderTemplate is used, a function can be set to execute the additional logic and to return the desired HTML output:

columns.Bound(p => p.ProductName).ClientGroupHeaderTemplate("#=myTemplate(data)#")

<script>
    function myTemplate(data) {
        if (data.value === "Alice Mutton") {
            return "<button class='k-button'>Alice Mutton button</button>"
        }
        else {
            return "<button class='k-button'>Other button</button>"
        }
    }
</script>

I hope this is helpful.

Regards,
Stefan
Progress Telerik