Working with Pageslink

Pages panelink

The pages pane lists all pages in your Radzen application. It allso allows you to create new ones.

Create new pagelink

To create a new page click the new button and pick from the available templates.

Radzen loads the new page in the design canvas where you can start making changes.

Edit pageslink

Click a page from the Pages pane and make changes in the design canvas.

Rename pageslink

To rename a page right click it and pick Properties. This displays the page settings dialog that allows you to change the page name among other things.

Delete pageslink

The last option of the page context menu allows you to delete it. Be careful though - you cannot restore a deleted page.

Show generated fileslink

The page context menu also allows you to check the files that Radzen has generated for the page.

Responsive designlink

Radzen uses the popular Bootstrap framework.

Bootstrap uses a series of rows and columns to display and align content.

• Rows are horizontal groups of columns. Only columns can be thebe immediate children of rows.
• Components should be placed within columns.
• Column classes indicate the number of column "slots" you’d like to use out of the possible 12 slots per row.
• There are five responsive grid tiers, one for each responsive breakpoint:
  • all breakpoints (extra small or XS) - device width is < 576px
  • small (S) - device width is >= 576px
  • medium (M) - device width is >= 768px
  • large (L) - device width is >= 960px
  • extra large (XL) - device width is >= 1200px

To use Bootstrap rows and columns in Radzen simply drag and drop them from the toolbox. They are in their own 'HTML' category which is at the bottom of the toolbox.

1. Drag and drop a row component.
2. Drag and drop one or more column components.
3. Set the column class property to specify the responsive width. Try switching the resolution in the design canvas to see the changes.
4. Drag and drop other components inside the columns.