Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Blazor Components are Rendered Incorrectly

  • 3 minutes to read

This topic covers the reasons behind why DevExpress Blazor components may render incorrectly and provides possible solutions for those issues.

#Incorrect Resource Usage

If you do not see any customizations on a page (for example, UI elements are too large or small, or page content is black-and-white only), the application is unable to apply required resources correctly. Possible reasons may be:

#A Breaking Change Was Introduced

Beginning with v22.2, we are transitioning to our own rendering engine and introduced multiple related breaking changes. We are also reworking the internal structure of components to implement new features and enhance accessibility. Please review the list of breaking changes for more information and instructions. You can also refer to the following document to check solutions for the most common scenarios affected by aforementioned breaking changes: DevExpress Blazor Components - How to Update CSS Styles.

If you create a custom theme based on one of the DevExpress Blazor themes, your custom selectors may stop working after you upgrade to a new version. To resolve this issue, rebuild your theme with the theme’s source file that corresponds to the new version.

#Static Resources Are Cached

After you upgrade to a new version, you may see unexpected visual elements, infinite loading animations, incorrectly aligned nested elements, etc. Such issues may occur because a browser caches static resources belonging to previous versions. To resolve these issues, do one of the following:

  • Press Ctrl+F5 to clear the cache and reload the page.
  • Press Ctrl+Shift+Delete to open the browser’s window that allows you to specify what data you want to delete.

    Chrome - delete browsing data

We recommend that you refresh cached resources on user machines to avoid rendering issues. For example, you can add a file version to a theme link as follows:

cshtml
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css") rel="stylesheet" />

@code {
    private string AppendVersion(string path) => $"{path}?v={typeof(DevExpress.Blazor.ResourcesConfigurator).Assembly.GetName().Version}";
}

Note: this solution requires that you move a theme link to a Razor component in hybrid applications.

You can find another solution that uses IFileVersionProvider in applications generated by our project templates. This solution does not work in Blazor hybrid applications.

Such techniques ensure that web browsers on user machines use the current version of DevExpress CSS resources instead of the previously cached version. Refer to HTTP caching for more information about the browser cache.

#CSS Rules Conflict

Microsoft’s standard Blazor projects contain Bootstrap stylesheets that define the appearance of built-in pages and a navigation menu. Since certain Bootstrap classes are also used in DevExpress Blazor components, a CSS conflict may occur because both Bootstrap and DevExpress stylesheets apply the same CSS classes to DevExpress components. The table below lists classes that can cause conflicts in certain components:

Affected Components File to Review CSS Class to Update
DxTreeView, DxTabs, DxMenu NavMenu.razor.css .nav-item
DxButton, DxToolbar site.css and app.css .btn-primary, .btn-link

Modify rules for these classes to resolve conflicts. Refer to the following topics for more information on CSS rules: