Design time

This guide will demonstrate how to use Radzen to design your pages.

Introduction

Radzen Designer

After you create a Radzen page you will see the designer. It consists of several areas:

Component Toolbox

You can drag and drop components from the toolbox onto the design canvas. Toolbox

Layouts

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. Layouts

A new category in the Toolbox menu is now available. Those are components used exclusively in layouts. Layouts Toolbox

Body

Contains the “body” of a page. Typically is offset by the sidebar, header and footer. Body

ContentContainer

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. ContentContainer

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. Footer

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). Header

LanguagePicker

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. LanguagePicker

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. Menu

PanelMenu

The well known vertical menu which is typically seen in a sidebar. Behaves as the Menu component and supports similar features - hierarchies, icons etc. PanelMenu

ProfileMenu

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. ProfileMenu

Placed at the left side. Typically contains application navigation. Hidden on mobile devices. Hidden/shown by the SidebarToggle component. Sidebar

SidebarToggle

A button which toggles the sidebar. SidebarToggle

Assets

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. Assets Assets Image

Page List

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. Pages

Design Canvas

Shows the components in the current page. Allows you to rearrange components, add or delete existing ones and change their properties.

Property Grid

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.

Add a component

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.

Resize a component

Defining page

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.

  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.

Define page

We are here for you

Making our users happy is always a priority for us.