web-dev-qa-db-ja.com

剣道グリッド列のフォーマットされたHTMLデータ

こんにちは、jqueryで次のコードで作成された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
        },
    })

問題：

最初の列Note Textには、HTML形式のデータを含む値が含まれます。

以下のより良いアイデアは例です：

現在、データは次のように表示されます。

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

しかし、私はデータを次のように表示したいです：

First Name : Nitin
Second Name : Rawat

また、メモテキストの列はインライン編集で編集されるため、編集モード中は次のようにデータを表示する必要があります。

First Name : Nitin
Second Name : Rawat

どんな助けも大歓迎です。

javascriptjquerykendo-uikendo-grid
15
user3040830

自動HTMLエンコードを無効にするには、列のencoded属性をfalseに設定します。

ドキュメントページ から：

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

EDIT：編集時に改行を保持する必要があるため、おそらく<br />タグに改行文字があります。そうすれば、フォームフィールドに実際の改行として表示されます。以下に例を示します。 jQuery javascript regex <br>を\ nに置き換えます

ユーザーが最初にデータを送信するときにこれを行う方が良いかもしれませんが、それがオプションでない場合は、データを表示するときにJSでそれを置き換えることができます。

37
Jonathan

剣道テンプレートを試すことができます。

これらのリンクをたどってみてください

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

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

これが役立つことを願っています。

3
sagar43