Kendo Grid high resizing issue

Question

I have this kendo grid height resizing issue. It seems to work inconsistently when I change pagination or resizing the window. Sometimes the grid don´t adjust and leave an extra space after the last record and before the pagination The Grid rows have a kendo template like this:

<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>

The requirements were to remove the scroll from the grid and display 20 records max per page. Because of the template the rows can have different height. I made a resizing function like this:

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

}

I´m calling the resize like this:

$(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

I´ve made some changes in the way I was targeting the elements and it worked. Here is the function with the changes. Thanks @Asfan Shaikh for the help

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

}