This is a migrated thread and some comments may be shown as answers.

How to Use External Template in kendo Grid

4 Answers 202 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Laksh
Top achievements
Rank 1
Laksh asked on 29 Apr 2015, 04:24 PM

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>

4 Answers, 1 is accepted

Sort by
0
Laksh
Top achievements
Rank 1
answered on 29 Apr 2015, 04:31 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2015, 12:26 PM

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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Shawn
Top achievements
Rank 2
answered on 07 Mar 2018, 09:04 AM
How can I apply this same approach to a column's .GroupHeaderTemplate property?
0
Stefan
Telerik team
answered on 08 Mar 2018, 12:15 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Laksh
Top achievements
Rank 1
Answers by
Laksh
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Shawn
Top achievements
Rank 2
Stefan
Telerik team
Share this question
or