Layout Grid

The Layout Grid is based on the Bootstrap Grid system. It always fits the container (this could be the page, table cell or panel) and divides the container into 12 equal columns by default (md-1). We apply your styling for desktop screens and larger (≥992px) and automatically stack for smaller screens, meaning it is responsive. Data Grids don’t change, they will get a scroll bar if viewed on a smaller screen. Columns can be merged and split to change their width.

Controls fit to the column with the exception of Grid, which always generates at its width and will overflow if the column space is smaller than the grid, and UploadFile Control, which slightly overflows an md-1 column but fits md-2 or wider.

Add a Layout Grid

Grid Layouts

To lay out a page section with the layout grid, simply drag a control into a column. It is best practice to only put one control per column otherwise they will overflow and wrap

Column Management

In order to manage the columns of a LayoutGrid, you can use the right-click menu provided on a column. Right click on a column to merge it left or right. Right click on a merged column to split it.

Click and drag across multiple columns to select them and right click to merge.