Grid Adaptive Layout

The new version of our Grid component will bring to you a new interesting feature. With that new feature, the Grid will allow you to build adaptive or responsive page layouts easier. The component will automatically hide and show grid data, when the browser window is resized. The layout behavior can be customized by using two new properties: adaptive and adaptivewidth. adaptivewidth determines the Grid’s width that turns the adaptive mode on. In adaptive mode, the Grid View automatically changes its layout, hides all overflowing columns and hides the horizontal scrollbar. The Grid displays one additional adaptive column with “…” rendered in each cell. By clicking on such cell, the Grid displays a detail view with the row’s data. If the component is in edit mode, you will be able to edit the data, too.

The image below illustrates how a Grid looks in Adaptive mode:

After clicking on adaptive cell, the view is changed to:

We hope that you will find this new feature useful for your web applications where responsive, fluid and adaptive layout are used.

About admin

This entry was posted in ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, jqxGrid, react grid and tagged , , , , . Bookmark the permalink.

Leave a Reply