如何在页面加载时将剑道网格高度设置为固定值
How to Set Kendo grid height to a fixed value on page load
我正在尝试获得一个具有静态高度和宽度的剑道网格。当我分页时,它绝对不能改变高度和宽度(由于数据大小不同,它现在这样做)。如果数据增加,我应该提供滚动。
问题是,当页面第一次加载数据时,剑道网格没有设置为固定的高度和宽度。但是如果我调整窗口的大小,它就会得到固定的高度,并在剑道网格中提供滚动选项
所以我可以在剑道网格第一次加载时将其高度设置为固定值
剑道版本: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
});
Html页面:
<div id="ViewUnitContainerTracking" style="padding-top:10px;">
</div>
问题的答案是:-
dataBound: function() {
$('#ViewUnitContainerTracking .k-grid-content').height(280);
}
将此添加到剑道网格将解决问题。在数据绑定事件之后,我们可以设置网格的自定义Css属性,因为网格动态高度是在该事件之前设置的。
我动态地这样做,将网格设置为100%,意味着减去引导程序页眉和页脚:
<script type="text/javascript">
var gridElement = $("#serviceGrid");
function resizeGrid() {
$("#serviceGrid").css("height", $(window).height() - $("#itheader").height() - $("#itfooter").height() - 2);
gridElement.data("kendoGrid").resize();
}
$(window).resize(function() {
resizeGrid();
});
</script>
"-2"是因为顶部和底部有两个1px边界。。
我发现这个更可靠的选项也适用于锁定/冻结列。您可以在窗口的调整大小事件处理程序中调用以下代码行
var availableHeight = 500; // Calculate this value based on space available in grid's parent container
$('#YOUR_GRID_ID').data('kendoGrid').setOptions({ height: availableHeight})
相关文章:
- 为img设置高度和宽度
- jQuery在.show期间设置高度动画('幻灯片')
- textarea根据内容js或jquery设置高度
- 如何设置高度:0
- 页脚在滚动底部时没有设置高度动画
- iFrame - 在 iFrame 中更改内容时自动设置高度
- jQuery 断头台插件 - 在哪里设置高度和宽度
- 如何防止在 Safari 中使用 javascript 设置高度后在页面加载时运行过渡
- 如何使用 javascript 使用 ::before 选择器为元素设置高度
- 溢出:即使设置高度也自动不起作用
- 根据 jQuery 中多个实例上的另一个元素高度设置高度
- extJs(设置高度和宽度)(以百分比表示)
- 设置高度动画时元素跳跃
- 设置高度'单击按钮时元素的s
- jQuery:设置高度<部分>达到所有孩子的身高
- ExtJs,从不同版本的iframe创建窗口,正确设置高度
- Internet Explorer 7框架,设置高度为100%
- 如何设置高度或填充在选择框(下拉框)为safari和chrome
- JQuery获取和设置高度
- 需要一些jQuery滑动框脚本的帮助,以设置高度等于文本