Scrollable dyanmically built MenuItem

[Peter]

Hi

Using Blazor 18.0.39 as I'm not able to roll forward to a later version due Sidebar is not visible when using dock state on initial loading

I have a SfSidebar which includes a SfMenu within its ChildContent:

<SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" DockSize="60px" EnableDock="true" Type=SidebarType.Push @ref="sideBar" @bind-IsOpen="SidebarToggle">
            <ChildContent>
                    <ul>
                        <li class="sidebar-item" id="toggle" @onclick="Toggle">
                            <span class="sf-icon expand"></span>
                            <span class="menu" title="Menu">ICE-T</span>
                        </li>
                    </ul>
                    <SfMenu CssClass="dock-menu" Items="@toolbarButtons" Orientation="@VerOrientation" @ref="MainMenu" EnableScrolling="true">
                            <MenuEvents TValue="MenuItem" Opened="onMenuOpened" ItemSelected="onMenuClicked"></MenuEvents>
                     </SfMenu>
            </ChildContent>
            </SfSidebar>

The left docked SfMenu's Items are a serious of buttons (@toolbarButtons)as shown in the attached screen shot.  Some of the SfMenu's Items have a List<MenuItem> of submenu entries assigned to them which are dynamically built.  One such menu of speed dial targets is shown in the supplied screenshot and begins with "Dial Pad" but has ~10 entries after the bottom "Students" entry shown.

The menu of speed dial targets shown in the supplied screenshot does not scroll and I'd like the user to be able to use their mouse wheel to scroll the menu.  I'd prefer not to have scrollbars to keep the menus clean.  Mt SfMenu has EnableScrolling="true" but this does not seem to extend to submenu items which are dynamically built.

Can you tell me howthe SfMenu can be configured to allow a user to be able to use their mouse wheel to scroll a dynamically built menu of List<MenuItem>.  Thanks

Peter,

Attachment: Menu_Scroll_eac6488e.zip

[Gayathri KarunaiAnandam]

Hi Peter, 

Thank you for contacting Syncfusion support. 

We have checked your reported query. 

Query 1:  I'm not able to roll forward to a later version 

 

Sorry for the inconvenience caused. 

 We will include this fix in our 2021 Volume 1 main release which is expected to be rolled out on 29^th, March 2021. We appreciate your patience until then. 

Query 2: to scroll the menu 

 

We can scroll the submenus of menubar by using EnableScrolling property. We have prepared a sample in which the submenus scroll when its heights exceeds 320px. Please check the below code snippet. 

 

<SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="Sidebar" @bind-IsOpen="SidebarToggle"> 

            <ChildContent> 

                <div class="main-menu"> 

                    <p class="main-menu-header">MAIN</p> 

                    <div> 

                        <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"EnableScrolling="true"> 

                            <MenuEvents TValue="MenuItem" OnOpen="@BeforeOpenHandler"></MenuEvents> 

                        </SfMenu> 

                    </div> 

                </div> 

                <div class="action"> 

                    <p class="main-menu-header">ACTION</p> 

                    <button class="e-btn action-btn" id="action-button">+ Button</button> 

                </div> 

            </ChildContent> 

        </SfSidebar> 

 

@code { 

 

private void BeforeOpenHandler(BeforeOpenCloseMenuEventArgs<MenuItem> e) 

    { 

        if (e.ParentItem.Text == "Settings") 

            e.ScrollHeight = 320; 

         

    } 

} 

For your reference, we have prepared a sample based on your scenario. Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/163808/ze/sidrebar-270278467 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Peter]

Gayathri

Thanks for your prompt response.  The sample code you've provided has been integrated with my project and my menus are now scrolling nicely.

Thanks also for the update on the expected release date for 2021 Volume .  I'm looking forward to that/

Cheers

Peter,

[Gayathri KarunaiAnandam]

Hi Peter, 

Thanks for the update. 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 

Gayathri K