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

Can you post the Javascript code where you create the kendoUI grid? — nemesv
– nemesv, Commented Jul 4, 2012 at 10:08
this is my script: $(document).ready(function() { $("#calendrierMatch").kendoGrid({ }); }); — dtjmsy
– dtjmsy, Commented Jul 4, 2012 at 11:46

nemesv · Accepted Answer · 2012-07-04 10:14:53Z

27

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

answered Jul 4, 2012 at 10:14

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

dtjmsy Over a year ago

Hi nemesv, thanks for your advice, I am using $("#grid").kendoGrid() to create my grid, the columns and datas are get directly from the table on the view ( with <thead> and <tbody> ), in order to use the encoded: false option, that means that for each time I need to declare all the columns for the table in the kendoGrid call ?

nemesv Over a year ago

Based on the documentation in the current version there is no other way to turn the encoding off globally. So I'm afraid you need to specify all the columns, and turn off encoding individually...

dtjmsy Over a year ago

I tried out the latest beta version, and I can get now the html rendered, however, cannot sort out the columns, even with the sortable: true option, I can see the icons up/down, but when clicking results nothing, have you seen anything similar ?

nemesv Over a year ago

I haven't tried the beta yet, and I don't know why is the sorting not working, but I think this is then a different question.

dtjmsy Over a year ago

Thanks anyway nemesv for your previous advice, it will help me out at one stage or another

|

Bahman Khalafi · Accepted Answer · 2014-09-26 01:34:51Z

1

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

answered Sep 26, 2014 at 1:34

Bahman Khalafi

1312 silver badges4 bronze badges

Comments

Yehor Androsov · Accepted Answer · 2023-10-31 11:48:45Z

0

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)'  />"  
               
},

edited Oct 31, 2023 at 11:48

Yehor Androsov

6,1862 gold badges30 silver badges56 bronze badges

answered Jan 22, 2014 at 9:45

Systematix Infotech

2,3751 gold badge16 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related