Menu item should remain selected on click and not collapse.

[Robert Tabacaru]

Hi, I use a menu component. There are two problems

     - on clicking the item, it doesn't remain selected. Background color is blue, on hover is red, and if I click the menu item, I want it to remain selected. let's say, red.

     - the second problem is when I have children. My menu is in hamburger Mode. When I expand the menu, I see the children Items. However, when I click one child, the menu doesn't remain selected and it collapses. I want it to stay as it is and the clicked item to be selected.

It looks like this on hover. If I click on child one or two, the parent-children collapse. I expect to remain as it is on hover. 

The same happens with the items without children. If I hover over it, it will be red, but once I click it, I want to remain selected(red for example).

<ejs-sidebar id="sidebar-menu" class="dock-menu" #sidebarTemplate [enableDock]='true' 

                  [dockSize]='"0px"'  [target]='".main-content"'> 

                  <div class="main-menu">                      

                      

                      <ejs-menu #menu 

                                [items] = 'menuItems'

                                orientation = 'Vertical'

                                cssClass = 'dock-menu'

                                [hamburgerMode] = true

                                [showItemOnClick] = true>

                        ejs-menu>                    

                  div>                 

              ejs-sidebar>

Tanks.

[Arunkumar Devendiran]

Hi Robert Tabacaru, 

 

Please let us know the following details, 

 

1)      Could you please confirm us which CSS version and script version you are using in your project? 

2)      Could you please ensure us any customization performs in your end? 

3)      If possible, could you please share the code snippet or video demonstration you are facing a problem. 

 

Could you please confirm the above details? So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 

 

Regards, 

Arunkumar D 

[Robert Tabacaru]

Hi Robert Tabacaru, 

 

Please let us know the following details, 

 

1)      Could you please confirm us which CSS version and script version you are using in your project? 

2)      Could you please ensure us any customization performs in your end? 

3)      If possible, could you please share the code snippet or video demonstration you are facing a problem. 

 

Could you please confirm the above details? So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 

 

Regards, 

Arunkumar D 

Hi Arukuman, I used this example: SourceCode+Demo

What I've changed in my .css file is the background color and hover color. 

And as you see in my html, I have showItemOnClick = true and hamburgerMode=true. 

So you can take as an example exactly what you have here on Syncfusion. Demo 

[Arunkumar Devendiran]

Hi Robert Tabacaru, 

 

Thanks for your update. 

 

We have checked your provided screenshot and we suspect that you are trying to change the background color(red) for all child items in which parent item selected and another issue is you don’t need to collapse the menu items while selecting items in hamburger mode. We are working based on that and could you please provide more information if we misunderstood your requirement. 

 

Regards, 

Arunkumar D 

[Robert Tabacaru]

Hi Arunkumar, that's right. When a user wants to go to "Home", after select, home should have the color red and remain like this till another tab is selected. In this way, the user knows where he is. 

When we have children, I want to select a child and should remain selected(background red) and don't have to collapse the menu while selecting items. Right. 

[Arunkumar Devendiran]

Hi Robert Tabacaru, 

 

We have created the sample for your reported query in that by setting the args.cancel property as true in beforeClose event we have prevented the collapse the menu items while clicking on the child items. We would inform you that we have achieved background color to menu items by using styles. Please refer the below sample link. 

 

Sample link: 

https://stackblitz.com/edit/angular-nc87fc-5cvpzi?file=app.component.ts 

 

Regards, 

Arunkumar D 

[Robert Tabacaru]

Hi Arunkumar Devendiran, It looks nice so far.

     What about background color of selected item?  When an item is selected, it should have a background different than others.  Should be selected. 

Thank you!

[Madhan Venkateshan]

Hi Robert Tabacaru, 

 

Good day to you. 

 

You can achieve this requirement by adding your own custom css class (lets say ‘selected’ css class) to li element in ‘select’ event of Menu. Please refer the below sample link. 

 

Sample link: https://stackblitz.com/edit/angular-nc87fc-abuf2v?file=app.component.ts 

 

Regards, 

Madhan V 

[Robert Tabacaru]

Hi Robert Tabacaru, 

 

Good day to you. 

 

You can achieve this requirement by adding your own custom css class (lets say ‘selected’ css class) to li element in ‘select’ event of Menu. Please refer the below sample link. 

 

Sample link: https://stackblitz.com/edit/angular-nc87fc-abuf2v?file=app.component.ts 

 

Regards, 

Madhan V 

Hi Madhan Venkateshan, thank you very much for helping me. Have a nice day!

[Robert Tabacaru]

Hi Robert Tabacaru, 

 

Good day to you. 

 

You can achieve this requirement by adding your own custom css class (lets say ‘selected’ css class) to li element in ‘select’ event of Menu. Please refer the below sample link. 

 

Sample link: https://stackblitz.com/edit/angular-nc87fc-abuf2v?file=app.component.ts 

 

Regards, 

Madhan V 

Hi Madhan Venkateshan, I have another question about this menu component.

Now on select, I can give a style to the selected item. There are other points here. 

- I would like on selecting a child item, to select the parent too(should be selected to).

- another problem appears when I collapse the menu and expand it again, the selected item style doesn't persist. Is it possible to memorize somehow the selected item?

- is it possible to select the first item menu on initialization(to add selected style on initialization.)? The overview should be selected at the beginning.

Thank you!  

[Madhan Venkateshan]

Hi Robert Tabacaru, 

 

Good day to you. 

 

We achieved your requirement by using ‘created’ event to select first menu item on initialization and by using ‘beforeItemRender’ event to persist the selected item by storing previous selected item text on ‘select’ event. Please refer the below sample link. 

 

https://stackblitz.com/edit/angular-nc87fc-abuf2v?file=app.component.ts 

 

Regards, 

Madhan V 

[Robert Tabacaru]

Hi Madhan, thank you again. It was very helpful.

[Madhan Venkateshan]

Hi Robert Tabacaru, 

 

Most Welcome. 

 

Regards, 

Madhan V 

[Robert Tabacaru]

Hi Madhan Venkateshan, 

     I tried a little bit alone to achieve another behaviour for this menu and couldn't manage it 100%. There are still some problems. 

     - when I click on the parent item, it shouldn't be selected. The selected item should remain the previous. 

     - once I select a child item, the child's parent should be selected too. 

     - the caret doesn't work anymore as it should, somehow doesn't know when the kebab-menu is closed or open. (I think it's because of open/close on click)

     

https://stackblitz.com/edit/angular-nc87fc-abuf2v?file=app.component.ts

here you have what I've changed in my method, to not select the parent item:

 select(args){

        let canRemoveClass = false;

        if (args.element.parentElement.closest('.e-menu-item')){

            if (this.lastOpenedParentItem != null && this.lastOpenedParentItem.element != null) {

                removeClass(args.element.parentElement.closest('.e-menu-item').querySelectorAll('.selected'), 'selected');

                removeClass(document.querySelectorAll('.selected'), 'selected');

                this.lastOpenedParentItem.element.classList.add('selected');

                canRemoveClass = true;

            } 

        } 

        

        if (args.item.items.length > 0) {

            this.menuCollapsed = false;

            this.lastOpenedParentItem = args;

        } else {

            if (!canRemoveClass) {

                removeClass(document.querySelectorAll('.selected'), 'selected');

            }

            args.element.classList.add('selected');

            this.lastOpenedParentItem = args.item.text;

            this.menuCollapsed = true;    

            this.selectedItem = args.item.text;

        }

    }

and also inside of html I added a template. I need it to can use routerLink and to translate the text inside of items.

Now the parent is selected just the first time when a child is selected. But if you select another Child inside of the parent, the parent loses his selected background.

Wouldn't be a possibility to have these features in the menu component without writing this code? It should be very well commented to have an Idea in two Monts about what's happening there. It's hard to maintain it. If I want to change something on it, it's a very high risk to break something else and to have no idea why. 

Thank you again. 

[Robert Tabacaru]

Hi Madhan Venkateshan, 

     I tried a little bit alone to achieve another behaviour for this menu and couldn't manage it 100%. There are still some problems. 

     - when I click on the parent item, it shouldn't be selected. The selected item should remain the previous. 

     - once I select a child item, the child's parent should be selected too. 

     - the caret doesn't work anymore as it should, somehow doesn't know when the kebab-menu is closed or open. (I think it's because of open/close on click)

     

https://stackblitz.com/edit/angular-nc87fc-abuf2v?file=app.component.ts

here you have what I've changed in my method, to not select the parent item:

 select(args){

        let canRemoveClass = false;

        if (args.element.parentElement.closest('.e-menu-item')){

            if (this.lastOpenedParentItem != null && this.lastOpenedParentItem.element != null) {

                removeClass(args.element.parentElement.closest('.e-menu-item').querySelectorAll('.selected'), 'selected');

                removeClass(document.querySelectorAll('.selected'), 'selected');

                this.lastOpenedParentItem.element.classList.add('selected');

                canRemoveClass = true;

            } 

        } 

        

        if (args.item.items.length > 0) {

            this.menuCollapsed = false;

            this.lastOpenedParentItem = args;

        } else {

            if (!canRemoveClass) {

                removeClass(document.querySelectorAll('.selected'), 'selected');

            }

            args.element.classList.add('selected');

            this.lastOpenedParentItem = args.item.text;

            this.menuCollapsed = true;    

            this.selectedItem = args.item.text;

        }

    }

and also inside of html I added a template. I need it to can use routerLink and to translate the text inside of items.

Now the parent is selected just the first time when a child is selected. But if you select another Child inside of the parent, the parent loses his selected background.

Wouldn't be a possibility to have these features in the menu component without writing this code? It should be very well commented to have an Idea in two Monts about what's happening there. It's hard to maintain it. If I want to change something on it, it's a very high risk to break something else and to have no idea why. 

Thank you again. 

Hi, I could resolve some problems. I initialized the lastOpenedParentItem with the selected item text. That's why it didn't work. Now the only problem is the caret :) I should find out how to make it work again. 

If I solve it, I will give you feedback, if not, it means that I need help. 

thank you 

[Madhan Venkateshan]

Hi Robert Tabacaru, 

 

Thanks for your update. 

 

You can use the below styles to show the menu item is opened or closed by transforming caret icon based on ‘e-selected’ css class. 

 

App.component.css 

.e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item.e-selected .e-caret { 

      transform: rotate(-180deg); 

} 

 

Regards, 

Madhan V 

[Robert Tabacaru]

Hi, thank you for your response. There is a problem. If you look at this example caret example you can see, that it doesn't work properly. 

When first click over the parent it works, but if I click again on the same parent item to collapse, the caret doesn't change the position. It collapses just when another parent is expanded. 

And another question: 

     - I want the menu to do exactly what I want. If I click on the parent, the parent should expand. If I click on another parent, I want the other parent states, to remain unchanged. Now is not the case. If I have an expanded parent and I click on another parent, the previous paren will collapse. I want to have all parents expanded if necessary.

It can be reproduced in the caret example. 

Thank you again.

[Madhan Venkateshan]

Hi Robert Tabacaru, 

 

Good day to you. 

 

We will consider the issues of ‘caret doesn't change the position’ and ‘want the other parent states, to remain unchanged’ as defect and the fix for the issue will be included in Volume 2 2020 release which will be available in the end of the June month and appreciate your patience until then. 

 

Regards, 

Madhan V 

[Robert Tabacaru]

Hi Robert Tabacaru, 

 

Good day to you. 

 

We will consider the issues of ‘caret doesn't change the position’ and ‘want the other parent states, to remain unchanged’ as defect and the fix for the issue will be included in Volume 2 2020 release which will be available in the end of the June month and appreciate your patience until then. 

 

Regards, 

Madhan V 

Thank you for the response. 

[Madhan Venkateshan]

Hi Robert Tabacaru, 

 

Thanks for you update. 

 

We will provide the fix as promised. 

 

Regards, 

Madhan V 

[Kenney Phan]

Hi, how to achieve keeping an item selected on corresponding page for Blazor? Thank you.

[Gayathri KarunaiAnandam]

Hi Kenney, 

We have checked your reported query. We can add “e-custom-selected “class to selected menuItem by which we set selection which is performed by using class attribute. We can select the specified item by using ItemSelected event as demonstrated in the below code snippet. 

  <SfSidebar Width="220px" DockSize="72px" EnableDock="true" Position="@Position" Target="#wrapper" @ref="@sidebar" @bind-IsOpen="@sidebarOpen" HtmlAttributes="@htmlAttribute" MediaQuery="(min-width: 600px)" EnableGestures="true"> 

            <ChildContent> 

<SfMenu TValue="MenuItem" Orientation="@VerOrientation"> 

                            <MenuEvents TValue="MenuItem" ItemSelected="@OnMenuSelect" OnOpen="@OnOpen"></MenuEvents> 

                            <MenuItems> 

                                @foreach (var item in MainMenuItems) 

                                { 

                                    <MenuItem Text="@item.Text" IconCss="@item.IconCss" Url="@item.Url" class=@(item.Text == _selectedItem ? "e-custom-selected" : "")></MenuItem> 

                                } 

                            </MenuItems> 

                        </SfMenu> 

</ChildContent> 

        </SfSidebar> 

@code 

{ 

private string _selectedItem = "Dashboard"; 

private void OnMenuSelect(MenuEventArgs<MenuItem> args) 

    { 

        _selectedItem = args.Item.Text; 

        if (args.Item.Text == "Administrator") 

        { 

            //sidebarOpen = true; 

            userHidden = false; 

        } 

    } 

} 

 

<style> 

 

    .e-menu-container ul .e-menu-item.e-custom-selected .e-menu-url .e-anchor-wrap { 

        color: #fff; 

    } 

</style> 

 

For your reference, we have modified your provided sample. Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11097372170 

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

Regards, 

Gayathri K