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

Posted 2023-05-07

【中文标题】将 Kendo UI 网格高度设置为包装器的 100%

【英文标题】：Setting Kendo UI grid height 100% of wrapper

【发布时间】：2014-05-02 13:37:17

【问题描述】：

我知道有一种简单的方法可以通过他们的 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>

【参考方案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;

【参考方案2】：

你必须做两件事。

调整页面大小时的$('.k-grid table')高度 在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 是窗口的高度减去网格页眉/页脚的高度。这可能在您的网站布局中有所不同。相应地调整它。

【参考方案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% 的比例.

【参考方案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 类并使用像素数。

【讨论】：

不错的解决方案。不要认为这会使网格的高度适应其内容的 100%，而不是可用窗口大小的 100%。