Working with Layouts

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 pane

The layouts pane of Radzen’s Design application screen displays a list of all layouts in the application. It allows you to add new layouts, delete existing ones or change layout properties - name, template, etc.

Add new layout

To add a new layout click the new button in the layouts pane. This will display the New layout wizard that offers you to start from a blank layout or pick one of the existing templates.

Edit a layout

To edit a layout simply click it from in the Layouts pane. Radzen will display it in the design canvas where you can make changes.

Layout components

A special component category will be available in the toolbox when you edit a layout.

Those are components used exclusively in layouts.

Body

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

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.

Footer

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.

Header

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

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.

Menu

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.

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.

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.

Sidebar

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

SidebarToggle

A button which toggles the sidebar.