Question

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

使用以下标记结构，我将.wrapper设置为height:600px 我试图给.k-grid-content height: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

根据剑道的技术支持团队之一;迪莫迪莫夫。您应该设置一个容器的高度，内部的所有内容都应设置为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

你必须做两件事。

调整页面调整大小的$('.k-grid table')高度
在网格的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-stretch-height-AXZ旁边添加任意k-grid类，然后使用像素数字。

设置Kendo UI网格高度100％的包装器

4 个答案: