将 Kendo UI 网格高度设置为包装器的 100%

Question

我知道有一种简单的方法可以通过他们的 API 设置 Kendo UI 网格的固定高度，但出于我们的特定需求，我需要让网格在其包装器的整个高度展开。

使用以下标记结构，我将.wrapper 设置为height:600px 我试图给.k-grid-contentheight:100%，但它没有扩展。 #grid 使用 height:100% 扩展为 100%，但我还需要扩展内部内容。我该如何做到这一点？

这里是演示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>

Answer 1

根据 Kendo 的一位技术支持团队的说法；迪莫迪莫夫。你应该设置一个容器的高度，里面的所有东西都应该设置为 100%（包括网格）。然后你手动调整文档准备好的内容高度和窗口大小。

他的例子见这里：

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

请参阅此处，使用 js 函数将包装器的高度设置为窗口高度。

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

基本上内容是通过以下方式调整大小的：

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);
}

包装器的大小为（您可能需要修改它以适合您的布局）：

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

文档就绪和窗口调整大小都调用：

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

相关css：

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}

Answer 2

你必须做两件事。

1. 调整页面大小时的$('.k-grid table')高度
2. 在grid的dataBound方法上调整$('.k-grid table')的高度

请在jsBin中查看http://jsbin.com/xorawuya/1/edit

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

还有这里

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

我减去的150 是窗口的高度减去网格页眉/页脚的高度。这可能在您的网站布局中有所不同。相应地调整它。

Answer 3

我创建了另一种解决方案，当您的 html 不同时，它不仅是网格，而且它上面的其他内容也不同。 JSFiddle 位于此处。

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"
  ]
});

我的解决方案中的关键是修改后的 resizeGrid 函数。没有这种修改会发生什么，如果用户向上滚动足够远，底部寻呼机就会丢失！通过检查以确保 newHeight-diff 大于 0，它可以防止此错误。

第二个 calcHeightsOfParentChildren 在传递有问题的网格元素时将计算除其自身之外的所有其他高度，以帮助计算放置寻呼机控件和网格的正确差异，使其真正占据 100% 并保持其 100% 的比例.

Answer 4

如果您不介意使用 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;
}

只需在k-grid 旁边添加任何k-grid-stretch-height-AXZ 类并使用像素数。