DxResourceManager Class
Contains methods that allow you to register DevExpress client resources, custom scripts, and themes.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.Resources.v25.1.dll
NuGet Package: DevExpress.Blazor.Resources
Declaration
public static class DxResourceManagerRemarks
If you use a DevExpress Blazor project template, your application automatically registers all scripts and resources DevExpress libraries require. In other cases, you need to call DxResourceManager.RegisterScripts and DxResourceManager.RegisterTheme methods in the Components/App.razor file:
<head>
@*...*@
@DxResourceManager.RegisterScripts()
@DxResourceManager.RegisterTheme(Themes.Fluent)
</head>
DevExpress Blazor Themes
Once you choose a theme in the Project Wizard, the Resource Manager automatically adds all resources the theme requires. The following code snippet registers a Fluent theme:
<head>
@*...*@
@DxResourceManager.RegisterTheme(Themes.Fluent)
</head>
The DxResourceManager.RegisterTheme method parameter allows you choose a theme from the built-in theme collection or create a new theme using the Clone() method. The following code snippet creates and registers a Fluent theme with a custom accent color:
<head>
@*...*@
@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
properties.Name = "Fluent Light Custom";
properties.SetCustomAccentColor("#107c41");
properties.AddFilePaths("css/fluent/FluentCustomStyles.css");
}))
</head>
DevExpress Resources
The Resource Manager automatically registers client DevExpress resources based on installed NuGet packages. For instance, if your project includes the DevExpress.Blazor.RichEdit package, the method registers scripts required for the Rich Text Editor component.
The Resource Manager allows you to replace some DevExpress resources with their custom versions. For instance, you can register a specific version of the jQuery script or use a custom DevExtreme bundle. The following table lists DevExpress resources that you can replace, their positions among other scripts, and NuGet packages that include these scripts:
Position | DevExpress Resource | NuGet Packages |
|---|---|---|
0 | DevExpress.Blazor.Dashboard | |
150 | DevExpress.Blazor | |
200 | DevExpress.Blazor | |
300 | DevExpress.Blazor.Dashboard | |
400 | DevExpress.Blazor.Dashboard | |
500 | DevExpress.Blazor.Dashboard | |
600 | DevExpress.Blazor.Dashboard | |
700 | DevExpress.Blazor.Reporting.JSBasedControls | |
700 | DevExpress.Blazor.Dashboard | |
800 | DevExpress.Blazor.Reporting.JSBasedControls | |
800 | DevExpress.Blazor.Dashboard |
Follow the steps below to register a custom version of a DevExpress resource:
- Pass the resource to the Unregister method to prevent the Resource Manager from loading this script.
- Call the Register method to register a custom version of this script. Note that the script should have the same Position as the corresponding standard resource.
The following example replaces the standard DevExtremeJS script with its custom version:
@DxResourceManager.RegisterScripts((config) => {
config.Unregister(CommonResources.DevExtremeJS);
config.Register(new DxResource("dx.all.js", CommonResource.DevExtremeJS.Position));
})
Custom Scripts
Call the Register method to register a non-DevExpress script globally. Note that you should register custom scripts after DevExpress resources.
@DxResourceManager.RegisterScripts((config) => {
config.Register(new DxResource("script.js", CommonResources.DevExtremeJS.Position + 1));
})
Call the LoadDxResources(IJSRuntime) method before you use the script’s API members for the first time. This method forces the Resource Manager to load client resources:
// ...
@code {
[Inject] IJSRuntime js;
protected override async Task OnAfterRenderAsync(bool firstRender) {
if(firstRender) {
await js.LoadDxResources();
await js.InvokeAsync("a-method-from-a-custom-script");
}
await base.OnAfterRenderAsync(firstRender);
}
}