Radzen 2.0 Beta (Layouts)

Hi guys,

UPDATE: Radzen 2.0 has been oficially released! You are welcome to download it (or get it via auto-update). Radzen 2.0 beta users have to import their application in the official.

This is going to be a very long post as it covers all new additions to Radzen as a part of the "layouts" feature.

DISCLAIMER

This version of Radzen is not backwards compatible! Once it opens an existing application created with Radzen 1.x it migrates it to layouts based one (displaying a warning dialog beforehand).

We strongly recommend creating a backup before opening an existing application with this beta. The upgrade is as simple as copying the entire application directory. If you want to revert simply replace the current contents of the application with the files from the backup.

Download

You can download it from here.

We encourage you to try migrating some of your applications and report any problems you encounter in the process (just make sure you create a backup of those apps before that :wink: )

Before installing the bits please check the new features and changes below.

New features

Layouts

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. Here is how the default layout of a new Radzen application looks like:

A new Radzen application has two layouts - Main and Login. The Login layout is a lot simpler and doesn't include the header, sidebar and footer. This was something that a lot of you requested.


One can define custom layouts, delete existing ones, change the layout of a page etc.

Layout components

A new category in the Toolbox menu is now available. 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.
38

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.

Assets

Radzen now allows the use of assets (initially only images). One can add images to a Radzen application
19

and then use them with the new Image component.

New components

The following new components have been introduced.

Gravatar

Most commonly used together with the ProfileMenu (in its template). Shows the gravatar of the specified email.

Heading

Simple heading component - used for page titles etc.

Icon

From the Material Icons font.

Image

Used together with image assets. Also accepts a valid URL.

Link

Regular hyperlink component. Can open either a page from the application or any valid URL.

Changes

Here is a list of the changes compared with previous Radzen versions.

Layouts

All existing applications are updated to have two layouts - Main and Login. This will slightly change the visual appearance of the header and sidebar navigation (we hope for the better).

Cards

The Card component has been updated to support child components - similar to the Panel, Fieldset, Tabs and Accordion.

Grid, Form, Chart

The Title, Icon, TitleBackground properties have been removed. If those properties were used the component will be automatically upgraded to be nested in a Card component.

Well that's it! Let us know that you think.

Best regards,
Atanas

I have downloaded the Beta and started with it. WOW!

All nice additions and will resolve many of my current problems.

Very nice!
This is something thats indispensable for me!

Thank you Radzen team!

Regards
Thomas

1 Like

Hi guys,

Thank you for the feedback!

We have fixed a few issues and updated the download links for the beta.

Best,
Atanas

Hey folks,

Download links updated to Radzen 2.0 Beta 3!

Best Regards,
Vladimir

And now with more fixes to beta 4.

Updated download links to beta 5. The main new addition is that the beta could now be installed side-by-side with the official version.

Hello Atanas,
Great!
How can i transfer my Testapp from the “old” beta to the newly installed beta?

Regards
Thomas

Hi Thomas,

Use the “import” button to import the application.

Best regards,
Atanas

:roll_eyes: it seems i do not see the wood for the trees.
Sorry.

Thomas

Hey folks,

I’ve just updated beta download links to latest (Radzen 2.0.0-Beta.7.3)!

Best Regards,
Vladimir

1 Like

I've imported an App from 1.34.2 and i receive the following error every time when i open the app in 2.0.0-beta7.3:

Any Hints what do to to resolve this problem?

Kind Regards
Thomas

Hey Thomas,

Please send us the meta folder of this app (before the import)!

Best Regards,
Vladimir

Hi Vladimir,
im sorry but i cant. The “source” Directory is overwritten.
I’ve seen that i do not imported from 1.34.2. I’ve imported from 2.0.0-beta3 to 2.0.0-beta7.3.
I deleted the app in 2.0.0-beta7.3 and imported it again (same directory) and the error is vanished.
For now im working only with 2.0.0-beta7.3 and uninstalled 2.0.0.beta3.

Sorry
Thomas