We can dynamically react to screen changes by making use of the grid API features. In this section we describe a few recommended approaches to resize the grid and show/hide columns based on screen size changes.
The quickest way to achieve a responsive grid is to set the grid's containing div to a percentage. With this simple change the grid will automatically resize based on the div size and columns that can't fit in the viewport will simply be hidden and available to the right via the scrollbar.
Sometimes you want to have columns that don't fit in the current viewport to simply be hidden altogether with no horizontal scrollbar.
To achieve this determine the width of the grid and work out how many columns could fit in that space, hiding any that
don't fit, constantly updating based on the
gridSizeChanged event firing, like the next example shows.
This example is best seen when opened in a new tab - then change the horizontal size of the browser and watch as columns hide/show based on the current grid size.
Sometimes the vertical height of the grid is greater than the number of rows you have it in. You can dynamically set the row heights to fill the available height as the following example shows: