This is a migrated thread and some comments may be shown as answers.
How to add kendo-template in grid's column?
3 Answers 117 Views
This is a migrated thread and some comments may be shown as answers.
Laksh
Top achievements
Rank 1
Laksh asked on 23 Apr 2015, 09:33 PM

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>

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 24 Apr 2015, 09:00 AM

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.

 
0
Fabio
Top achievements
Rank 1
answered on 04 May 2020, 09:01 AM

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?

0
Patrick
Telerik team
answered on 05 May 2020, 06:30 PM

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.
Tags
Grid
Asked by
Laksh
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Fabio
Top achievements
Rank 1
Patrick
Telerik team
Share this question
or