How to Use External Template in kendo Grid

5 posts, 0 answers
  1. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 29 Apr 2015 Link to this post

    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>

  2. Laksh
    Laksh avatar
    25 posts
    Member since:
    Mar 2011

    Posted 29 Apr 2015 in reply to Laksh Link to this post

    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.
  3. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 30 Apr 2015 Link to this post

    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.

     
  4. Shawn
    Shawn avatar
    55 posts
    Member since:
    Jul 2011

    Posted 07 Mar 2018 in reply to Dimiter Madjarov Link to this post

    How can I apply this same approach to a column's .GroupHeaderTemplate property?
  5. Stefan
    Admin
    Stefan avatar
    2918 posts

    Posted 08 Mar 2018 Link to this post

    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.
Back to Top