Radzen Blazor Components v12.0: Markdown Editor, Resource Scheduling, Browser Export, and More

Radzen Blazor Components v12 is out. It brings three new components, led by a WYSIWYG Markdown Editor, lets the DataGrid export Excel and CSV straight from the browser, and adds resources to both the Scheduler and the Gantt. There is a new premium theme, Zen, and Radzen.Blazor now supports .NET trimming, so trimmed WebAssembly apps ship only the components they use.

If you're new here: Radzen Blazor is a free, open-source, MIT-licensed library of over 145 native Blazor components. Here is what's new in v12.

Three new componentslinkLink to this section

Markdown EditorlinkLink to this section

RadzenMarkdownEditor gives your users two ways to work with the same document. Design mode is a WYSIWYG editor that works on the rendered document and writes Markdown back. Source mode shows the raw Markdown. A built-in switcher (ShowModeSwitch) flips between them, and undo/redo history is shared across both.

The toolbar covers everything you would expect from Markdown: bold, italic, strikethrough, inline code and code blocks, headings, block quotes, bullet, numbered and task lists, links, images and horizontal rules. Tables get their own tools (RadzenMarkdownEditorTable and RadzenMarkdownEditorTableTools), which also appear as a context menu when the cursor is inside a table.

A few details that make it feel like a real editor: Ctrl+B/I/K/Z/Y shortcuts, pasting HTML or plain text converts it to Markdown, copying a selection copies Markdown, emoji shortcodes turn into emoji as you type, and RadzenMarkdownEditorCustomTool lets you add your own toolbar buttons.

Thanks to @artnim for contributing RadzenMarkdownEditor.

Try the Markdown Editor demo →

DateRangePicker and VirtualKeyboardlinkLink to this section

Picking a start and an end date is one of the most common inputs in business apps, and until now it took two DatePickers and some glue code. RadzenDateRangePicker does it in one control: a two-month calendar, min and max limits, and drill-down navigation to jump between months and years.

RadzenVirtualKeyboard is an on-screen keyboard for kiosks, POS terminals, shop-floor stations and other touchscreens without a physical keyboard. Attach it to an input or render it inline on the page. It supports custom layouts, a numpad mode, locale-specific layouts, and is itself keyboard accessible.

Try the DateRangePicker demo →

Try the VirtualKeyboard demo →

Export DataGrid to Excel and CSV in the browserlinkLink to this section

RadzenDataGrid can now export to Excel and CSV entirely on the client. No server endpoint, no separate export pipeline. The export respects the current sort, filters, column order and visibility, and format strings, so users get the exact table they are looking at.

await grid.ExportToExcelAsync("orders.xlsx", new DataGridExcelExportOptions
{
    Scope = DataGridExportScope.All
});

Export the current page or all rows. Grids using LoadData are fetched in chunks with progress reporting (DataGridExportOptions.Progress) and cancellation. Excel output applies the current theme (set UseTheme = false in the export options to skip it), template columns without a Property can supply an ExportValue, and ToWorkbookAsync returns the workbook so you can add a totals row or a chart with the spreadsheet API before saving.

Try the DataGrid export demo →

New premium theme: ZenlinkLink to this section

Zen is a new premium theme, included in Radzen subscriptions. It is monochrome by design: interface chrome stays quiet and color is reserved for status and data, so charts and KPIs stand out. Surfaces have a translucent, frosted look, and a consistent control size ladder means inputs, dropdowns and buttons line up without manual tweaking. It ships in light and dark variants.

See Zen in the demos →

All themes →

Plans and pricing →

Planning and resourceslinkLink to this section

The Scheduler answers "when is something happening?". The Gantt answers "in what order?". In v12 both can also answer "who or what is involved?".

Scheduler: group by resourcelinkLink to this section

Add RadzenSchedulerResource to a RadzenScheduler and set GroupByResource="true" to split appointments by room, employee, vehicle, team or any other resource. It works in every view: day, week, month, multi-day, planner, timeline and year.

Resources can be nested (group by location, then by room), laid out horizontally or vertically with GroupOrientation, and an appointment can belong to several resources at once through a collection property.

Two more Scheduler additions in this release:

• Resize appointments by dragging their edges in the day, week and multi-day views. Handle the AppointmentResize event to save the new duration.
• All-day row. Set AllDayProperty and the week view renders all-day appointments in a dedicated row at the top (ShowAllDay and AllDayText on RadzenWeekView).

Try the Scheduler demo →

Gantt: Resource ViewlinkLink to this section

Projects are planned around tasks, but delivered by people. The new Gantt Resource View shows the same project from the people's side: one lane per resource, tasks stacked when they overlap, resources nested into teams (ResourceParentIdProperty), an Unassigned lane for work nobody owns yet, and a workload histogram that makes overallocation visible at a glance.

Wire it up with ResourceData, ResourceIdProperty, ResourceTextProperty and TaskResourceIdProperty. For long-running programs there is also a quarter-based Years view, and the Year view has been rescaled to fit more on screen.

Try the Gantt Resource View demo →

Charts, DatePicker and TabslinkLink to this section

Three improvements to components you already use.

Charts. Crowded category labels now fit automatically: rotated, skipped at a regular stride, or shortened with an ellipsis, and clipped at the chart edge instead of spilling out. Column, bar, area and waterfall series include zero on the value axis by default, which RadzenValueAxis.Range (Auto, Data, IncludeZero) controls. Tick steps are computed from the data range. DateOnly and DateTimeOffset categories plot on a date axis in both RadzenChart and RadzenRangeNavigator, and area and column sparklines now use the full height.

DatePicker. Navigation is now drill-down: click the title to go from days to a month grid, then to a year grid. It is a quicker way to move across months and years. If you prefer the old behavior, set NavigationMode="DatePickerNavigationMode.DropDown".

Tabs. A new Overflow parameter decides what happens when tabs don't fit: Default shrinks them, Wrap moves them to a second line, Scroll adds horizontal scrolling, and Collapse puts the extra tabs in a dropdown at the end while keeping the selected tab visible.

Smaller apps with .NET trimminglinkLink to this section

Radzen.Blazor now supports .NET trimming. When you publish with PublishTrimmed, the trimmer also removes the Radzen components and code your app doesn't use, so trimmed Blazor WebAssembly apps get a smaller download. Under the hood, reflection-based code carries DynamicallyAccessedMembers annotations, and conditional DynamicDependency roots replace the previous LinkerConfig.xml.

<PublishTrimmed>true</PublishTrimmed>

The dynamic LINQ helpers (QueryableExtension and friends) are marked [RequiresUnreferencedCode], so you will see analyzer warnings if you call them directly in a trimmed app. TRIMMING.md explains what is covered and how to handle those cases.

More fixes and improvementslinkLink to this section

• RadzenMarkdown supports GFM strikethrough and task lists. A new HtmlVisitor renders Markdown to HTML and blanks javascript:, vbscript: and data: URLs.
• RadzenProfileMenuItem gets Action and Method parameters that render the item as an HTML form with an antiforgery token, which is what a logout link needs.
• RadzenDataGrid saves enum filter values in settings as numbers. Previously saved settings still load.
• Fixes for the FormField value bounce on re-render, side Dialog refresh, Menu/PanelMenu/ProfileMenu activation via assistive technology, area series line caps (an 11.0 regression), Spreadsheet XLSX files in Apple Numbers (thanks @pianomanjh), QRCode EncodeBytes masking, and Gravatar MD5 padding.

The full list is in the changelog.

Upgrading from v11linkLink to this section

A few defaults changed. Each one has a one-line opt-out if you want the previous behavior.

If your app relies on the previous DatePicker or Chart behavior, review the release notes before updating.

Get started with v12linkLink to this section

That's Radzen Blazor Components v12: free, open source, and MIT-licensed.

Update your Radzen.Blazor NuGet package and explore every new component in the live demos. The complete list of changes is in the v12.0.0 release notes.

If this helps with your Blazor projects, drop us a star on GitHub, and tell us in the forums what you'd like us to build next.

Explore Radzen Blazor Components

Try Radzen Blazor Studio

View plans and pricing