dynamically set treeview and grid height

[erwin]

     Hi,

I have a treeview and a grid side by side on a page with bootstrap 4 layout. When the user selects a node in the treeview, the grid datasource refreshes. This works ok.

Now I'd like to size the grid and the treeview dynamically to the size of the browser window minus the header of the page, so that the treeview and the grid display a scrollbar (if needed) independently. The tree is load on demand and can contain a lot of elements.

Im struggling with setting the treeview and the grid height in the window resize handler.

Currently the grid is not paging, it maybe a requirement to have the grid paging then I would have to set the pagesize dynamically to display as much rows as possible within the available space..

Thanks for your help

 

Erwin

[Martin]

Hello, Erwin,

Please refer to our Responsive Web Design article for some guidance about resizing. You can try the kendo.resize method or use the resize method separately for the components you are using. 

Alternatively, you can use the setOptions method to change the height on window.resize event. The same should be possible to set the paging functionality for the Grid.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik