16

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.

2 Answers2

41

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.

Community
  • 1
  • 1
Jonathan
  • 5,495
  • 4
  • 38
  • 53
  • Hey Jonathan Thanks for answering , It solves the displaying problem but while editing, it again shows those br tags. –  Mar 20 '14 at 10:34
  • Are you using an form field or textarea? Unless you are using a WYSIWYG editor field, or similar the browser is never going to render HTML in your text field. – Jonathan Mar 20 '14 at 10:36
  • I think you would be best off to replace the `
    ` with `\n`. That way new lines will render in a browser's form field.     – Jonathan Mar 20 '14 at 10:36
  • @NitinRawat, I added more details on both. – Jonathan Mar 20 '14 at 10:42
  • Hey Jonathon thanks for your reply: but it will be a big hack of changing the
    to \n as then I have to convert it back for the updation purpose as I have to save the HTML string     –  Mar 20 '14 at 10:45
  • If your the edit field isn't capable of rendering HTML, then I don't think there is any other way to do it. What happens to the value when a user edits the field, and then presses enter? Does it add in a line break, add in a `
    ` or does it end the inline editing?     – Jonathan Mar 20 '14 at 10:49
  • So, if you change it so that pressing enter adds a line break or `
    ` how do you expect the user to end the inline edit? Click a button? Hello edge cases!     – Jonathan Mar 20 '14 at 10:54
  • What I want is that on editing or on adding a new row , in both cases the Note text cell on encountering a enter should start a new line but when saving into the database ,on click at any other cell, the data should contain the
    tags for every enter that is made.     –  Mar 20 '14 at 10:59
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/50119/discussion-between-nitin-rawat-and-jonathan) –  Mar 20 '14 at 11:02
3

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.

sagar43
  • 3,341
  • 3
  • 29
  • 49