Kendo Grid с высокой разрешающей способностью

Question

У меня проблема с изменением высоты сетки кендо. Кажется, что работает нестабильно, когда я изменяю нумерацию страниц или изменяю размер окна. Иногда сетка не корректируется и не оставляет дополнительного места после последней записи и перед нумерацией страниц Строки сетки имеют шаблон кендо, подобный следующему:

<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');   

}