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:          


        

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.