Comment changer la hauteur de la grid de Kendo ui

Comment changer la hauteur de la grid de Kendo lors de l’utilisation des wrappers?

    Je suppose que la méthode que vous recherchez est sous la configuration Scrollable (elle est là parce qu’une Grid doit être défilable si vous voulez qu’elle ait la hauteur)

    .Scrollable(scr=>scr.Height(230)) 

    Changer dynamicment la hauteur

    supprimer htmlatsortingbutes:

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

    Ajouter le défilement avec auto:

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

    En typé fortement utilisé 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 grid pour les hauteurs minimum et maximum pour toutes les structures que vous avez grâce à css.

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

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

    HtmlAtsortingbutes() vous permettra d’append des atsortingbuts à la

    qui contient les barres d’outils, la pagination, la table, etc.

    TableHtmlAtsortingbutes() vous permettra d’append des atsortingbuts uniquement à l’élément

    Exmaple table de réglage à 750px en ajoutant un atsortingbut de style:

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

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

    En utilisant la .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 la .k-grid-header-wrap peut varier selon la façon dont vous initialisez la grid. En outre, vous devez cibler les balises tr ou th à l’intérieur de l’en-tête. Styliser l’en-tête entier (c’est généralement une balise div) conduit à des résultats incohérents. Certains navigateurs n’appliquent pas la règle, certains navigateurs laisseront un artefact visible là où commencent les bordures du tr / th actuel.

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