Question

我有这个剑道网格高度调整问题。 当我更改分页或调整窗口大小时，它似乎工作不一致。有时网格在最后一条记录之后和分页之前不会进行调整，并留出多余的空间。网格行具有一个kendo模板，如下所示：

<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')  #" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#= clinicLookup(ItemType,"toName") #</p>
                <h4><strong>#= Title #</strong></h4>
                <p>
                    <span>#: Address.Street #</span><br />
                    <span>#: Address.Zip #</span>&nbsp;<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 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();
});

Answer 1

我对目标元素的方式进行了一些更改，并且效果良好。这是具有更改的功能。感谢@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');   

}

Kendo Grid调整大小问题

1 个答案: