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

[Laksh]

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>

[Dimiter Madjarov]

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

 

 

[Fabio]

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?

[Patrick | Technical Support Engineer, Senior]

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