1. Home
  2. Forum
  3. Blazor
  4. Keep Parent expanded on subitem click

Keep Parent expanded on subitem click

Hi there,

I am building a navbar where Menu bar is is within a sidebar in hamburger mode.  Is it possible to prevent the menubar from collapsing the menu when a subitem is clicked?  Bonus points if you can change the CSS of the subitem to an active link CSS class.

16 Replies
SD Saranya Dhayalan Syncfusion Team April 21, 2020 11:32 AM UTC

Hi Rudi, 
 
Thank you for contacting Syncfusion support 
 
We have validated your reported issue and we are able to reproduce this issue in our end. We have logged a defect report for this, and the fix will be available in our upcoming Nuget patch release. You can track the status of this defect using below link from our feedback portal,  
 
 
Regards, 
Saranya D 


JO Joe October 20, 2021 09:32 PM UTC

Hi- did anything come of this? I'm still having the same issue.

Thanks,
joe


HA HappyCamper October 20, 2021 09:33 PM UTC

Nope... this was never fixed...


AS Aravinthan Seetharaman Syncfusion Team October 22, 2021 02:01 PM UTC

 
We have checked your query. We would like to let you know that ShowItemOnClick property as true to prevent parent menu closing on clicking SubMenu in Hamburger mode. Please refer the below demo, code snippet and sample. 
 
 
Index.razor 
 
<SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation" HamburgerMode="true" ShowItemOnClick="true"></SfMenu> 
 
 
 
Please check the above details and if you are still facing issue, please share the below details. 
 
  • If possible, please reproduce the issue in provided sample or share the issue reproducible sample.
  • Please share us the video demonstration of this issue.
  • Please share the Syncfusion package version.
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Aravinthan S 


PA paul replied to Aravinthan Seetharaman December 29, 2021 12:12 AM UTC

Hi Syncfusion, 


I also face similar issue. I also don't want to collapse parent on subitem click in hamburger mode.

In the Demo video you showed. when you click "Comments" then clicked "Category 2". Is there a way for Comments to remain open and not to collapse ? 


Thanks

Paul

 


GK Gayathri KarunaiAnandam Syncfusion Team January 3, 2022 05:12 PM UTC

Hi Paul, 

We have prepared a sample by using the ItemSelected and OnClose event of Menu component to achieve your requirement. Please check the below code snippet. 

Code: 
 
<SfMenu TValue="MenuItem"  Orientation="Orientation.Vertical" HamburgerMode="true" ShowItemOnClick="true" CssClass="dock-menu" @ref="MenuObj"> 
    <MenuItems> 
        <MenuItem Text="File" Id="file"> 
            <MenuItems> 
                <MenuItem Text="Open" Id="open" ></MenuItem> 
                <MenuItem Text="Save" Id="save" ></MenuItem> 
                <MenuItem Text="Exit" Id="exit" ></MenuItem> 
            </MenuItems> 
        </MenuItem>     
        <MenuItem Text="Go" Id="go"></MenuItem> 
        <MenuItem Text="Help" Id="help"></MenuItem> 
    </MenuItems> 
    <MenuEvents TValue="MenuItem"  OnClose="onClose" ItemSelected="itemSelected"></MenuEvents> 
</SfMenu> 
@code { 
 
    SfMenu<MenuItem> MenuObj; 
    public bool isClose = false; 
 
     private async Task itemSelected(MenuEventArgs<MenuItem> args) 
    { 
        if(args.Item.Items != null) 
            { 
            isClose = false; 
        } else { 
            isClose = true; 
        } 
        //For handling parent item without submenu 
        if(args.Item.Text == "Go" || args.Item.Text =="Help") 
        {  
           await MenuObj.Close(); 
           isClose = false; 
        } 
    } 
 
    private void onClose(BeforeOpenCloseMenuEventArgs<MenuItem> args) 
    { 
        //To make the submenu remain open 
        if (isClose) 
        { 
            args.Cancel = true; 
            
        } 
         
    } 
 
} 

For your convenience, please check the below sample link. 


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

Regards, 
Gayathri K 
 
 


PA paul replied to Gayathri KarunaiAnandam January 4, 2022 11:10 PM UTC

Hi Gayathri KarunaiAnandam,


Thank you for your reply.  Sorry I was not clear with my requirements.

Actually I also did same approach as you did.


But my requirement is a little bit different. I'm using it as a navbar. I want the menu to remain open unless I click parent to collapsed.


In this code, if i click outside the menu, it always collapse. It should remain open.

E.G. 

  1. Click File
  2. Click anywhere outside menu
  3. File will collapse (NG)

Thanks
Paul



GK Gayathri KarunaiAnandam Syncfusion Team January 7, 2022 06:34 AM UTC

Hi Paul, 

Based on Menu architecture, when we click outside the menu target, it closes automatically. So, we need to validate more on your requirement and will update you with further details on January 10th,2022. 

Regards, 
Gayathri K 


SP Sangeetha Priya Murugan Syncfusion Team January 11, 2022 04:07 PM UTC

Hi Paul, 
 
We are facing some complexities with your requirement, because it overrides our basic behavior. So, we will update you the further details on January 12th. We appreciate your patience until then. 
 
Regards, 
Sangeetha M 


PA paul April 11, 2022 12:14 AM UTC

Hi  Sangeetha M,


Can I follow up regarding this issue ?


Thanks

Paul


TS Thaneegairaj Sankar Syncfusion Team April 18, 2022 10:13 AM UTC

Hi Paul,


We have issue related to your requirement. So, will provide the sample after the below issue has been resolved. You can track its status from the below feedback link.


Feedback Link: https://www.syncfusion.com/feedback/34184/issue-occur-while-using-menu-with-showitemonclick-is-enabled


The fix will be available in our upcoming patch release which is scheduled for May 4th 2022.


Regards,

Thaneegairaj S


YA YuvanShankar Arunagiri Syncfusion Team May 5, 2022 05:55 AM UTC

Hi Paul,


We are facing more complexity on implementing this fix. So, we have planned to include this in our upcoming patch release, which will be scheduled on 18th May ,2022. We appreciate your patience until then.


You can also track the status of this bug by using below feedback portal link


Feedback Link: https://www.syncfusion.com/feedback/34184/issue-occur-while-using-menu-with-showitemonclick-is-enabled


Regards,

YuvanShankar A


YA YuvanShankar Arunagiri Syncfusion Team May 26, 2022 10:28 AM UTC

Hi Paul,


We are sorry for the inconvenience. The issue is due to some technical glitches at our end. We will resolve this in our volume 2 release, which is scheduled on end of the June month, 2022. Please use the below custom package until then.

Custom package:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.Blazor.20.1.0.5684499604


And, we have prepared the sample based on your requirement. Please refer the below code snippet.

[Index.razor]:

@using Syncfusion.Blazor.Navigations

@inject IJSRuntime JS

 

<SfMenu @ref="MenuObj" TValue="MenuItem" HamburgerMode="true" ShowItemOnClick="true">

  <MenuItems>

    <MenuItem Text="File" Id="file">

      <MenuItems>

        <MenuItem Text="Open" Id="open"></MenuItem>

        <MenuItem Text="Save" Id="save">

          <MenuItems>

            <MenuItem Text="Save As" Id="saveas"></MenuItem>

            <MenuItem Text="Save To" Id="saveto"></MenuItem>

            <MenuItem Text="Save File" Id="savefile"></MenuItem>

          </MenuItems>

        </MenuItem>

        <MenuItem Text="Exit" Id="exit"></MenuItem>

      </MenuItems>

    </MenuItem>

    <MenuItem Text="Go" Id="go"></MenuItem>

    <MenuItem Text="Help" Id="help"></MenuItem>

  </MenuItems>

  <MenuEvents TValue="MenuItem" OnClose="onClose" ItemSelected="itemSelected"></MenuEvents>

</SfMenu>

 

@code{

  SfMenu<MenuItem> MenuObj;

  public bool isClose = true;

  public bool isDocumentClick = false;

 

  protected override void OnAfterRender(bool firstRender)

  {

    if (firstRender)

    {

      var lDotNetReference = DotNetObjectReference.Create(this);

      JS.InvokeVoidAsync("GLOBAL.SetDotnetReference", lDotNetReference);

    }

  }

 

  private void itemSelected(MenuEventArgs<MenuItem> args)

  {

    if (args.Item.Items != null)

    {

      isClose = false;

    }

    else

    {

      isClose = true;

    }

    isDocumentClick = false;

  }

 

  private void onClose(BeforeOpenCloseMenuEventArgs<MenuItem> args)

  {

    if (isClose || isDocumentClick)

    {

      args.Cancel = true;

    }

  }

 

  [JSInvokable("HamburgerMenu")]

  public void documentClick()

  {

    isDocumentClick = true;

  }

}


[_Host.cshtml]:

<script>

        var GLOBAL = { };

        GLOBAL.DotNetReference = null;

        GLOBAL.SetDotnetReference = function (pDotNetReference) {

             GLOBAL.DotNetReference = pDotNetReference;

        };

 

      function bodyClick(e) {

        if (!document.querySelectorAll('.e-menu-header').length || !document.querySelectorAll('.e-menu-parent').length) {

          return;

        }

        if (!e.target.classList.contains("e-menu-container") && e.target.closest('.e-menu-container') == null) {

          if (GLOBAL.DotNetReference) {

                GLOBAL.DotNetReference.invokeMethodAsync("HamburgerMenu", "documentClick");

          }

        }

      }

    </script>


Please get back to us if you need further assistance on this.


Regards,

Yuvan Shankar A


YA YuvanShankar Arunagiri Syncfusion Team July 1, 2022 01:36 PM UTC

Hi Paul,


We are glad to announce that our Essential Studio 2022 Volume 2 release v20.2.0.36 is rolled out. We have included the fix for this issue in this release and is available for download under the following link.


https://www.syncfusion.com/forums/175975/essential-studio-2022-volume-2-main-release-v20-2-0-36-is-available-for-download


Feedback link: https://www.syncfusion.com/feedback/34184/issue-occur-while-using-menu-with-showitemonclick-is-enabled


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.


Regards,

YuvanShankar A


EN Ender January 2, 2023 08:43 AM UTC

Hi,


I am facing with a problem during this operation 


private void onClose(BeforeOpenCloseMenuEventArgs<MenuItem> args)

  {

    if (KeepOpen)

    {

      args.Cancel = true;

    }

  }


For menu it is okey. It is keeping the menu expanded as expected. (I am using this menu as a left navbar). When i click outside of the component it is checking for closing or not. But the main problem is that when i click into any syncfusion component such as inputs it is focusing out from my clicked input. How can i solve this problem. 


YA YuvanShankar Arunagiri Syncfusion Team January 6, 2023 06:57 AM UTC

Ender,


We have attempted to reproduce the issue in our end, but were unable to do so. We have created a sample and video demonstration to show that the input field can focus even the menu in expand.


If you are still experiencing the issue, please provide us with a reproducible sample or replicate the issue in our sample. Additionally, please share a video demonstration of the issue. With this information, we will be able to better understand the problem and work on a solution for you.


Regards,

YuvanShankar A


Attachment: Flonnect_20230106_af35b7893c8d4841a60ffded346ddd6d_6c69bd88.zip

Loader.
Up arrow icon