CODEWITHSUNDEEP
asp.net-mvc-4kendo-uikendo-grid
Supermode
Supermode

Reputation: 936

Kendo ui grid auto height

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

Upvotes: 1

Views: 9429

Answers (4)

XzajoX
XzajoX

Reputation: 23

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.

Upvotes: 0

snir
snir

Reputation: 3127

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.

Upvotes: 1

Clarence Oliver
Clarence Oliver

Reputation: 11

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" }
    ]
});

Upvotes: 0

OnaBai
OnaBai

Reputation: 40887

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.

Upvotes: 2

Related Questions