KendoUI Grille - comment ajouter une classe à la table

Je suis de la génération d'un KendoUI de la Grille à l'aide d'ajax source de données. Le tableau est généré et par défaut n'a pas de classe. Pour le tenir en uniforme avec le reste du site, je voudrais ajouter une classe "interactif" pour elle.

$("#pending_documents").kendoGrid({
    dataSource: {
        transport: {
            read: "/get-data?type=1"
        },
        schema: {
            data: "data",
            total: "total"
        },
        pageSize: 2,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        reorderable: true
    },
    height: 500,
    filterable: {
        extra: false
/*
ui: "datetimepicker" //use Kendo UI DateTimePicker
*/
    },
    sortable: true,
    pageable: {
        pageSize: 2        },
    columns: [...]
});
    });

Je sais que je peux le faire à l'aide de JQuery.addClass() méthode, courir après la grille est générée, cependant s'il y a un moyen de réglage de la grille de configuration/configuration?

Merci d'avance.

InformationsquelleAutor Katya S | 2013-05-29
  1. 10

    Je suppose que vous n'avez pas d'autres choix que d'utiliser addClass(). Ne pouvez pas trouver quoi que ce soit sur leur documentation sur la définition d'une grille(et non de la colonne de la grille) htmlAttributes à l'aide intégrée-il bien en JS. J'ai essayé aussi sans succès. Sauf si vous déclarez comme ceci (C#):

    @(Html.Kendo().TabStrip()
    .Name("TabStrip")
    .HtmlAttributes( new { @class = "newclass"})
)

    Mais si vous en avez vraiment besoin de JS, alors vous aurez à faire comme ceci:

    $("#pending_documents").kendoGrid({
dataSource: {
   //code
  }
}).addClass("newclass");
    • Ouais, malheureusement, la classe doit être appliqué directement sur la table, donc ma seule option est de les ajouter après le tableau généré dans la façon dont je l'ai dit dans la question. Merci de mettre du temps dans l'enquête!
    InformationsquelleAutor Jude Duran
  2. 7

    Vous pouvez également utiliser le TableHtmlAttributes()

    @(Html.Kendo().Grid<Object>()
        .Name("dataGrid").TableHtmlAttributes(new { @class = "interactive" })
    InformationsquelleAutor christiandev
  3. 4

    La façon dont je le fais, c'est de l'ajouter à mes colonnes dans ma configuration, dans la attributes section. En fonction de la colonne que vous souhaitez définir la classe à effectuer les opérations suivantes:

    columns: [{ field: 'Name', title: 'Company Name', width: '250px',attributes: {
                    "class": "class1 class2"
                }},
           .
           .
           .
           .
           .
           .
           .]

    De cette manière, tous les éléments dans la colonne 'Nom' (dans mon cas) ont leurs classes ensemble jusqu'à l'initialisation de la grille. Pas besoin de faire supplémentaire jquery pour ajouter des classes. J'ai essayé au début. Faire du jquery (grâce addClass) a travaillé jusqu'à ce que j'ai essayé de faire le tri dans mes colonnes, puis les liaisons cassé (probablement à cause de la magie que nous faisions dans la mise en œuvre). Après l'avoir fait je l'ai fait ci-dessus, mon liaisons travaillé, même après le tri.

    • Salut DJ Burb serait de cette façon, vous permettent d'intégrer vos données via knockout.js et pas aJax? Merci
    • Pas sûr, n'ai pas essayé
    • Cela fonctionnait bien pour moi... le seul inconvénient est de ne peut pas utiliser un modèle... c'est à dire le suivant ne fonctionne pas .... modèle: '#=Nom#', attributes: {'class': 'ui-icon arrowthick-2-n-s"}, ....
    InformationsquelleAutor DJ Burb
  4. 2

    Vous pouvez le faire en définissant une catégorie de l'élément d'origine, Vous avez utilisé, comme:

    <div id="pending_documents" class="your-class-name"> </div>
    InformationsquelleAutor Serhiy Kozhevnikov