Kendo网格列中的格式化HTML数据

问题描述：

我在jquery中用以下代码创建了Kendo网格:

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

Kendo网格:

$('#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 column Note Text will be having values which will be containing HTML formatted data.

下面是一个更好的主意示例:

For a better idea below is an example:

现在，数据显示为:

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

任何帮助将不胜感激.

答

将列的encoded属性设置为false可禁用自动HTML编码.

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

在文档页面中:

如果设置为true，则列值将在其之前被HTML编码显示.如果设置为false，则列值将按原样显示. 默认情况下，列值是HTML编码的.

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.

更改的代码:

$('#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 Replace< br>与\ n

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

最好是在用户最初提交数据时执行此操作，但是，如果不能这样做，则可以在显示数据时在JS中替换它.

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.

Kendo网格列中的格式化HTML数据

相关推荐