Make grid fit container size without scrollbar

[Jan-Frederik]

I have a kendo grid with a lot of columns and want to resize the grid width to it's container (a bootstrap column). By default, the grid tries to fit into the container

but with too many columns, it exceeds the container's width.

I tried to use .Scrollable() and now the grid fits to the container width. The unwanted side effect is that I get a vertical scrollbar. Can I achieve the goal without

.Scrollable()?

[Georgi]

Hello Jan,

A possible solution would be to calculate the sum height of all rows, resize the grid and set the overflow-y css property to hidden within the DataBound event handler.

e.g.

.Events(x=> x.DataBound("onDataBound"))

      function onDataBound() {
      	var grid = this;
        var rowHeight = grid.tbody.find('tr[data-uid]:eq(0)').outerHeight();
        var rowCount = grid.tbody.find('tr').length;
        
        grid.element.find('.k-grid-content').height(rowHeight*rowCount).css({'overflow-y':'hidden'})
      }

 

Below you will find a small sample which demonstrates the above approach:

• https://dojo.telerik.com/UbeXAjOw

Although the grid is configured with JS, the very same solution applies for the MVC grid.

Regards,
Georgi
Progress Telerik