[英]Kendo Grid high resizing issue
我有这个剑道网格高度调整问题。 当我更改分页或调整 window 的大小时,它似乎工作不一致。 有时网格不调整并在最后一条记录之后和分页之前留下额外的空间网格行有一个像这样的剑道模板:
<script id="template" type="text/x-kendo-template">
# var ClinicType = ItemType; #
<tr data-uid="#= uid #">
<td colspan="9">
<div class="pull-left" style="max-width:600px;">
<p><img src="#= clinicLookup(ItemType, 'toMarker') #" /> #= clinicLookup(ItemType,"toName") #</p>
<h4><strong>#= Title #</strong></h4>
<p>
<span>#: Address.Street #</span><br />
<span>#: Address.Zip #</span> <span>#: Address.City #</span>
</p>
<a href="@(Model.ContactPageUrl)?clinicId=#: Id# " class="btn btn-grey btn-details">@Html.Raw(Html.Resource("Mvc.ClinicFinder.ContactDetailsCF", "CustomResources"))</a>
</div>
<div class="pull-right pull-top systemsList">
# var clinicSystems = productsystems; #
<span>#= renderSystems(clinicSystems) #</span>
</div>
</td>
</tr>
</script>
要求是从网格中删除滚动条并每页最多显示 20 条记录。 由于模板,行可以具有不同的高度。 我调整了 function 的大小,如下所示:
function resizeGrid() {
var recordsHeight = 0;
$(".k-grid-content table tr").each(function () {
recordsHeight += parseInt($(this).outerHeight() + 18);
});
var tableHeight = recordsHeight;
// no results on filter
if (tableHeight < 100) {
tableHeight = 187;
}
$('.k-grid-content').css('height', tableHeight + 'px');
}
我这样称呼调整大小:
$(window).on('resize', function () {
console.log("Window on Resizing");
$("#clinicsList").data('kendoGrid').refresh();
resizeGrid();
});
grid = $("#clinicsList").data("kendoGrid");
grid.bind("page", function (e) {
resizeGrid();
});
我对定位元素的方式进行了一些更改,并且效果很好。 这是 function 的更改。 感谢@Asfan Shaikh 的帮助
function resizeGrid() {
var recordsHeight = 0;
$(".k-grid tr").each(function (i,e) {
console.log("Peido:", i, parseInt($(this).outerHeight()));
recordsHeight += parseInt($(this).outerHeight() + 18);
});
var tableHeight = recordsHeight;
// no results on filter
if (tableHeight < 100) {
tableHeight = 187;
}
$('.k-grid tbody').css('height', tableHeight + 'px');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.