Javascript 将剑道UI网格高度设置为包装的100%

我知道有一种简单的方法可以通过他们的API设置剑道UI网格的固定高度，但是为了我们的特殊需要，我需要使网格在包装器的整个高度上扩展

使用以下标记结构，我将

.wrapper

设置为

高度：600px

我试图给出

.k-grid-content

高度：100%

，但它没有扩展。

#网格

扩展到100%，高度为100%，但我也需要内部内容进行扩展。我如何做到这一点

这是演示

---

你必须做两件事

调整调整页面大小时的

$（'.k-grid table'）

高度

调整网格的数据绑定方法上的高度

请在jsBin中查看

还有这里

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

---

我要减去的

150

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

根据剑道的一个技术支持团队；迪莫·迪莫夫。您应该设置一个容器的高度，其中的所有内容都应该设置为100%（包括网格）。然后手动调整文档就绪时的内容高度和窗口大小

他的例子如下：

请参见此处，了解您的更新，其中使用js函数将包装高度设置为窗口高度

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

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

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

文档准备就绪和窗口大小调整两个调用：

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

相关css：

#grid {
  height: 100%;
}

#outerWrapper{
  overflow: hidden;
}

---

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

类，并使用像素数即可。

我创建了另一个解决方案，当您的html在某种意义上不只是网格，而是其上的其他内容时，该解决方案就可以工作。办公室就在这里

HTML

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

JS

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

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%的比率。

很好的解决方案。不要以为这会将网格高度调整为其内容的100%，而不是可用窗口大小的100%。

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

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

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