blazor-devexpress-dot-blazor-fd8dbec8.md
Contains methods that allow you to register DevExpress client resources, custom scripts, and themes.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.Resources.v25.2.dll
NuGet Package : DevExpress.Blazor.Resources
public static class DxResourceManager
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>
Once you choose a theme in the DevExpress Template Kit, 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>
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
DevExpress.Blazor.Reporting.JSBasedControls
| |
150
|
|
DevExpress.Blazor
| |
200
|
|
DevExpress.Blazor
DevExpress.Blazor.Dashboard
DevExpress.Blazor.Reporting.JSBasedControls
DevExpress.Blazor.RichEdit
| |
300
|
|
DevExpress.Blazor.Dashboard
DevExpress.Blazor.Reporting.JSBasedControls
| |
400
|
|
DevExpress.Blazor.Dashboard
DevExpress.Blazor.Reporting.JSBasedControls
| |
500
|
CommonResources.AceLanguageToolsJS
|
DevExpress.Blazor.Dashboard
DevExpress.Blazor.Reporting.JSBasedControls
| |
600
|
|
DevExpress.Blazor.Dashboard
DevExpress.Blazor.Reporting.JSBasedControls
| |
700
|
JSBasedReportingResources.WebDocumentViewerJS
|
DevExpress.Blazor.Reporting.JSBasedControls
| |
700
|
CommonResources.QueryBuilderJS
|
DevExpress.Blazor.Dashboard
DevExpress.Blazor.Reporting.JSBasedControls
| |
800
|
JSBasedReportingResources.ReportDesignerJS
|
DevExpress.Blazor.Reporting.JSBasedControls
| |
800
|
DashboardResources.DashboardJS
|
DevExpress.Blazor.Dashboard
| |
800
|
|
Required for Rich Text functionality in BI Dashboard and Report Designer.
| |
900
|
|
Required for Rich Text functionality in BI Dashboard and Report Designer.
|
Follow the steps below to register a custom version of a DevExpress 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));
})
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);
}
}
Object DxResourceManager
See Also