2013-10-18 173 views
0

我目前正在執行相同kendoui電網,以顯示以下內容: http://demos.kendoui.com/web/grid/index.html劍道UI電網自動高度

,我可以看到的問題是,電網並不具備自動高度在那裏,如果記錄不到10 ,電網仍處於同一高度。

反正當我們使用以前的版本

我使用下面的JavaScript,但仍無法正常工作試過我能解決這一點,因爲這一次沒有發生:

function resizeGrid() { 
     var gridElement = $("#grid"); 
     var dataArea = gridElement.find(".k-grid-content"); 

     var newGridHeight = $(document).height() - 350; 
     var newDataAreaHeight = newGridHeight - 65; 

     dataArea.height(newDataAreaHeight); 
     gridElement.height(newGridHeight); 

     $("#grid").data("kendoGrid").refresh(); 
    } 

    $(window).resize(function() { 
     resizeGrid(); 
    }); 

謝謝

回答

1

不知道我理解你的問題,因爲網格實際上有一個自動高度。如果在網格的定義中定義了一個屬性,說明網格應該具有的像素數量,則無論它具有5條還是50條記錄,它都將堅持到該高度。如果實際需要更多的空間,將添加一個滾動條,如果需要更少的空間,它將顯示空白空間。

在,你在你的問題的嘗試參照的例子:

$("#grid").kendoGrid({ 
    dataSource: { 
     data : createRandomData(20), 
     pageSize: 10 
    }, 
    height : 500, 
    groupable : true, 
    sortable : true, 
    pageable : { 
     refresh : true, 
     pageSizes: true 
    }, 
    columns : [ 
     { field: "FirstName", width: 90, title: "First Name" } , 
     { field: "LastName", width: 90, title: "Last Name" } , 
     { width: 100, field: "City" } , 
     { field: "Title" } , 
     { field : "BirthDate", title : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } , 
     { width: 50, field: "Age" } 
    ] 
}); 

,高度將是500像素。

-1

刪除高度:500

$("#grid").kendoGrid({ 
    dataSource: { 
     data : createRandomData(20), 
     pageSize: 10 
    }, 
    groupable : true, 
    sortable : true, 
    pageable : { 
     refresh : true, 
     pageSizes: true 
    }, 
    columns : [ 
     { field: "FirstName", width: 90, title: "First Name" } , 
     { field: "LastName", width: 90, title: "Last Name" } , 
     { width: 100, field: "City" } , 
     { field: "Title" } , 
     { field : "BirthDate", title : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } , 
     { width: 50, field: "Age" } 
    ] 
}); 
+0

爲了清晰起見,您應該正確格式化此代碼。 – pippin1289

0

您可以使用CSS爲了繪製一個網格,將保持其高度調整到集裝箱,以及圍繞考慮其他因素:

#grid { 
    /* chop the grid's height by 45px */ 
    height: calc(100% - 45px); 
} 

#grid .k-grid-content { 
    /* chop the grid content's height by 25px */ 
    height: calc(100% - 25px) !important; 
} 

這是在網格聲明(位於.js側)不使用'height'屬性的情況下完成的。

適合我。