Telerik Kendo ui grid displaying html cell instead of generated html control

Question

I am trying to use the new Kendo UI grid from asp.net mvc 3.

I am having a table the table is generated automatically from a controller in asp.net mvc 3.

And display it with Kendo.ui grid.

However, I am having the html code inside of the cells instead of the html controls

Example:

it display in the cell: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. instead of an input, the code in the View is @html.input

or <a href="/Admin/Edit">Edit</a> | <a href="/Admin/Details">Details</a> | <a href="/Adm instead of a link ( code in the View is @Html.actionLink)

How can I make it encode html code ?

This is my script:

$(document).ready(function() {
    $("#calendrierMatch").kendoGrid({

    });
});

Thanks

Answer 1

The KendoUI Grid automatically encodes the content of the grid, that's why you get the text <input type= ... instead of the actual input controll.

You can disable the encoding for a given column with using the encoded options (see documentation):

encoded: Boolean(default: true) Specified whether the column content is escaped. Disable encoding if the data contains HTML markup.

So you need something like:

 $(document).ready(function(){
      $("#grid").kendoGrid({
      //...
        columns: [
           {
               field: "Column containing HTML",
               encoded: false
           }
        ]          
      });
 });

Answer 2

in model binding kendo grid Razor Html Page use this code

@Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{
col.Bound(m => m.ID);
col.Bound(m => m.Name);
col.Template(@<text>
        @Html.Raw(HttpUtility.HtmlDecode( item.Text))
    </text>);
})