Kendo Grid按行数自动调整大小

Question

无论窗口大小如何变化，如何在kendo网格中显示固定行数？无论窗口调整大小，我都需要显示10行。为了做到这一点，我需要重新计算行数并仅在网格内显示10行。我的要求是计算要在网格中正确显示的行。 （事实上​​，我在网上搜索，似乎找不到任何例子/文章，如果你有任何请与我分享）。我目前的解决方案在我看来没有错误，但仍然不正确??? 。有人可以帮我找错误并纠正我吗？此外，如果我在网格上方插入一些项目，则包装器和数据项（网格）将完全不正确。

我需要一些关于这个问题的见解和/或代码示例。非常感谢您的帮助。

我目前调整大小网格的代码如下：

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

function resizeWrapper() {
     $("#outerWrapper").height($('#body').innerHeight());
    }

并调用它们的功能：

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

这是我的数据源和架构：

 $(document).ready(function() {
    $(window).trigger("resize");
        $("#grid").kendoGrid({     
      dataSource: {
                            data: [

                              { userId: 11111, No: 1, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'testing', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
      { userId: 22340, No: 2, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'test0', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
      .....
      ],

                    schema: {
                        model: {
                            fields: {
                              userId: { editable: true },
                              date: { filterable: { ui: "datetimepicker"}},
                              isActive:false,
                              No: { editable: true }
                            }
                        }
                    },
                    pageSize: 10
                },

                sortable: true,
                reorderable: true,
                scrollable: true,
                resizable: true,
                filterable: true,
                columnMenu: true,
                pageable: {
                            input: true,
                            numeric: false
                        },               
                columns: [
                  { field: 'No' ,width: 50 },
    { field: 'userId', title: 'ID', template:"<span class=ul>#=userId#</span> </br> <span class='pie'>1/5</span>", width:60 }      ,  
                  { field: "isActive", 
            headerTemplate: '!',
            template: '<span class="k-icon k-i-circle Unicode: e308" style="color: green; font-size: 28px;"></span> </br> <div class="div1"></div>', filterable:false , width: 40  },
    ......              
    ]        
    });        
  });

这是我的剑道链接：http://dojo.telerik.com/aviQU/6

Answer 1

为什么不告诉网格使用10的页面大小？无需重新计算尺寸。

配置网格时设置数据源的页面大小。

或者你设置（CSS / JS）网格的高度导致它调整大小？