Radzen Blazor Components v8 Changelog link

Track and review changes to Radzen Blazor Components v8

New Components link

• New Chat - component for multi-participant conversations with support for distinct user identities.
• New FAB - Floating Action Button helps highlight your app’s most important action.
• New FabMenu - RadzenFabMenu provides quick access to multiple actions.
• New PivotDataGird - create cross-tabulation tables for analyzing large datasets.

AIChat link

• Breaking RadzenAIChat ChatMessage shared between RadzenChat, RadzenAIChat and AIChatService

SiderBar link

• Breaking Added two new options:
  • Position="SidebarPosition.Start" to position the SideBar to Left, Right, Start, End
  • FullHeight for setting the Sidebar to full height or wrapped between RadzenHeader and RadzenFooter. Default is false.
  • Example:

    Old:

    <RadzenLayout Style="grid-template-columns: 1fr auto; grid-template-areas: 'rz-header rz-header' 'rz-body rz-sidebar'">
        <RadzenSidebar>
        </RadzenSidebar>
    </RadzenLayout>
    

    New:

    <RadzenLayout>
        <RadzenSidebar Position="SidebarPosition.End" >
        </RadzenSidebar>
    </RadzenLayout>
    

Radzen Blazor Components v7 Changelog link

Track and review changes to Radzen Blazor Components v7

Dependencies link

Breaking Starting from Radzen Blazor v7.0.0 we have dropped the dependency on Roslyn (Microsoft.CodeAnalysis.*) packages. Expression parsing now relies on a home-grown implementation. Some expressions may no longer work.

Animations link

Breaking Added animations to Popup, Dialog, SideDialog, DropDown, DropDownDataGrid, Notification, Tooltip, Tree, Panel, Fieldest, PanelMenu, Menu, ContextMenu, SplitButton and Accordion. Some of the components used inline style to hide certain content which makes it impossible to animate. We have updated those components to use CSS class based hiding. As a result theme CSS files need to be updated. The free themes should work out of the box as long as they are not cached by the browser (RadzenTheme takes care of cache busting). Premium themes should be updated from Radzen Blazor Studio and Radzen Blazor for Visual Studio. The latest versions of both products would display a warning that the premium theme is outdated and update it automatically without losing any customizations.

Accordion changes link

Breaking RadzenAccordion now hides its child content using CSS class in order to support animations. The older behavior was to remove the child content entirely.

RadzenScheduler month view link

Breaking We have redone rendering implementation of the month view in RadzenScheduler. The old implementation didn't handle some cases and relied on odd sorting rules. The new implementation is much more robust and should handle a lot more scenarios. The Breaking change is that appointments may not appear in the same order as before.

Radzen Blazor Components v6 Changelog link

Track and review changes to Radzen Blazor Components v6

Dependencies link

Breaking Starting from Radzen Blazor v6.0.0 we have dropped the dependency on the System.Linq.Dynamic.Core NuGet package. We are now using a home-grown solution based on Roslyn (the C# compiler API). More information can be found in the forum.

MarkupString support link

Breaking Starting from v6.4.0 Radzen.Blazor no longer accepts HTML content in certain string properties - like Text, Icon, PagingSummaryFormat, etc. We have introduced RenderFragment based properties where needed. This change is made to improve the security of our components and to prevent certain XSS attacks.

Old:

PagingSummaryFormat="Displaying page {0} of {1} <b>(total {2} records)</b>

New:

<PagingSummaryTemplate>
    Displaying page @context.CurrentPage of @context.NumberOfPages <b>(total @context.TotalCount records)</b>
</PagingSummaryTemplate>

Radzen Blazor Components v5 Changelog link

Track and review changes to Radzen Blazor Components v5.

Dependencies link

• Dropped Bootstrap - including the Bootsrap CSS is not mandatory any more.
• Dropped the obsolete RadzenGrid component.
• Dropped support for .NET Core 3.x and .NET 5.

Common link

• New RTL Support - All components now support right to left direction for languages that are written from the right to the left (like Arabic).
• New All components now render with box-sizing: border-box;.

New Components link

• New RadzenAppearanceToggle - A toggle button to quickly switch between light and dark themes.
• New RadzenTheme - Use it to load themes to your app.

Themes link

• New Open sourced Material Dark theme - you can now use Material Dark theme for free!
• New Added Standard Dark free theme.
• New Added Humanistic Dark free theme.
• New Added Software Dark free theme.

Colors link

• New Added --rz-base color variable and shades.

Typography link

• Update Replaced all Source Sans Pro fonts with Source Sans 3 variable fonts.
  • Added SourceSans3VF-Italic.ttf.woff2
  • Added SourceSans3VF-Upright.ttf.woff2
  • Deleted SourceSansPro-Black.woff
  • Deleted SourceSansPro-BlackIt.woff
  • Deleted SourceSansPro-Black.woff
  • Deleted SourceSansPro-BlackIt.woff
  • Deleted SourceSansPro-Bold.woff
  • Deleted SourceSansPro-BoldIt.woff
  • Deleted SourceSansPro-ExtraLight.woff
  • Deleted SourceSansPro-ExtraLightIt.woff
  • Deleted SourceSansPro-It.woff
  • Deleted SourceSansPro-Light.woff
  • Deleted SourceSansPro-LightIt.woff
  • Deleted SourceSansPro-Regular.woff
  • Deleted SourceSansPro-Semibold.woff
  • Deleted SourceSansPro-SemiboldIt.woff
• Update Replaced all Roboto fonts with Roboto Flex variable font.
  • Added RobotoFlex.woff2
  • Deleted roboto-v15-latin-300.woff
  • Deleted roboto-v15-latin-700.woff
  • Deleted roboto-v15-latin-regular.woff
  • Deleted roboto-v30-latin-300.woff
  • Deleted roboto-v30-latin-500.woff
  • Deleted roboto-v30-latin-700.woff
  • Deleted roboto-v30-latin-regular.woff

Icons link

• Breaking Replaced Material Icons font with Material Symbols variable font.
  • Added MaterialSymbolsOutlined.woff2
  • Deleted MaterialIcons-Regular.woff
• Breaking Removed direction: ltr; rule from .rzi CSS class.

DataGrid link

• Update Updated and unified Clear and Apply button appearance in filtering popups
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-grid-header-filter-icon-margin is now --rz-grid-header-filter-icon-margin-inline
  • Updated --rz-grid-header-title-padding is now --rz-grid-header-title-padding-inline
  • Updated --rz-column-drag-handle-margin is now --rz-column-drag-handle-margin-inline
  • Updated --rz-grid-filter-icon-margin is now --rz-grid-filter-icon-margin-inline
  • Updated --rz-grid-group-header-item-padding is now --rz-grid-group-header-item-padding-block
  • Added --rz-grid-group-header-item-title-margin-inline
  • Added --rz-grid-group-header-item-padding-inline
  • Added --rz-grid-group-header-gap
  • Added --rz-grid-group-header-item-color
  • Deleted --rz-grid-group-header-item-margin
  • Deleted --rz-grid-group-header-items-margin

DataList link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-datalist-item-vertical-margin is now --rz-datalist-item-margin-block
  • Updated --rz-datalist-item-horizontal-margin is now --rz-datalist-item-margin-inline

DataFilter link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-datafilter-item-padding-y is now --rz-datafilter-item-padding-block
  • Updated --rz-datafilter-item-padding-left is now --rz-datafilter-item-padding-inline-start

Pager link

• Breaking All CSS classes starting with .rz-paginator-* are renamed to .rz-pager-*
• Breaking All CSS variables starting with --rz-paginator-* are renamed to --rz-pager-*
• Breaking Replaced spacing related CSS variables and updated values respectively:
  • Added --rz-pager-gap
  • Deleted --rz-paginator-first-button-margin
  • Deleted --rz-paginator-last-button-margin
  • Deleted --rz-paginator-dropdown-margin
  • Deleted --rz-paginator-numeric-button-margin
• Deleted --rz-paginator-back-button-hover-color
• Deleted --rz-paginator-back-button-hover-background-color
• Deleted --rz-paginator-next-button-hover-color
• Deleted --rz-paginator-next-button-hover-background-color

Scheduler link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-scheduler-prev-next-button-padding is now --rz-scheduler-prev-next-button-padding-block and --rz-scheduler-prev-next-button-padding-inline
  • Updated --rz-scheduler-today-button-margin-left is now --rz-scheduler-today-button-margin-inline-start
  • Updated --rz-scheduler-event-padding is now --rz-scheduler-event-padding-block and --rz-scheduler-event-padding-inline
  • Updated --rz-scheduler-prev-button-border-radius is now split into:
    • --rz-scheduler-prev-button-border-start-start-radius
    • --rz-scheduler-prev-button-border-start-end-radius
    • --rz-scheduler-prev-button-border-end-start-radius
    • --rz-scheduler-prev-button-border-end-end-radius
  • Updated --rz-scheduler-next-button-border-radius is now split into:
    • --rz-scheduler-next-button-border-start-start-radius
    • --rz-scheduler-next-button-border-start-end-radius
    • --rz-scheduler-next-button-border-end-start-radius
    • --rz-scheduler-next-button-border-end-end-radius
• New --rz-scheduler-highlight-background-color - Use it to highlight working hours in day view, or today in calendar view.

Tree link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-tree-node-padding is now --rz-tree-node-padding-block and --rz-tree-node-padding-inline
  • Updated --rz-tree-node-margin is now --rz-tree-node-margin-block and --rz-tree-node-margin-inline

Image link

• New Added vertical-align: middle; to all images and SVGs inside a Radzen Blazor Component

Layout link

• New CSS reset styles to <body> are applied only when <RadzenLayout> is used.

Dialog link

• Breaking Dialog's title bar now uses flex model for its layout.
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-dialog-title-padding is now --rz-dialog-title-padding-block and --rz-dialog-title-padding-inline

Sidebar link

• Breaking Renamed direction related CSS variables and updated values respectively:
  • Updated --rz-sidebar-border-right is now --rz-sidebar-border-inline-end

Splitter link

• Update Splitter icons now use font-family: var(--rz-icon-font-family) instead of hardcoded icon font.

Accordion link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-accordion-item-padding is now --rz-accordion-item-padding-block and --rz-accordion-item-padding-inline
  • Updated --rz-accordion-icon-margin is now --rz-accordion-icon-margin-inline
  • Updated --rz-accordion-toggle-icon-margin is now --rz-accordion-toggle-icon-margin-inline
  • Updated --rz-accordion-content-padding is now --rz-accordion-content-padding-block and --rz-accordion-content-padding-inline
  • Added --rz-accordion-toggle-icon-collapsed-rtl
  • Added --rz-accordion-toggle-icon-expanded-rtl

ContextMenu link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-context-menu-padding is now --rz-context-menu-padding-block and --rz-context-menu-padding-inline

Login link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-login-register-padding is now --rz-login-register-padding-block and --rz-login-register-padding-inline
  • Updated --rz-login-register-margin is now --rz-login-register-margin-block and --rz-login-register-margin-inline
  • Updated --rz-login-register-button-margin is now --rz-login-register-button-margin-block and --rz-login-register-button-margin-inline

Menu link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-menu-item-icon-margin is now --rz-menu-item-icon-margin-inline
  • Updated --rz-menu-item-padding is now --rz-menu-item-padding-block and --rz-menu-item-padding-inline
  • Updated --rz-menu-top-item-padding is now --rz-menu-top-item-padding-block and --rz-menu-top-item-padding-inline

PanelMenu link

• Breaking Remapped CSS variables for margin, padding, color and background color to match the respective PanelMenu item level.
• Breaking Renamed some of the above mentioned CSS variables and updated values respectively:
  • Updated --rz-panel-menu-color is now --rz-panel-menu-item-color
  • Updated --rz-panel-menu-background-color is now --rz-panel-menu-item-background-color
  • Updated --rz-panel-menu-hover-color is now --rz-panel-menu-item-hover-color
  • Updated --rz-panel-menu-hover-background-color is now --rz-panel-menu-item-hover-background-color
  • Updated --rz-panel-menu-padding is now --rz-panel-menu-padding-block and --rz-panel-menu-padding-inline
  • Updated --rz-panel-menu-item-padding is now --rz-panel-menu-item-padding-block and --rz-panel-menu-item-padding-inline
  • Updated --rz-panel-menu-item-2nd-level-padding is now --rz-panel-menu-item-2nd-level-padding-block and --rz-panel-menu-item-2nd-level-padding-inline
  • Updated --rz-panel-menu-item-margin is now --rz-panel-menu-item-margin-block and --rz-panel-menu-item-margin-inline
  • Updated --rz-panel-menu-item-2nd-level-margin is now --rz-panel-menu-item-2nd-level-margin-block and --rz-panel-menu-item-2nd-level-margin-inline
  • Updated --rz-panel-menu-icon-margin is now --rz-panel-menu-icon-margin-inline
  • Updated --rz-panel-menu-icon-2nd-level-margin is now --rz-panel-menu-icon-2nd-level-margin-inline
  • Added --rz-panel-menu-item-3rd-level-color
  • Added --rz-panel-menu-item-3rd-level-background-color

ProfileMenu link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-profile-menu-item-icon-margin is now --rz-profile-menu-item-icon-margin-inline
  • Updated --rz-profile-menu-padding is now --rz-profile-menu-padding-block and --rz-profile-menu-padding-inline

Steps link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-steps-number-padding is now --rz-steps-number-padding-block and --rz-steps-number-padding-inline
• Breaking Prev and Next icon is now rendered via CSS. Instead of <i class="rzi">navigate_next</i> and <i class="rzi">navigate_before</i> the component now renders <span class="rzi"></span>

Tabs link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-tabs-icon-margin is now --rz-tabs-icon-margin-inline
  • Updated --rz-tabs-tab-padding is now --rz-tabs-tab-padding-block and --rz-tabs-tab-padding-inline
• Breaking Updated Tab icon CSS classes <span class="rz-tabview-left-icon rzi" ... to <span class="rzi rz-tabview-icon" ....

Button link

• Update Removed $button-styles SCSS map and use $severity-styles-map and $base-styles-map to generate CSS for Button styles.

CheckBox link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-checkbox-margin is now --rz-checkbox-margin-block and --rz-checkbox-margin-inline
  • Updated --rz-checkbox-label-margin is now --rz-checkbox-label-margin-block and --rz-checkbox-label-margin-inline

ColorPicker link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-colorpicker-item-margin is now --rz-colorpicker-items-gap

DatePicker link

• Breaking New DatePicker markup. Revised HTML elements and CSS classes to better describe DatePicker's contents.
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-datepicker-header-padding is now --rz-datepicker-header-padding-block and --rz-datepicker-header-padding-inline
  • Updated --rz-datepicker-calendar-padding is now --rz-datepicker-calendar-item-padding
  • Updated --rz-timepicker-padding is now --rz-timepicker-padding-block and --rz-timepicker-padding-inline
  • Added --rz-datepicker-calendar-padding-block
  • Added --rz-datepicker-calendar-padding-inline
  • Added --rz-datepicker-popup-width
  • Added --rz-datepicker-month-dropdown-width
  • Added --rz-datepicker-year-dropdown-width
  • Added --rz-datepicker-prev-next-icon-size
  • Deleted --rz-datepicker-prev-next-button-border-radius
  • Deleted --rz-datepicker-header-line-height

DropDown link

• Breaking New DatePicker markup. Revised HTML elements and CSS classes to better describe DatePicker's contents.
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-dropdown-trigger-icon-margin is now --rz-dropdown-trigger-icon-margin-block and --rz-dropdown-trigger-icon-margin-inline
  • Updated --rz-dropdown-label-padding is now --rz-dropdown-label-padding-block and --rz-dropdown-label-padding-inline
  • Updated --rz-multiselect-checkbox-margin is now --rz-multiselect-checkbox-margin-block and --rz-multiselect-checkbox-margin-inline
  • Updated --rz-dropdown-chips-padding is now --rz-dropdown-chips-padding-block and --rz-dropdown-chips-padding-inline

DropDownDataGrid link

• Update Improved lookup styles:
  • Added --rz-lookup-search-margin-bottom
  • Added --rz-lookup-search-gap

Fieldset link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-fieldset-legend-margin is now --rz-fieldset-legend-margin-block and --rz-fieldset-legend-margin-inline
  • Updated --rz-fieldset-legend-padding is now --rz-fieldset-legend-padding-block and --rz-fieldset-legend-padding-inline
  • Updated --rz-fieldset-toggle-margin is now --rz-fieldset-toggle-margin-block and --rz-fieldset-toggle-margin-inline

FormField link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-form-field-filled-padding is now --rz-form-field-filled-padding-block and --rz-form-field-filled-padding-inline
  • Updated --rz-form-field-start-end-padding is now --rz-form-field-start-end-padding-block and --rz-form-field-start-end-padding-inline
  • Updated --rz-form-field-margin is now --rz-form-field-margin-block and --rz-form-field-margin-inline
  • Updated --rz-form-field-filled-numeric-padding is now --rz-form-field-filled-numeric-padding-block and --rz-form-field-filled-numeric-padding-inline
  • Updated --rz-form-field-label-left is now --rz-form-field-label-inset-inline-start

HtmlEditor link

• Update Changed Underline icon from format_underline to format_underlined

ListBox link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-listbox-checkbox-margin is now --rz-listbox-checkbox-margin-block and --rz-listbox-checkbox-margin-inline
  • Updated --rz-listbox-header-padding is now --rz-listbox-header-padding-block and --rz-listbox-header-padding-inline

Numeric link

• Breaking All CSS classes starting with .rz-spinner-* are renamed to .rz-numeric-*
• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-numeric-input-padding is now --rz-numeric-input-padding-block and --rz-numeric-input-padding-inline

RadioButtonList link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-radio-label-margin is now --rz-radio-label-margin-block and --rz-radio-label-margin-inline
  • Updated --rz-radio-margin is now --rz-radio-margin-block and --rz-radio-margin-inline

SpeechToTextButton link

• ---

SplitButton link

• Update Remove redundant CSS variables:
  • Deleted --rz-splitbutton-menu-button-width
  • Deleted --rz-splitbutton-menu-button-padding
  • Deleted --rz-splitbutton-menu-button-font-size

Switch link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-switch-circle-margin is now --rz-switch-circle-offset

TextArea link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-text-area-padding is now --rz-text-area-padding-block and --rz-text-area-padding-inline

TextBox link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-input-padding is now --rz-input-padding-block and --rz-input-padding-inline

Badge link

• Update Removed $badge-styles SCSS map and use $severity-styles-map and $base-styles-map to generate CSS for Badge styles.

Chip link

• Breaking Renamed spacing related CSS variables and updated values respectively:
  • Updated --rz-chip-padding is now --rz-chip-padding-block and --rz-chip-padding-inline

Notification link

• Breaking New Notification markup. The component now uses flex model for its layout.
• Breaking All CSS classes starting with .rz-growl-* are renamed to .rz-notification-*
• Added New --rz-notification-gap CSS variable.

Alert link

• Update Changed Alert icons:
  • check_circle_outline is now check_circle
  • error_outline is now error
  • info_outline is now info
  • lightbulb_outline is now lightbulb

ProgressBar link

• Update Removed $progressbar-styles SCSS map and use $severity-styles-map and $progressbar-base-styles to generate CSS for ProgressBar styles.