How to set kendo UI grid width

Question

I am facing a problem with the Kendo Grid width. I want the grid to stretch to fit the content of the grid. This grid which I am working on is created dynamically, so at times it may have just 2 columns and at times it may have max 5 columns. I don't want the grid to expand and take the whole page for showing just two columns.

To get this working I added the following css

.k-grid table{
    display: inline;
}

The problem is that when this style is applied, it completely messes up the column header and column alignment. Does anyone know how to fix this?

Solution 1

Actually this is really simple. But I wasted lot of time cause I did not get the correct source. You just need to implement following things.

Make the grid sortable: false

and use this CSS

#gridId table {
    width: auto;
}

But with this you loose the scrolling feature. But you can wrap your kendo grid in another container and implement your own scrolling.

Solution 2

var grid = $("#kendoGridName");
grid.width(400);

Solution 3

Rather than trying to apply some css you could use some jQuery to perform this task. I do something similar in terms of height. So maybe something like this would work for you (I have modified this to do height and width).

function resizeGrid(size) {

    if (size === null || size === undefined) {
        size = 0.6;
    }

    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    windowHeight = windowHeight * size;
    windowWidth = windowWidth * size; 
    $(".k-grid-content").height(windowHeight)
    $(".k-grid).width(windowWidth);
}

so all this function does is scale the grid based on the current window size so for example if you want the grid to take up all the available space ie max height and width you would call resizeGrid(1) if you wanted it smaller say to take 50% of the screen size then you would use reszieGrid(0.5) if no value is used then the function just goes with a default of 60% of the available width/height.

so you could call this after your initialization of the grid and then scale the grid to an appropriate size.

by targeting the kendo css classes it makes this function easier to reuse.

if you need more info let me know.