Migrating from Radzen.Blazor 2.x to 3.x

Radzen.Blazor Components
3

Just updated and no problems so far :slight_smile:

Nice work!

4

"Custom Radzen Theme" includes the Humanistic theme as well, right? I upgraded our test enviroment and have quite a few (small) css bugs. If not, I can make a seperate topic later.

5

This is professional feature of Radzen Studio available for subscribers:

image
image1920×1080 133 KB

6

What can be done to safely upgrade projects that include the .css in the code generation ignore list?

7

It would probably be easier to apply your customizations from scratch. Alternatively you can keep them in a separate CSS file so you can still receive upgrades and fixes to the themes.

If this is not an option you will have to change the prefixes of the css classes manually -

  • .ui- is now .rz-
  • .pi is now .rzi also .pi- is .rzi-
  • .card is now .rz-card
  • .fa is now also .rzi
  • .menu is now .rz-menu
  • .navigation-item is now .rz-navigation-item and .navigation-item- is .rz-navigation-item-
  • .panel-menu is now .rz-panel-menu
  • .context-menu is now .rz-context-menu
  • .link is now .rz-link
1 Like
8

I tried your latest suggestion. After some Ctrl+H in VSCode, all the prefixes were updated and most things are looking as they used to. But some components are looking off still, so I'll try and manually fix them.

UPDATE:
Here are more prefix replacements:

  • .profile-menu is now .rz-profile-menu
  • .textbox is now .rz-textbox
  • .textarea is now .rz-textarea

I'll keep this list updated.

9

Hi, from the description Radzen 3 looks like a miracle. exactly what we needed. where it's possible to download it ? so far in the radzen website I see only the download button for the release 2.x

10

Hi @cedpromedical,

Radzen 3.0 is still not available for download. More info can be found here:

1 Like
11

Just to clarify:

  • Radzen.Blazor is the Radzen Blazor component library. It has a new version 3.0.0.
  • Radzen 3.0 is the new major version of Radzen (our IDE premium product) which is still in development.

Radzen.Blazor is not the same as Radzen.

12

Thank you for the information. It seems that I was confused as the first time that I took the Metro in Sofia :smiley: I look forward to try and buy Radzen 3.0. it looks exactly what my company need for software development.

13

Don't know if this is intended or not, but the material-icons definition is missing in the new Radzen CSS. So if you have used material icons like this, it will not work any more:

<i class="material-icons">local_shipping</i>

2.x CSS:
radzen2.x

3.0 CSS
radzen3

I fixed this by replacing material-icons with rzi:
<i class="rzi">local_shipping</i>

14

Indeed .material-icons is now too .rzi. Will update my first post to include the changes.

15

Why does this text isn't rendering as an Icon?

image
image1920×1040 106 KB

.rz-sortable-column .rzi-sort:before {
  content: 'sort';
}
16

The font-family CSS attribute is probably missing. Here is how it looks with the default themes:

image
image3406×1858 907 KB

1 Like
17

Row sizing on RadzenGrid before upgrade

image

Row sizing on RadzenGrid after upgrade.

image

Padding seems to have increased. Is there a fix?

18

No, we haven't increased the padding - only the CSS class names have changed. You can check our online demos for a reference.

19

Can I see what's new of Radzen.Blazor 3.x?

20

All release notes are here:

21

Hi there.
Has just started working with Radzen components in VS 2019 but after the migration to 3.x the CSS styling is lost.

The changes recommended for the CSS, where do i apply them? I had not added any custom styling.

  • .ui- is now .rz-
  • .pi is now .rzi also .pi- is .rzi-
    etc...
    How can I located the CSS?
    RS
22

If you haven't used any custom styling you just need to include the theme CSS as always (listed in the getting started instructions). Also make sure to clear your browser cache.