動態改變容器Kendo窗口上的Kendo Grid行的高度調整

Question

我有兩個問題。我在一個包含在Kendo窗口中的頁面上有一個網格。我需要增加/減少網格行的大小，以確保填充窗口的整個高度。我也在不同的頁面上有一個網格，它只是在Div內部，需要調整大小以適應文檔窗口大小調整容器的高度。

我有以下Kendo支持給我的代碼，但它沒有做我需要它做的事情。它只將網格設置爲其容器的100％。但是這會在行下留下空白區域。我想沒有空白區域，行要動態地改變它們的高度，以便它們全部適合其中之一的空間，並且在計算有多少行將適合於另一個窗口的大小之後動態地改變pageSize 。

其中一個網格是前十個網格，另一個是所有員工網格的列表。

$(window).resize(function() { 
     var gridElement = $("#grid"), 
      newHeight = gridElement.innerHeight(), 
      otherElements = gridElement.children().not(".k-grid-content"), 
      otherElementsHeight = 0; 

     otherElements.each(function(){ 
      otherElementsHeight += $(this).outerHeight(); 
     }); 

     gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight); 
    }); 

道歉的文字的數量，但我一直堅持這幾天，並希望給你儘可能多的信息。

編輯：水平調整大小作爲打算開箱即用。爲什麼高度有什麼不同？ ：S

EDIT2：下面是一個使用我網的代碼IM，這駐留在劍道窗口的內容部分

@(Html.Kendo().Grid<DataModels.UI.OperatorPickRatesChartModel>() 
        .Name("topTenPickersChart") 
        .Columns(columns => 
        { 
         columns.Bound(b => b.operatorId).Title("Operator Id"); 
         columns.Bound(b => b.averagePicksLastThirty).Title(" Average Picks Last Thirty"); 
        }) 
        .DataSource(dataSource => dataSource 
         .Ajax() 
         .Model(model => 
          { 
           model.Field(b => b.operatorId).Editable(false); 
           model.Field(b => b.averagePicksLastThirty).Editable(false); 
          }) 
          .Read("operatorTopTenPickRates", "DashBoard")   
         .Events(events => events.Error("error")) 
         .PageSize(10)       
        ) 
        .Filterable() 

）

Answer 1

對於下面的解決方案，你需要有內部的表使用100％面積（寬度和高度）的HTML元素。爲了得到它我要做的就是定義HTML爲：

<div id="container"> 
    <div id="grid"></div> 
</div> 

及以下CSS樣式：

#container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

不是，一旦調整窗口的大小，我們需要做一些數學...

$(window).resize(function() { 
    // Get container height 
    var containerH = $("#container").height(); 
    // Get Grid height 
    var tableH = grid.element.height(); 
    // Get Grid body height (the remaining is header and footer) 
    var bodyH = grid.table.height(); 
    // The new height of the body is: 
    grid.table.height(containerH - tableH + bodyH - 1); 
}); 

的jsfiddle出在這裏：http://jsfiddle.net/OnaBai/dB5CF/

編輯：如果您的網格位於劍道窗口內，那麼您必須：

1. 您不需要CSS定義。
2. 你並沒有調整$(window)而是kendoWindow，所以我會把這段代碼放入Kendo Window resize事件處理程序中。
3. 您需要爲Kendo窗口設置初始寬度。

所以，你的代碼應該是這樣的：在這裏

$("#container").kendoWindow({ 
    width : 400, 
    resize: function (e) { 
     console.log("resize", e); 
     var containerH = $("#container").height(); 
     var tableH = grid.element.height(); 
     var bodyH = grid.table.height(); 
     grid.table.height(containerH - tableH + bodyH - 1); 
    } 
}); 

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
     data : createRandomData(100), 
     pageSize: 10, 
     schema : { 
      model: { 
       fields: { 
        Id  : { type: 'number' }, 
        FirstName: { type: 'string' }, 
        LastName : { type: 'string' }, 
        City  : { type: 'string' } 
       } 
      } 
     } 
    }, 
    editable : false, 
    pageable : true, 
    columns : [ 
     { field: "FirstName", width: 90, title: "First Name" }, 
     { field: "LastName", width: 90, title: "Last Name" }, 
     { field: "City", width: 100 } 
    ] 
}).data("kendoGrid"); 

而且修改後的JS小提琴：http://jsfiddle.net/OnaBai/dB5CF/2/