Grid footer displayed "outside" the grid when data is loaded

[Sven]

Hi,

I am using a grids with fixed height and a footer row that shows the number of elements. When the data is loaded, the footer row is displayed "outside" the grid (directly below the grid) and will move into the grid when loading is finished.

With that effect, all my grids are displayed a bit larger first, and will be "re-sized" to the height I specified when the data is loaded. That doesn't look nice.

Is there any way to change this behavior? I would like to have the footer row at its final location from the beginning.

This is how I create my grid on the cshtml page:

@(Html.Kendo().Grid<WebSAT.Models.ServiceModel>()
    .Columns(c =>
    {
        c.Bound(m => m.Id)
            .Filterable(false)
            .Groupable(false)
            .Title(Resources.Id)
            .HeaderTemplate("<strong>" + Resources.Id + "</strong></div>");
        c.Bound(m => m.Name)
            .Filterable(false)
            .Groupable(false)
            .Title(Resources.Name)
            .HeaderTemplate("<strong>" + Resources.Name + "</strong>");
        c.Bound(m => m.Type)
            .Filterable(true)
            .Groupable(true)
            .Title(Resources.Type)
            .HeaderTemplate("<strong>" + Resources.Type + "</strong>");
        c.Bound(m => m.DisabledText)
            .Filterable(true)
            .Groupable(true)
            .Title(Resources.Disabled)
            .HeaderTemplate("<strong>" + Resources.Disabled + "</strong>")
            .ClientFooterTemplate("<strong>" + Resources.GridFooterCount + " #=count#" + "</strong>");
    })
    .DataSource(ds => ds
        .Ajax().ServerOperation(false)
        .Model(m => m.Id(s => s.Id))
        .Sort(sort => {
            sort.Add(p => p.Name).Ascending();
        })
        .Aggregates(aggregates => {
            aggregates.Add(m => m.DisabledText).Count(); })
        .Read(r => r.Action("GetAllServices", "Home")))
    .Events(e => e
            .Change("gServices_Change")
            .DataBound("gServices_DataBound"))
    .Filterable(filterable => filterable
        .Extra(false))
    .HtmlAttributes(new { style = "height:385px;" })
    .Name("gServices")
    .Groupable()
    .Selectable()
    .Sortable()
    .Scrollable(scrolling => scrolling.Height("auto")))

Regards
Sven

[Vladimir Iliev]

Hi Sven,

 
You can use the document ready event of the Grid to manually exclude the footer height from the content height in order to achieve the desired behavior - please check the example below (the code should be placed after the Grid code):

$(function myfunction() {
    var grid = $("#Grid").data("kendoGrid");
    var contentHeight = grid.content.height();
    var footerHeight = grid.wrapper.find(".k-grid-footer").height();
    //adjust the grid height
    grid.content.height(contentHeight - (footerHeight + 2));
})

 Kind Regards,
Vladimir Iliev
Telerik

[Sven]

Hi Vladimir,

thanks a lot for your answer. I have added that code to my project, and now the grid height does not change anymore after the data is loaded. That solved my question.

Regards
Sven