如何在 kendo 网格中获得可用高度?
How can i get available height in kendo grid ?
如何在 kendo 网格 中获得可用高度?这意味着我正在向网格动态添加项目,所以我需要动态地调整网格高度
你可以通过询问wrapper
(完整网格)或tbody
(网格的内部主体)的height
来查询它,具体取决于你想要什么:
// Get a reference to the KendoUI Grid object
var grid = $("#grid").data("kendoGrid");
// Ask the height of the Grid
alert("Height of Grid: " + grid.wrapper.height())
// Ask the height of the body (total rows) of the Grid
alert("Height of the body of the Grid: " + grid.tbody.height());
重要提示:如果部分行被隐藏并且您必须滚动才能看到它们,则网格主体可能比网格本身更大。
例子。
$(document).ready(function() {
$("#show").on("click", function() {
var grid = $("#grid").data("kendoGrid");
alert("Grid: " + grid.wrapper.height() + "\n" +
"Body: " + grid.tbody.height());
});
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
pageable: true,
height: 300,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<button id="show" class="k-button">Show</button>
<div id="grid"></div>
如何在 kendo 网格 中获得可用高度?这意味着我正在向网格动态添加项目,所以我需要动态地调整网格高度
你可以通过询问wrapper
(完整网格)或tbody
(网格的内部主体)的height
来查询它,具体取决于你想要什么:
// Get a reference to the KendoUI Grid object
var grid = $("#grid").data("kendoGrid");
// Ask the height of the Grid
alert("Height of Grid: " + grid.wrapper.height())
// Ask the height of the body (total rows) of the Grid
alert("Height of the body of the Grid: " + grid.tbody.height());
重要提示:如果部分行被隐藏并且您必须滚动才能看到它们,则网格主体可能比网格本身更大。
例子。
$(document).ready(function() {
$("#show").on("click", function() {
var grid = $("#grid").data("kendoGrid");
alert("Grid: " + grid.wrapper.height() + "\n" +
"Body: " + grid.tbody.height());
});
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
pageable: true,
height: 300,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<button id="show" class="k-button">Show</button>
<div id="grid"></div>