Clear menu selection #7435

ageiter created 4 months ago

ABP Framework version: v8.2.0-rc.5 / 8.1.0
UI Type: Blazor Server

I am using the LeptonX theme in Blazor Server and have the following problem with the menu: From my overview list I open an entry for editing, which is displayed in a separate Razor page. Unfortunately, the selection in the menu remains on the previous item. As a result, I can no longer select this menu item to return to the list (menu items that have already been selected cannot be selected a second time).

I would actually like to do the following in my edit page: PageLayout.MenuItemName = string.Empty;

But unfortunately this does not work... Is there any other way to delete the menu selection?

The overview list "Terminations":
Open a termination to edit:

23 Answer(s)

0

liangshiwei created 4 months ago
Support Team Fullstack Developer

Hi,

This is because there is no edit termination menu.

You can add the breadcrumbs https://docs.abp.io/en/abp/latest/UI/AspNetCore/Page-Header#breadcrumb
0

ageiter created 4 months ago

On the one hand, I use Blazor and not MVC. And secondly, I'm not talking about the breadcrumbs, but the normal menu. Or how did you mean exactly how I should do it?

I know that it would work if I had an "Edit termination" menu item. But that would make no sense at all to make such a menu entry. Or can I hide it?

There must be a way to remove the selection from the menu. It happens often that pages are shown that are not in the menu...
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

I can no longer select this menu item to return to the list (menu items that have already been selected cannot be selected a second time). I'm not talking about the breadcrumbs, but the normal menu. Or how did you mean exactly how I should do it?

Yes, I know. I just mentioned the possibility of returning to the upper menu from the breadcrumbs. And

On the one hand, I use Blazor and not MVC.

Sorry, https://docs.abp.io/en/abp/latest/UI/Blazor/Page-Header#breadcrumb

liangshiwei created 4 months ago

Support Team Fullstack Developer

You can try to override the MainMenuItem component

[Dependency(ReplaceServices = true)]
[ExposeServices(typeof(MainMenuItem))]
public  class MyMainMenuItem : MainMenuItem
{
    protected override void ActivateCurrentPage()
    {
        if (MenuItem.MenuItem.Url.IsNullOrEmpty())
        {
            return;
        }

        if (PageLayout.MenuItemName.IsNullOrEmpty())
        {
            var menuItemPath = MenuItem.MenuItem.Url.Replace("~/", string.Empty).Trim('/');
            var currentPagePath = new Uri(NavigationManager.Uri.TrimEnd('/')).AbsolutePath.Trim('/');

            if (menuItemPath.TrimEnd('/').Equals(currentPagePath, StringComparison.InvariantCultureIgnoreCase))
            {
                Menu.Activate(MenuItem);
            }
        }

        if (PageLayout.MenuItemName == MenuItem.MenuItem.Name)
        {
            Menu.Activate(MenuItem);
        }
        else
        {
            MenuItem.Deactivate();
        }
    }
}

0

ageiter created 4 months ago

Yes, I know. I just mentioned the possibility of returning to the upper menu from the breadcrumbs.

Ah ok, but the user will of course click on the menu link... and if nothing happens, that's not so great of course.

You can try to override the MainMenuItem component I'm going to try that out.

In general, the menu still has a few bugs when displaying the active item. Sometimes an item remains selected, although you are already on another item (then 2 are displayed as selected at the same time). I already complained about this problem some time ago and it would be nice if you could make a fix for it.

It would also be useful if the page was reloaded when clicking on an already selected menu item. You said there that this would be included in the official release as a fix, which probably never happened. https://support.abp.io/QA/Questions/4397/Menu-item-that-has-already-been-selected-cannot-be-selected-again#answer-3a09668d-87cc-d807-2be2-e915eab414e7
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

Hi,

Sorry, I must have forgotten, I will create an internal issue now.
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

1
0

ageiter created 4 months ago

You can try to override the MainMenuItem component

The problem with overriding the ActivateCurrentPage()method is that it is not called when I open the edit page. Otherwise the menu would work correctly. If I am on the edit page and then press F5 for a reload, the menu shows correctly (nothing selected).

The call from the list is made as follows: NavigationManager.NavigateTo($"/termination/{input.Id}");

How can I ensure that ActivateCurrentPage() is also executed?
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

Hi,

Leptonx subscribed to LocationChanged event inside
0

ageiter created 4 months ago

I went through these methods step by step during debugging. And actually everything seems to be correct, for my MenuItem "Terminations" MenuItem.Deactivate() is executed and no other is activated. And yet it remained selected / activated.

Then I added a StateHasChanged() and now it works. So it seems that the menu is not being re-rendered.

I assume that the other menu problems also have something to do with this... it happens again and again that the status of the selection (IsActive) does not work correctly and probably only because it is not re-rendered.

This information should be enough for a fix. Can you refund me the question?
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

hi,

Because this ticket is not a bug, so I won't refund your ticket. : )

1
0

ageiter created 4 months ago

??? Not a bug ???

I just showed you how to solve a bug in your (!) MainMenuItem and the thanks for that is that I don't even get a refund?
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

I am using the LeptonX theme in Blazor Server and have the following problem with the menu: From my overview list I open an entry for editing, which is displayed in a separate Razor page. Unfortunately, the selection in the menu remains on the previous item. As a result, I can no longer select this menu item to return to the list (menu items that have already been selected cannot be selected a second time).

This is by designed
0

ageiter created 4 months ago

I don't think you've understood what the error means.

Short and simple: Your menu control does not always update the state of the items correctly. Sometimes already selected menu items are NOT deactivated, even though the user has been on another page for a long time. In this case, several menu items are displayed as active at the same time.

I and others have been pointing out this problem for some time. This is not directly related to my question, but the cause is the same and so we have found the solution with my case.

Are you going to fix this in your code or not?
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

Your menu control does not always update the state of the items correctly. Sometimes already selected menu items are NOT deactivated, even though the user has been on another page for a long time. In this case, several menu items are displayed as active at the same time.

Looks like a problem, how do i reproduce the problem?
0

ageiter created 4 months ago

Check out my entry here: https://support.abp.io/QA/Questions/6573/Top-Menu-Display-Issue#answer-3a108f96-0ab9-7cef-96bd-5a704ef89887
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

ok, i'm checking
0
ageiter created 4 months ago
Sorry, I didn't realize that this part with the deactivation is not part of your code:

else { MenuItem.Deactivate(); }

I then wanted to apply the bugfix to the other problem as well, but that didn't work. Another fix needs to be found there.

I hope you can still improve the menu (especially TopMenu, we use this for most applications) so that the following can be done:

deactivate the activated item when leaving the actual page via another way than the menu

reload the page when you click again on an already active item

bug with the display of active items (see other question with the videos)
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

Okay,
0
ageiter created 4 months ago
Check out my entry here:
https://support.abp.io/QA/Questions/6573/Top-Menu-Display-Issue#answer-3a108f96-0ab9-7cef-96bd-5a704ef89887

I believe I have found the cause of this problem. But I don't have a solution yet.

You can reproduce it like this:

Use an application with TopMenu layout

Select a page from the main menu (not sub menu). This will then be actively displayed in the menu.

Now select a sub menu item from the menu (e.g. Administration -> Settings)

Settings page is loaded, but the previously selected main menu item is still displayed as active (and the sub menu item "Settings" is not active)

Reload the page (F5) and everything is correct

I made a breakpoint in the ActivateCurrentPage() method at point 3 and saw that the PageLayout.MenuItemName there is still the old one ("TerminationList"), so this item is also activated again.

Why does it not contain "Administration" or "SettingManagement"?
0

ageiter created 4 months ago

Don't the administration pages overwrite this value? If not, then the value for PageLayout.MenuItemName should at least be deleted / set to String.Empty?
0
ageiter created 4 months ago
Ok, I now know that as soon as you set PageLayout.MenuItemName, you have to remove it yourself. Otherwise the value remains until it is overwritten... This should be mentioned in the documentation, it is quite error-prone... Or even better, rethink this concept...

I have now solved this in my page:

protected override async Task OnInitializedAsync() { if (TerminationId != Guid.Empty) { PageLayout.MenuItemName = "None"; } } protected override void Dispose(bool disposing) { PageLayout.MenuItemName = null; base.Dispose(disposing); }
0

liangshiwei created 4 months ago
Support Team Fullstack Developer

i will consider it

1

Have an answer to this question? Log in and write your answer.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06