如何在页面加载时将Kendo网格高度设置为固定值

bha*_*kti 4 javascript telerik kendo-ui kendo-grid kendo-mobile

我正在尝试获取具有静态高度和宽度的剑道网格。当我分页时,它绝对不能改变高度和宽度(由于数据大小可变,当前它不能这样做)。如果数据增加,我应该提供滚动。

问题在于,当页面首次使用Data加载时,kendo网格未设置为该固定的高度和宽度。但是如果我调整窗口的大小,它将得到固定的高度并在Kendo Grid中提供Scroll选项

所以我可以在第一次加载时将剑道网格的高度设置为固定值

Kendo版本:v2014.1.318

码:

$("#ViewUnitContainerTracking").kendoGrid({
                        sortable: true,
                        height:"280px",

                        columns: [
                            {
                                field: "UnitCode",
                                title: "Unit",
                                width: "15%"
                            },

                             {
                                 field: "UnitName",
                                 title: "Unit Name",
                                 width: "35%"
                             },

                            {
                                field: "Status",
                                title: "St",
                                width: "5%",
                                template: $("#TemplateViewUnitTrackingStatus").text()
                            },

                             {
                                 field: "StartDate",
                                 title: "Start Date",
                                 //template: $("#TemplateViewUnitTrackingStartDate").text(),
                                 width: "15%",
                                 //type: "date"
                             },

                              {
                                  field: "EndDate",
                                  title: "End Date",
                                  //template: $("#TemplateViewUnitTrackingEndDate").text(),
                                  width: "15%",
                                  //type: "date"
                              },

                             {
                                 field: "AssessPrgress",
                                 title: "%OAP",
                                 width: "10%"
                             },
                             {
                                 field: "Status",
                                 title: "Status",
                                 hidden: true
                             }

                        ],
                        editable: false,
                        resizable: false,
                        mobile: true,
                        dataSource: data.UnitList
                    });
Run Code Online (Sandbox Code Playgroud)

HTML页面:

<div id="ViewUnitContainerTracking" style="padding-top:10px;">
</div>
Run Code Online (Sandbox Code Playgroud)

bha*_*kti 5

问题的答案是:

dataBound: function() {
    $('#ViewUnitContainerTracking .k-grid-content').height(280);
}
Run Code Online (Sandbox Code Playgroud)

将其添加到Kendo网格将解决此问题。作为“ 数据绑定之后”事件,我们可以设置Grid的自定义Css属性,因为在此事件之前设置了Grid动态高度。

  • 或者,您可以只在页面加载时调用** resize **方法:$(“#ViewUnitContainerTracking”)。data(“ kendoGrid”)。resize() (4认同)