CODEWITHSUNDEEP
kendo-uikendo-grid
user2117983
user2117983

Reputation: 359

How to display formatted HTML data in kendo ui grid column

I have added columns in the kendo ui grid dynamically.

I have a column named 'Formatted' with the data displayed in the below format.

<div class="class1"> <div>This is <strong>bold </strong>text.</div> <div> </div> <div>This is <em>italics</em> text.</div> <div> </div> <div>This is a <a href="http://google.com/">hyperlink</a>.</div> <div> </div> <div>Bulleted list:</div> <ul> <li>Bullet #1</li> <li>Bullet #2</li> <li>Bullet #3</li></ul></div>

I want the 'Formatted' column to display the data as below.

This is bold text.
 
This is italics text.
 
This is a hyperlink.
 
Bulleted list:

 Bullet #1

 Bullet #2

 Bullet #3

How can I do this.

Please anyone can help me on this.

Upvotes: 2

Views: 18796

Answers (3)

Rosidin Bima
Rosidin Bima

Reputation: 237

Another solution if you render the Grid using Ajax

Here is the solution:

@(Html.Kendo().Grid<YourModel>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.Name).ClientTemplate("#=convertToPlaintext(data.Name)#").HeaderTemplate("Name");
})
.HtmlAttributes(new { style = "height: 550px;" })
.Pageable( pageable => pageable
    .Input(true)
    .Numeric(false)
 )
.Sortable()
.Scrollable(scr=>scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("YouAction", "YourController").Type(HttpVerbs.Get))
    .ServerOperation(true)
 ))

Then create a function javascript to convert html content to plaint text like this:

function convertToPlaintext(htmlContent) {

    var div = document.createElement("div");
    div.innerHTML = htmlContent;
    return div.textContent;
}

Thanks

Upvotes: 0

daniil_
daniil_

Reputation: 980

You can use template property: template: "#=rawHtmlDataVariable#" like this

<div id="grid"></div>
  <script>
    $("#grid").kendoGrid({
      columns: [ {
        field: "name",
        template: "#=rawHtmlDataVariable#"
      }],
      dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

Upvotes: 0

OnaBai
OnaBai

Reputation: 40887

You should define a column template.

Example:

<script id="ob-template" type="text/x-kendo-template">
    <div class="class1"> 
        <div>This is <strong>bold </strong>text.</div>
        <div> </div>
        <div>This is <em>italics</em> text.</div>
        <div> </div>
        <div>This is a <a href="http://google.com/">hyperlink</a>.</div>
        <div> </div>
        <div>Bulleted list:</div>
        <ul>
            <li>Bullet #1</li>
            <li>Bullet #2</li>
            <li>Bullet #3</li>
        </ul>
     </div>
</script>

and then, when you define the columns use it:

$("#grid").kendoGrid({
  dataSource: ...,
  columns: [ 
    { field: "...", title: "...", template: $("#ob-template").html()}
  ]
});

Upvotes: 2

Related Questions