Formatted HTML data in Kendo grid column

Question

Hi I have a Kendo Grid created in jquery with following code:

Kendo Grid:

$('#divFolderNotes').kendoGrid({
        dataSource: data
        batch: true,
        columns: [
               { field: "Text", title: "Note Text" },
               { field: "CreatedByDisplayName", width: '190px', title: "Created By" },
               { field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
                 ],
        scrollable: true,
        sortable: true,
        reorderable: true,
        resizable: true,
        height: 250,
        selectable: "row",
        autoSync: true,
        editable: true,// "inline",
        navigatable: true,
        columnMenu: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
    })

The problem:

First column Note Text will be having values which will be containing HTML formatted data.

For a better idea below is an example:

Right Now the data is displayed as :

First Name : Nitin <br/> Second Name : Rawat

But I want the data to be displayed as :

First Name : Nitin
Second Name : Rawat 

Also , Note Text column will be edited through inline editing so during editing mode also I want the data to be displayed as :

First Name : Nitin
Second Name : Rawat 

Any help will be highly appreciated.

Answer 1

Set the encoded attribute of the column to false to disable automatic HTML encoding.

From the doc page:

If set to true the column value will be HTML-encoded before it is displayed. If set to false the column value will be displayed as is. By default the column value is HTML-encoded.

Changed code:

$('#divFolderNotes').kendoGrid({
        dataSource: data
        batch: true,
        columns: [
               { field: "Text", title: "Note Text", encoded: false },  #<------ Edit Here
               { field: "CreatedByDisplayName", width: '190px', title: "Created By" },
               { field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
                 ],
        scrollable: true,
        sortable: true,
        reorderable: true,
        resizable: true,
        height: 250,
        selectable: "row",
        autoSync: true,
        editable: true,// "inline",
        navigatable: true,
        columnMenu: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
    })

EDIT: Since the line break should be preserved when editing, maybe you should just replace the <br /> tags with a line break character. That way it will show as an actual line break in form fields. Here is an example: jQuery javascript regex Replace <br> with \n

It might be better to do this when the user submits the data initially, but, if that isn't an option you can replace it in JS when displaying the data.

Answer 2

You can try kendo template.

for these Please Try Following links

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

http://docs.telerik.com/kendo-ui/api/web/grid

hope this will help.