Форматированные данные HTML в столбце сетки Kendo

Привет, у меня есть сетка Kendo, созданная в jquery со следующим кодом:

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

Проблема:

Первый столбец Текст заметки будет иметь значения, которые будут содержать данные в формате HTML.

Для лучшей идеи ниже приведен пример:

Теперь данные отображаются как:

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

Но я хочу, чтобы данные отображались как:

First Name : Nitin
Second Name : Rawat

Кроме того, столбец "Заметка" будет отредактирован посредством встроенного редактирования, поэтому в режиме редактирования также я хочу, чтобы данные отображались как:

First Name : Nitin
Second Name : Rawat

Любая помощь будет высоко оценена.

ОТВЕТЫ

Ответ 1

Установите для атрибута encoded столбца значение false, чтобы отключить автоматическое кодирование HTML.

На странице doc:

Если установлено значение true, значение столбца будет закодировано в HTML до того, как оно будет отображается. Если установлено значение false, значение столбца будет отображаться как есть. По умолчанию значение столбца кодируется HTML.

Измененный код:

$('#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
        },
    })

РЕДАКТИРОВАТЬ: Так как разрыв строки должен быть сохранен при редактировании, возможно, вам нужно просто заменить теги <br /> символом прерывания строки. Таким образом, он будет отображаться как фактический разрыв строки в полях формы. Вот пример: jQuery javascript regex Заменить <br> с \n

Лучше сделать это, когда пользователь сначала отправит данные, но если это не вариант, вы можете заменить его в JS при отображении данных.