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

Question

有没有人将Kendo UI Grid加载到隐藏的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>