web-dev-qa-db-fra.com

Comment changer la hauteur de Kendo ui Grid

Comment puis-je changer la hauteur de la grille Kendo lorsque j'utilise des wrappers?

c#asp.net-mvc-3kendo-ui
43
Goran303

Je suppose que la méthode que vous recherchez est sous la configuration Scrollable (elle est là car une grille doit être scrollable si vous voulez qu'elle ait de la hauteur)

.Scrollable(scr=>scr.Height(230))
54
Petur Subev

Pour changer la hauteur dynamiquement

supprimer htmlattributes:

.HtmlAttributes(new { style = "height:600px;" })

Ajouter défilement avec auto:

.Scrollable(a => a.Height("auto"))

39
Muzammil Tamboli

Dans ceux fortement typés, utilisez pour une hauteur fixe rigide

.Scrollable(scrollable => scrollable.Height(100))

Dans Js après utilisation de la déclaration dataSource

$("#Grid").kendoGrid({

            dataSource: { },

            height: 450,

            pageable: {
                refresh: true,
                pageSizes: true
            },

            columns:
                [
                   ***
                ]
        });

Vous pouvez également lier votre grille pour les hauteurs minimum et maximum pour toutes les poutres que vous avez via CSS.

.k-grid .k-grid-content {
 min-height: 100px;
 max-height: 400px;
}

Ou vous pouvez spécifier une grille spécifique, vous remplacez la grille .k par l'ID de grille spécifique #YourGridName. J'espère que cela t'aides.

9
Mahib

HtmlAttributes() vous permettra d'ajouter des attributs au <div> qui contient les barres d'outils, la pagination, la table, etc.

TableHtmlAttributes() vous permettra d'ajouter des attributs uniquement à l'élément <table>

Tableau de configuration Exmaple à 750 pixels en ajoutant un attribut de style:

  @Html.Kendo().Grid(Model)
               .Name("Grid")
               .TableHtmlAttributes(new {style="height: 750px;"})
6
johlrich

Vous pouvez également utiliser des règles css externes pour cela, ce qui peut être préférable si votre grille est réutilisée (comme dans une vue partielle). Si vous fournissez un attribut de style ou de hauteur, Kendo les ajoute en ligne et ne peut donc pas être remplacé par une feuille de style externe. Parfois, vous le voulez, mais parfois non.

En utilisant la chaîne .Name() fournie à l'encapsuleur, il est facile d'écrire une règle css pour cibler l'en-tête ou le contenu.

#GridName .k-grid-content {
    height: 300px; /* internal bit with the scrollbar */
}

#GridName .k-grid-header-wrap tr {
    height: 75px; /* header bar */
}

Notez que le .k-grid-header-wrap la classe peut varier selon la façon dont vous initialisez la grille. De plus, vous devez cibler les balises tr ou th à l'intérieur de l'en-tête. Le style de l'en-tête entier (c'est généralement une balise div) conduit à des résultats incohérents. Certains navigateurs n'appliqueront pas la règle, certains navigateurs laisseront un artefact visible là où les frontières de la tr/th réelle commencent.

Oh, et je dois également dire que cette approche permet une flexibilité lors du changement entre une grille créée par wrapper MVC et une grille créée js régulière. Ou vous pouvez réutiliser la feuille de style entre différentes grilles.

4
Patrick M