Kendo ui grid auto height

Question

I am currently implementing the same kendoui grid as showing in the following: http://demos.kendoui.com/web/grid/index.html

The problem that i can see is that the grid does not have auto height where if the record less than 10, the grid still in the same height.

Is there anyway i could resolve this since this one not happening when we use the previous version

I tried using the following javascript but still not working:

function resizeGrid() {
        var gridElement = $("#grid");
        var dataArea = gridElement.find(".k-grid-content");

        var newGridHeight = $(document).height() - 350;
        var newDataAreaHeight = newGridHeight - 65;

        dataArea.height(newDataAreaHeight);
        gridElement.height(newGridHeight);

        $("#grid").data("kendoGrid").refresh();
    }

    $(window).resize(function () {
        resizeGrid();
    });

Thank you

Answer 1

Not sure I understand your problem because the Grid actually has an autoheight . If in the definition of the Grid you define an attribute saying the number of pixel that grid should have, it will stick to that height no matter it it has 5 or 50 records. If it actually needs more space will add a scrollbar and if it need less, it will display the empty space.

In the example that you refer in your question try:

$("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(20),
        pageSize: 10
    },
    height    : 500,
    groupable : true,
    sortable  : true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" } ,
        { field: "LastName", width: 90, title: "Last Name" } ,
        { width: 100, field: "City" } ,
        { field: "Title" } ,
        { field   : "BirthDate", title   : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
        { width: 50, field: "Age" }
    ]
});

And the height will be 500px.

Answer 2

You can use css in order to draw a grid that will keep its height adjusted to its container, as well as considering other elements around:

#grid {
    /* chop the grid's height by 45px */
    height: calc(100% - 45px);
}

#grid .k-grid-content {
    /* chop the grid content's height by 25px */
    height: calc(100% - 25px) !important;
}

This is done without using the 'height' property in the grid's declaration (at the .js side).

Works fine for me.

Answer 3

For me, removing scrollable did the trick. If there was only one row, the grid was small, and grew together with the amount of rows up to the pagesize level. No height setting needed.

Answer 4

Remove height: 500

$("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(20),
        pageSize: 10
    },
    groupable : true,
    sortable  : true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" } ,
        { field: "LastName", width: 90, title: "Last Name" } ,
        { width: 100, field: "City" } ,
        { field: "Title" } ,
        { field   : "BirthDate", title   : "Birth Date", template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #' } ,
        { width: 50, field: "Age" }
    ]
});