web-dev-qa-db-fra.com

Réglage de la hauteur de grille de Kendo UI 100% du wrapper

Je sais qu'il existe un moyen simple de définir la hauteur fixe d'une grille Kendo UI via son API, mais pour nos besoins spécifiques, je dois faire en sorte que la grille se développe en hauteur sur toute son enveloppe.

Avec la structure de balisage suivante, j'ai défini .wrapper sur height:600px.__ et j'ai essayé de donner .k-grid-contentheight:100% mais il ne se développe pas .#grid se développe à 100% avec height:100% mais j'ai besoin du contenu interne pour se développer également. Comment puis-je y arriver? 

Voici la démo JS BIN

<div class="wrapper">
    <div id="grid">
        <div class="k-grid-header"></div>
        <div class="k-grid-content"></div>
        <div class="k-grid-pager"></div>
    </div>
</div>
javascriptjquerykendo-uikendo-grid
12
Seong Lee

Selon l'une des équipes de support technique de Kendo; Dimo Dimov. Vous devez définir la hauteur d'un conteneur et tout ce qui se trouve à l'intérieur doit être défini sur 100% (y compris la grille). Ensuite, vous ajustez manuellement la hauteur du contenu lorsque le document est prêt et que vous redimensionnez la fenêtre.

Voir ici pour son exemple:

http://jsfiddle.net/dimodi/SDFsz/

Voir ici pour votre mise à jour avec une fonction js pour définir la hauteur du wrapper à la hauteur de la fenêtre.

http://jsbin.com/yumexugo/1/edit

Le contenu est essentiellement redimensionné avec:

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

et le wrapper est dimensionné avec (vous devrez peut-être le modifier pour l'adapter à votre mise en page):

function resizeWrapper() {
    $("#outerWrapper").height($('#body').innerHeight());
}

Document prêt et la fenêtre redimensionnent les deux appels:

$(window).resize(function() {
    resizeWrapper();
    resizeGrid();
});

Css pertinents:

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}
21
MattOG

Vous devez faire deux choses.

  1. Ajuster la hauteur de $('.k-grid table') sur la page redimensionner
  2. Ajustez la méthode $('.k-grid table') height sur dataBound de la grille

Veuillez le voir dans jsBin http://jsbin.com/xorawuya/1/edit

  $(window).resize(function() {
    var viewportHeight = $(window).height();
    $('#outerWrapper').height(viewportHeight);
    $('.k-grid table').height(viewportHeight-150);
  });

Et aussi ici

  dataBound: function(e) {
    $('.k-grid table').height($(window).height()-150);
  },

Le 150 que je soustrais est la hauteur de la fenêtre moins la hauteur de l'en-tête/du pied de grille. Cela pourrait être différent dans la mise en page de votre site Web. Ajustez-le en conséquence.

2
SajithNair

J'ai créé une autre solution qui fonctionne lorsque votre code HTML est différent, en ce sens que ce n'est pas uniquement la grille, mais tout autre contenu situé au-dessus. Le JSFiddle se trouve ici.

HTML

<div class="container">
  <div class="test">
    hey there
  </div>
  <div id="grid"></div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container{
  height:100%;
}
.test{
  height:100px;
}
html {
  overflow: hidden;
}

JS

function resizeGrid() {
  var gridElement = $("#grid");
  var dataArea = gridElement.find(".k-grid-content");
  var newHeight = gridElement.parent().innerHeight() - 2 -calcHeightsOfParentChildren(gridElement);
  var diff = gridElement.innerHeight() - dataArea.innerHeight();
  if((newHeight-diff)>0){
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff);
  }
}

function calcHeightsOfParentChildren(element){
    var children = $(element).parent().children();
  var height = 0;
  $.each(children, function( index, value ) {
    if($(value).attr("id") != $(element).attr("id")){
        height = height + $(value).height();
    }
    });
    return height;
}

$(window).resize(function() {
  resizeGrid();
});

$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
      model: {
        fields: {
          OrderID: {
            type: "number"
          },
          ShipName: {
            type: "string"
          },
          ShipCity: {
            type: "string"
          }
        }
      }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true
  },
  height: 250,
  filterable: true,
  sortable: true,
  pageable: true,
  dataBound: resizeGrid,
  columns: [{
      field: "OrderID",
      filterable: false
    },
    "ShipName",
    "ShipCity"
  ]
});

La clé de ma solution est la fonction resizeGrid modifiée. Sans cette modification, si l'utilisateur fait défiler l'écran assez loin vers le haut, le téléavertisseur du bas se perd! En vérifiant que newHeight-diff est supérieur à 0, cela évite cette erreur.

Lorsque l’élément de la grille en question est dépassé, toutes les autres hauteurs exceptées sont calculées, ce qui permet de calculer la différence correcte pour placer le contrôle de pagination et la grille afin qu’elle occupe réellement 100% et conserve son ratio de 100%.

1
Joseph Astrahan

Si cela ne vous dérange pas, utilisez IE8:

/* FULL HEIGHT GRID */
.k-grid.k-grid-stretch-height-full {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-full .k-grid-content {
    height: calc(100% - 103px) !important;
}
.k-grid.k-grid-stretch-height-nogroup {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-nogroup .k-grid-content {
    height: calc(100% - 72px) !important;
}
.k-grid.k-grid-stretch-height-simple {
    height: calc(100% - 90px) !important;
}
.k-grid.k-grid-stretch-height-simple .k-grid-content {
    height: calc(100% - 37px) !important;
}

Ajoutez simplement l'une des classes k-grid-stretch-height-AXZ à côté de k-grid et jouez avec les nombres de pixels.

0
Salar