web-dev-qa-db-fra.com

Données HTML formatées dans la colonne de la grille Kendo

Salut, j'ai une grille de Kendo créée en jquery avec le code suivant:

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

Le problème:

La première colonne Texte de la note aura des valeurs qui contiendront des données au format HTML.

Pour une meilleure idée ci-dessous est un exemple:

À l'heure actuelle, les données sont affichées sous la forme:

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

Mais je veux que les données soient affichées comme:

First Name : Nitin
Second Name : Rawat

En outre, la colonne Texte de la note sera modifiée par le biais de la modification en ligne, donc pendant le mode de modification, je souhaite également que les données s'affichent comme suit:

First Name : Nitin
Second Name : Rawat

Toute aide sera grandement appréciée.

javascriptjquerykendo-uikendo-grid
16
user3040830

Définissez l'attribut encoded de la colonne sur false pour désactiver le codage HTML automatique.

Depuis la page doc :

Si la valeur est true, la valeur de la colonne sera codée en HTML avant d'être affichée. Si la valeur est false, la valeur de la colonne sera affichée telle quelle. Par défaut, la valeur de la colonne est codée en HTML.

Code modifié:

$('#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: Étant donné que le saut de ligne doit être conservé lors de l'édition, vous devriez peut-être simplement remplacer le <br /> balises avec un caractère de saut de ligne. De cette façon, il apparaîtra comme un saut de ligne réel dans les champs de formulaire. Voici un exemple: jQuery javascript regex Remplacer <br> par\n

Il peut être préférable de le faire lorsque l'utilisateur soumet les données initialement, mais, si ce n'est pas une option, vous pouvez le remplacer dans JS lors de l'affichage des données.

39
Jonathan

Vous pouvez essayer le modèle de kendo.

pour ceux-ci, veuillez essayer les liens suivants

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

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

j'espère que cela vous aidera.

3
sagar43