Pixata.Blazor 5.11.0

Pixata.Blazor

Like many developers, I find myself writing the same Blazor components over and over again. I have gathered some of those components together in one place, and am making them available for anyone else who might find them useful.

A Nuget package is available for these components.

Version 5.11.0 adds PixataButton, a plain button with the package's theme colours, fill modes, roundness and sizes, which can show a spinner while its action runs, and PixataPrimaryButton and PixataSecondaryButton, the same button with defaults for a page's main action and the others next to it. See the buttons documentation

Version 5.10.0 adds FocusedElementSelector to PixataWindow, to choose the element that gets the focus when the window opens

Version 5.9.1 fixes pressing Enter in a PixataDatePicker, PixataDateInput or PixataDateRangePicker input, which didn't submit the form it was in

Version 5.9.0 adds PixataTreeView, which shows flat or hierarchical data as a tree, with expanding and collapsing, loading children on demand, selection, checkboxes, templates, links, and drag and drop within a tree, between trees and on to a grid. It also adds PixataFieldReader.TryGetValue(), which reads a property without throwing if the item doesn't have it. See the tree view documentation

Version 5.8.0 makes two changes to the grid's filter row...

• Columns have a ShowFilterClearButton parameter. Set it to false to hide the clear button in the column's filter row cell but keep the operator drop-down, such as for a numeric column, where it's easy enough to delete what was typed
• Behaviour change: the drop-down in a PixataEnumGridColumn's filter row cell now starts with an "(All)" entry, which clears the filter, and shows it when there's no filter, in place of "-Select value-". Its text comes from the grid's FilterAll message. Set AddAllEntry="false" on the column to leave it out. See typed columns

Version 5.7.0 lets a grid column's custom filter template replace its Filter with a new one, so it can join its descriptors with Or, such as to search two fields at once. See custom filters

Version 5.6.0 makes some more changes that help when moving from Telerik's components...

• PixataDateInput, PixataDatePicker and PixataDateRangePicker have a Size parameter (sm, md or lg, from PixataThemeConstants.Size), as the drop-downs and radio group do. See the date picker documentation
• PixataGrid has a FilterRowDebounceDelay parameter, which sets how many milliseconds the filter row waits after the user stops typing before it filters (150 by default, as before), so a grid that reads from the server through OnRead isn't asked for data on every key
• Grid columns have an IgnoreTime parameter, which makes the filter on a DateTime column compare the date only, so "on 21/10/2026" finds anything that day. For data that comes through OnRead, you can call args.Request.RemoveTime(...) instead, in place of Telerik's TelerikFilterHelper.RemoveTime(). See dates with a time
• Behaviour change: IgnoreTime is on by default for a PixataDateGridColumn, so its "on" filter now finds the items at any time on the day, rather than only those at midnight. "Before" and "on or after" are unchanged. Set IgnoreTime="false" to compare the time as well
• This version depends on Pixata.Extensions 2.23.0

Version 5.5.0 makes the notifications suit a dark theme, and stops them needing Font Awesome. The toast's background and text now follow --pixata-blazor-surface-bg and --pixata-blazor-text-color (or the new --pixata-notification-bg and --pixata-notification-color), the close button's cross is drawn in the colour of the text around it, and the default icons are built-in SVG ones. It also depends on Pixata.Extensions 2.22.0. Versions 5.0.0 to 5.4.0 depended on Pixata.Extensions 2.21.0, which doesn't have the grid types, so any page with a PixataGrid threw a TypeLoadException. The notifications' class names have changed, so if you styled them yourself, see styling changes in v5.5.0 below.

Version 5.4.0 lets you theme the audit viewer, Confirm, Inform and the notifications through the CSS variables in pixata.css, lets notifications show formatted messages (such as a list), and changes the notifications' default icons to ones in Font Awesome's free set. Some class names and ids have changed, so if you styled any of these yourself, see styling changes in v5.4.0 below.

Version 5.3.0 makes some changes that help when moving from Telerik's components...

• PixataDropDownList has an icon-only mode, set with the new Icon (or IconTemplate) parameter. See the drop-downs documentation
• The content of a PixataGridCommandColumn is now given the row's item, so its buttons can depend on the row. If a template inside the column also uses context, add Context="row" to the column. See the grid documentation
• Behaviour change: when you set PixataTabStrip.ActiveTabId one way and handle ActiveTabIdChanged yourself, the tab now only changes when you set ActiveTabId, as in Telerik, so you can load a tab's data before it is shown. @bind-ActiveTabId works as before. See the tab strip documentation
• Leaving a page while a date picker, calendar or VirtualiseWithState is starting up no longer crashes the circuit

Version 5.2.0 adds PixataDateRangePicker, for picking the start and end of a range of dates, and gives PixataCalendar a range selection mode and the Views parameter for showing more than one month side by side. See the date picker documentation for details.

Version 5.1.0 adds typed grid columns (PixataTextGridColumn, PixataNumericGridColumn, PixataDateGridColumn and PixataEnumGridColumn) with short lists of filter operators, the FilterOperators and ShowFilterCellButtons column parameters, and PixataGridBoolFilter, a three-state checkbox filter for bool columns. See the grid documentation for details.

Version 5.0.0 adds a large set of new components: PixataGrid (with Excel export in the separate Pixata.Blazor.Grid.Excel package), the date picker, drop-downs, tab strip, editor, file select and upload, dialogs, window, wizard and stepper, radio group, switch, charts, drop-down and split buttons, scheduler, and the FormRowDate form row. See the documentation pages below for details.

Styling changes in v5.5.0

These only affect you if you wrote CSS of your own for the notifications, or relied on their default look. See Notifications for the details.

• Notification classes. The classes inside the notification area now start with pixata-blazor-notification, so your own styles for classes such as message or icon no longer land on the notifications. notifications-area is now pixata-blazor-notification-area, notification is pixata-blazor-notification, and new, remove, icon, message and dismiss are pixata-blazor-notification- followed by the old name. Their styles have moved from the component's scoped CSS into pixata.css.
• Notification icons. The default icons are now built-in SVG ones, so you don't need Font Awesome for them. Call NotificationHelper.UseFontAwesomeIcons() in Program.cs if you want Font Awesome's icons back. NotificationHelper.GetIconClass() now returns "" for a type that shows the built-in icon, and the new GetDisplayIcon() gives you what to pass to PixataIcon to show the same icon as the notifications.
• Notification colours. The background was always white. It now comes from --pixata-notification-bg, which defaults to --pixata-blazor-surface-bg, and the text from --pixata-notification-color (which defaults to --pixata-blazor-text-color) rather than the page's text colour. The corners are now rounded (--pixata-notification-border-radius).
• Close buttons. The cross on a pixata-btn-close button was always black. It's now drawn in the colour of the text around it, or in --pixata-close-button-color if you set that.

Styling changes in v5.4.0

These only affect you if you wrote CSS of your own for these components, or relied on their default look.

• Audit viewer classes. The viewer's styles have moved from a <style> block inside the component into pixata.css, and every class now starts with pixata-blazor-audit-, followed by the old name without any audit- it started with. So view-btn is now pixata-blazor-audit-view-btn, and audit-timeline is now pixata-blazor-audit-timeline. The old names were global, so they could clash with your own CSS, and the block's rules (for .filters, .spinner, .user and so on) applied to the rest of your page while the viewer was on it. The colours now come from the --pixata-* variables, so the viewer follows your theme, and it uses your page's font rather than the system font. See styling the audit viewer.
• Confirm and Inform ids. The confirmOverlay, confirmOverlayContent, informOverlay and informOverlayContent ids are now the classes pixata-blazor-confirm-overlay, pixata-blazor-confirm-content, pixata-blazor-inform-overlay and pixata-blazor-inform-content, so you can have more than one on a page. The pop-up has a softer shadow and smaller corners, and both can be changed with variables. See Containers.
• Notification icons. The default icons are now Font Awesome's solid (fas) ones, which are in the free set, rather than the regular (far) ones, most of which are Pro only. The icon colours now come from CSS variables, so NotificationHelper.GetIcon() is obsolete. See Notifications.

I sometimes waffle on about these components in my blog. No-one reads it, but it satisfies my deeply buried desire to be a writer. If you read the blog, you'll realize why the desire is still deeply buried!

There is a complementary package, which contains additional components for those who have a subscription to Telerik.

Sample project

I have added a Blazor web project to the repository, and use that to try out and demonstrate the components. It doesn't contain samples for all the components yet, but I hope to add more over time. It is deployed at test.pixata.co.uk.

Documentation

The documentation is split over the following pages...

Registering dependencies

Some components in this package require services to be registered in the DI container. To make this easier, you can use the AddPixataBlazor extension method in your Program.cs file...

builder.Services.AddPixataBlazor();

This registers the following services (all from this package)...

PersistentStateHelper<T> does the same job as the [PersistentState] attribute added in .NET 10. This one was written around .NET 8, and is still useful for projects targetting .NET versions before 10.

It also registers Blazored.LocalStorage, which ScrollStateService needs. This package has always referenced Blazored.LocalStorage, but until v2.34.0 it left you to register it, so unless you knew to add builder.Services.AddBlazoredLocalStorage() yourself, your app fell over at startup when the container was validated. If you have already registered it (with your own options, for example), your registration is left alone.

Note that you need to do this in any Program.cs file, so if you have a mixed rendering mode (both server-side and client-side), you'll need to call AddPixataBlazor in both Program.cs files.

It is a good idea to add this line after your own service registrations, as it checks for duplicate registrations. Therefore, if you have already registered any of the services, you will see a message in your console...

A service of type TemplateHelper has already been registered

This isn't actually a problem, but removing the duplicate registration will keep the code file a bit cleaner.

The audit viewer and the payload encryption have their own registration methods, as most apps don't want them. See the pages listed above.

The dialog host

If you want to show the alert, confirm and prompt dialogs from code (with PixataDialogFactory), add the host component to your layout, inside an interactively rendered component...

@using Pixata.Blazor.Components

<PixataDialogHost />

If you ask for one of these dialogs without a host on the page, you get an exception telling you to add it. If your layout is rendered statically and only some pages are interactive, put the host in those pages instead, as it has to share a DI scope with the code that shows the dialogs. See Dialogs for more.

Styling

Don't forget to add the stylesheet, or the components will render unstyled...

<link rel="stylesheet" href="_content/Pixata.Blazor/pixata.css" />

See Styling for what's in it, and how to fit it to your own theme.