CODEWITHSUNDEEP
asp.net-mvc-3kendo-ui
dtjmsy
dtjmsy

Reputation: 2762

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

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

Upvotes: 10

Views: 16587

Answers (3)

Systematix Infotech
Systematix Infotech

Reputation: 2365

You need to add the template feature of kendo grid.

In the below code i have created a text box inside the cell of kendo grid.

 {
     field: "Total",
     title: "Total",
     width: "40px",
     template: "<input type='text'  class=\"quantity_total\"   id='txtTotal_${ItemId}'    
                name='txtTotal_${ItemId}' maxlength='8'    onkeypress = 'return 
                fnCheckNumeric_total(event,this.id)'  />"  
               
},

Upvotes: 0

Bahman Khalafi
Bahman Khalafi

Reputation: 131

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>);
})

Upvotes: 1

nemesv
nemesv

Reputation: 139798

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
           }
        ]          
      });
 });

Upvotes: 27

Related Questions