Multilevel DropDown menu closed when click to another parent menu item

[Thinh]

Dear

I created multilevel dropdown menu like this : https://blazor.syncfusion.com/documentation/drop-down-menu/popup-items#populate-multilevel-sub-menu-items

When I click one parent menu item, then click another parent men item, the menu closed. What to do if I want the behavior like Windows context menu, the menu does not close?

[YuvanShankar Arunagiri]

Hi Thinh,

We have attempted to replicate the issue on our end but were unable to do so. We have prepared a sample to show how Context Menu open/close the sub menu correctly on our end. Kindly ensure the below method in your project, here only we are handling the open the context menu if it has sub menu/close the default context menu.

public void Selected(MenuEventArgs<ContextMenuItemModel> args)

    {

        if (args.Item.Content == "Space" || args.Item.Content == "Save As" || args.Item.Content == "Align")

        {

            isClose = true;

        }

        else

        {

            isClose = false;

        }

    }

If you still facing the issue, please share the issue replicable sample or replicate issue in our sample. Based on that we will check and provide you a better solution quickly.

Regards,

YuvanShankar A

Attachment: MenuBarSample_17290367.zip

[Thinh]

Dear YuvanShankar Arunagiri

I got my expected result by:

- removing OnClose from DropDownButtonEvents

- removing OnClose from MenuEvents

                <SfDropDownButton @ref="exportDropdownButton" IconCss="ico-icon icon-export" Content="@L["Export"]" >

                    <ChildContent>

                          <DropDownButtonEvents></DropDownButtonEvents>

                    </ChildContent>

                    <PopupContent>

                         <SfContextMenu @ref="exportContextMenu" TValue="MenuItem" ShowItemOnClick="true" >

                            <MenuEvents TValue="MenuItem" Created="ExportMenuCreatedHandler" ItemSelected="ExportToolbarMenuSelected"></MenuEvents>

                            <MenuItems>

                                <MenuItem Text=@L["Excel"] IconCss="e-icons icon-excel">

                                    <MenuItems>

                                        <MenuItem Id="TestExcelExportAllMenu" Text=@L["ExportAll"] ></MenuItem>

                                        <MenuItem Id="TestExcelExportSelectedMenu" Text=@L["ExportSelected"] Disabled=@exportDisabled></MenuItem>

                                    </MenuItems>

                                </MenuItem>

                                <MenuItem Text=@L["Word"] IconCss="e-icons icon-word">

                                    <MenuItems>

                                        <MenuItem Id="TestWordExportAllMenu" Text=@L["ExportAll"] ></MenuItem>

                                        <MenuItem Id="TestWordExportSelectedMenu" Text=@L["ExportSelected"] Disabled=@exportDisabled></MenuItem>

                                    </MenuItems>

                                </MenuItem>

                            </MenuItems>

                        </SfContextMenu>

                    </PopupContent>

                </SfDropDownButton>

[YuvanShankar Arunagiri]

Thanks for the update, Thinh,

 

We have checked your suggested code example on our end. But if we remove the OnClose event from the Menu component, then the Dropdown Button popup does not close properly. Kindly check your sample code once again and refer to the attached video demonstration.

 

Check the attached sample code file and get back to us if you need any further assistance on this.

Attachment: Index_5048e284.zip