Question

如何在剑道网格中获得可用高度？这意味着我正在动态地向网格添加项目，所以我需要动态高度的网格

Answer 1

您可以根据需要询问height（完整网格）或wrapper（网格内部）的tbody来查询它：

// 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());

重要提示：如果部分行被隐藏，您必须滚动查看它们，网格的主体可能大于网格本身。

实施例。

＆＃13;

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

＆＃13;

html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

＆＃13;

<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>

＆＃13;

如何在剑道网格中获得可用高度？

1 个答案: