Kendo UI Grid inside the a Flexible Container

2 posts, 0 answers
  1. Chennabasappa
    Chennabasappa avatar
    2 posts
    Member since:
    Sep 2015

    Posted 23 Feb 2016 Link to this post


    I am using the kendo UI Grid inside the a flexible container. And I want the grid to be auto adjustable according to the available space in the container.
    I am able to achieve this behavior by making some changes in the CSS for grid, I am using the following CSS to achieve this behavior.

    .grid-auto-adjustable {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex; 
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;

    But the issue is when we are using Frozen columns. Because of above CSS change (auto-adjustable) we are not able to use Frozen columns feature.

    Can I get a sample code with Auto adjustable height and having Frozen columns inside the flex container.

    Thanks in advance.


    Chenna Basappa C

  2. Dimiter Topalov
    Dimiter Topalov avatar
    1297 posts

    Posted 26 Feb 2016 Link to this post

    Hello Chenna Basappa C,

    You can check out the following how-to article from our documentation, that demonstrates resizing of the Grid, when the browser Window is resized.

    Adapt it as necessary, replacing the window element with the one, containing your Grid, and adjusting the column properties, e.g.:

    columns: [{
            locked: true,
            width: 200
        {field: "ShipName", width: 500},
        {field:"ShipCity", width: 500}


    Please note that each column should have a width value defined. 



    I hope this helps.


    Dimiter Topalov


    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top