Question

是否有人将Kendo UI网格加载到隐藏的div中（例如display:none;）？

我自己尝试过这样做的问题，并且最终会出现空格。 div返回屏幕后重建网格解决了问题。想知道如何在后台加载。

使用HTML5 / JS框架。

Answer 1

如果您按照以下方式执行此操作，不确定您遇到了哪些问题但似乎没有问题。

// initialize the grid as you are doing
$("#grid").kendoGrid({
    ...
});

// Show the grid
var grid = $("#grid").data("kendoGrid");
grid.wrapper.css("display", "block");

// Hiding the grid
var grid = $("#grid").data("kendoGrid");
grid.wrapper.css("display", "none");

摘录示例：

$(document).ready(function() {
  
  $("#show").on("click", function() {
    var grid = $("#grid").data("kendoGrid");
    grid.wrapper.css("display", "block");
  });
  
  
  $("#hide").on("click", function() {
    var grid = $("#grid").data("kendoGrid");
    grid.wrapper.css("display", "none");
  });
  
  
  $("#grid").kendoGrid({
    dataSource: {
      type: "odata",
      transport: {
        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      },
      schema: {
        model: {
          fields: {
            OrderID: { type: "number" },
            Freight: { type: "number" },
            ShipName: { type: "string" },
            OrderDate: { type: "date" },
            ShipCity: { type: "string" }
          }
        }
      },
      pageSize: 20,
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true
    },
    pageable: true,
    columns: [
      {
        field:"OrderID",
        filterable: false
      },
      "Freight",
      {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
      }, 
      {
        field: "ShipName",
        title: "Ship Name"
      },
      {
        field: "ShipCity",
        title: "Ship City"
      }
    ]
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<button class="k-button" id="show">Show</button>
<button class="k-button" id="hide">Hide</button>
<div id="grid" style="display: none"></div>

将Kendo UI Grid加载到隐藏的div中？

1 个答案: