Kendo UI Grid inside the a Flexible Container

[Chennabasappa]

Hi,

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.

Regards

Chenna Basappa C

[Dimiter Topalov]

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,
        field:"OrderID",
        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.

Regards,

Dimiter Topalov

Telerik