BuyLog In
Breaking Change T1070927
Visible to All Users

DxContextMenu - The component render has changed

What Changed

In previous versions, our Context Menu component renders items in the component's parent element in the DOM tree:

HTML
<body>
    <!-- ... -->
    <!-- Сontainer that invokes the Context Menu -->
    <div class="component-container">
        <div class="dxbs-preventsel target-container">...</div>
        <!-- DxContextMenu -->
        <ul class="dx-blazor-context-menu">
            <!-- DxContextMenuItem -->
            <li>
                <div class="dx-blazor-context-menu-item">
                <!-- ... -->
                </div>
            </li>
            <!-- ... -->
        </ul>
    </div>
</body>

In v22.1, the Context Menu uses the DevExpress DropDown component for Blazor to display items. Due to this change, items are rendered as follows:

HTML
<body>
    <!-- ... -->
    <!-- Сontainer that invokes the Context Menu -->
    <div class="component-container">
        <div class="dxbs-preventsel target-container">...
            <!-- Context Menu -->
            <dxbl-popup-portal>...</dxbl-popup-portal>
        </div>
    </div>
    <!-- ... -->
    <!-- Context Menu -->
    <dxbl-popup-root>
        <dxbl-popup-cell>
            <dxbl-dropdown>
                 <dxbl-dropdown-dialog>
                     <div>
                         <!-- Context Menu items -->
                     </div>
                </dxbl-dropdown-dialog>
            </dxbl-dropdown>
        </dxbl-popup-cell>
        <!-- SubMenu -->
        <dxbl-popup-cell>
            <dxbl-dropdown>
                <dxbl-dropdown-dialog>
                    <div>
                        <!-- SubMenu items -->
                    </div>
                </dxbl-dropdown-dialog>
            </dxbl-dropdown>
        </dxbl-popup-cell>
    </dxbl-popup-root>
</body>

Reasons for Change

Previously, specific CSS properties applied to the parent element of the Context Menu might clip or corrupt the item's content (for instance, if users set the overflow property to hidden or scroll). We changed how the component is rendered to avoid such side effects.

Impact on Existing Apps

This change affects applications with Context Menu if you apply a CSS selector that relies on the component's position in the DOM tree.

How to Update Existing Apps

Update CSS selectors to take into account the new position of Context Menu and its items in the DOM tree. You can also use the CssClass property for the Context Menu and CssClass and SubMenuCssClass properties for the Context Menu items as follows:

Razor
<DxContextMenu CssClass="my-context-menu-style">
    <Items>
        <DxContextMenuItem Text="Name" CssClass="my-item-style" SubMenuCssClass="my-submenu-style">
            <Items>
                @* ... *@
            </Items>
        </DxContextMenuItem>
        @* ... *@
    </Items>
</DxContextMenu>

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.