How to add kendo-template in grid's column?

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

    Posted 23 Apr 2015 Link to this post

    I am binding a Kendo grid using Ajax binding. In the last column of the grid I want to show action buttons based on the status. In html I have a kendo template. But im not sure how to set kendo template in grid column using it's ID.

    I'm open for any other suggestions, if there are any other ways to do this.

    <div>
        @(Html.Kendo().Grid<BatchDetail>()
        .Name("grid")
        .Columns(col =>
        {
            col.Bound(p => p.ID);
            col.Bound(p => p.OriginalCost);
            col.Bound(p => p.Status);
           //how do I add new column here which is not bound to any property, but it need to render a template below 
        })
        .AutoBind(true)
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read
                .Action("GetData", "Detail", new { ID = Model.ID })))
        )
    </div>
     
    <script id="action-template" type="text/x-kendo-template">
        #if(Status == "Error") {#
        <button class="resolve-button"
                onclick="location.href='@Url.Action("DoAction", "Detail")?fileID=#: FileID #&ID=#: ID#'">
            Resolve
        </button>
       #}#
    </script>

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 24 Apr 2015 Link to this post

    Hello Laksh,

    If the template does not need to be an external one, you could use the following approach:

    columns.Template(@<text></text>).ClientTemplate(
        "# if (HasIcon == true) { #" +
            "<img src='" + Url.Content("~/Content/icons/") + "#= ProductID #.png' alt='#= ProductName # icon' />" +
        "# } else { #" +
            "#: ProductName #" +
        "# } #"
    );

    Otherwise you should first compile the template and then use it in the client template method:
    <script id="columnTemplate" type="text/x-kendo-template">
        ...
    </script>
      
    <script>
        var myTemplate = kendo.template($('#columnTemplate').html());
    </script>

    columns.Template(@<text></text>).ClientTemplate("#=myTemplate(data)#");

    I hope this information helps. Have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     

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

     
Back to Top