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

4 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
    2312 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.

     
  3. Fabio
    Fabio avatar
    25 posts
    Member since:
    Nov 2013

    Posted 04 May 2020 in reply to Dimiter Madjarov Link to this post

    Hi, I tried this example, but in my case i get this error:
    Parser Error Message: Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed.

    Source Error:

    Line 103:columns.Bound(p => p.Addressee).Groupable(false).Title("Addressee");

    Line 104: columns.Bound(p => p.Remarks).Groupable(false).Title("Remarks");

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

    Line 106: }) Line 107: .DataSource(datasource => datasource

     

    there is any way to solve this issue?

  4. Patrick
    Admin
    Patrick avatar
    257 posts

    Posted 05 May 2020 Link to this post

    Hello Fabrizio,

    We have a troubleshooting article specific to this parsing error and a solution.   Please take a look, and I hope this helps resolve your error message.

    Regards,
    Patrick
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top