This guide will demonstrate how to use Radzen to design your pages.
After you create a Radzen page you will see the designer. It consists of several areas:
You can drag and drop components from the toolbox onto the design canvas.
Displays a list of all layouts in the application. Clicking a layout will load it in the design canvas and will show layout components in the toolbox. Allows you to add new layouts, delete existing ones or change layout properties - name, template, etc. The layouts are a concept similar to ASP.NET master pages - a page which defines common content. Typically this content is navigation menu, common header and footer.
A new category in the Toolbox menu is now available. Those are components used exclusively in layouts.
Contains the “body” of a page. Typically is offset by the sidebar, header and footer.
A required component which is a placeholder for content (components) defined in the regular Radzen pages. At runtime the components from the page are inserted in the placeholder to compose the final result. By default Radzen defines only one ContentContainer component. Developers can add additional ones.
Optional component located at the bottom of the page. Can be fixed (the default) which means it doesn’t scroll with the body content and is always visible.
Optional component located at the top of the page. Can be fixed (the default) which means it doesn’t scroll with the body content and is always visible. The default layout uses the header to include a SidebarToggle component, ProfileMenu (if security is enabled) and LanguagePicker (if localization is enabled).
A dropdown which allows the end-user to change the current language. Radzen adds it to a default layout when the developer enables localization for the Radzen application.
Horizontal navigation menu typically seen in desktop applications. Usually placed in the Header component. The default Radzen layout uses the PanelMenu component - one has to manually add a Menu component. By default displays all application pages which have their ‘Include in navigation’ setting checked. Alternatively a developer can add custom menu items, rearrange menu items, create hierarchies and add icons. All this done by customizing the Items property from the Radzen property grid.
The well known vertical menu which is typically seen in a sidebar. Behaves as the Menu component and supports similar features - hierarchies, icons etc.
Used to display user profile related links as well as links to user management pages. Usually placed in the header. Can have custom items and template. The default template uses the new Gravatar component.
Placed at the left side. Typically contains application navigation. Hidden on mobile devices. Hidden/shown by the SidebarToggle component.
A button which toggles the sidebar.
Displays a list of all assets in the application. Clicking a asset will load it in the design canvas. Allows you to add new assets and delete existing ones. You can use assets with Image component.
Displays a list of all pages in the application. Clicking a page will load it in the design canvas. Allows you to add new pages, delete existing ones or change page properties - name, security, etc.
Shows the components in the current page. Allows you to rearrange components, add or delete existing ones and change their properties.
Displays the properties of a component and allows you to change them. A component should be selected first.
Working with components
Add a component
To add a component to a page simply drag and drop it from the toolbox on the design canvas.
Resize a component
You can drag and drop the resizing handles to customize the size of a component. This will set the component size in pixels. If you need other units (percentages or something) use the property grid.
Radzen uses the popular Bootstrap framework to create responsive page layouts. Bootstrap uses a series of rows and columns to layout and align content.
- Rows are horizontal groups of columns that are alined.
- Content (components) should be placed within columns, and only columns may be immediate children of rows.
- Column classes indicate the number of columns you’d like to use out of the possible 12 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.
- Drag and drop a row component.
- Drag and drop one or more column components.
- Set the column class property to specify the responsive width. Try switching the resolution in the design canvas to see the changes.
- Drag and drop other components inside the columns.