设置Kendo UI网格高度100％的包装器
我知道有一种简单的方法可以通过API设置Kendo UI网格的固定高度，但是为了满足我们的特定需求，我需要让网格在其包装器的整个高度上展开。
使用以下标记结构，我将.wrapper设置为height:600px ，我试图给.k-grid-content height:100%但它不会扩展。 #grid以height:100%扩展到100％ height:100%但我也需要扩展内部内容。 我如何实现这一目标？
这是演示JS BIN
根据剑道的技术支持团队之一; 迪莫迪莫夫。 您应该设置一个容器的高度，内部的所有内容都应设置为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()); }
文档就绪和窗口resize调用：
$(window).resize(function() { resizeWrapper(); resizeGrid(); });
相关的CSS：
#grid { height: 100%; } #outerWrapper{ overflow: hidden; }
你必须做两件事。
- 调整页面大小调整时的
$('.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是窗口的高度减去网格页眉/页脚的高度。 这可能与您的网站布局有所不同。 相应地调整它。
我创建了另一个解决方案，当你的html不同时，它不仅仅是网格，还有其他内容。 JSFiddle位于这里。
HTML
hey there
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％的比率。
如果您不介意使用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类并使用像素数。