Starts in:
1 DAY
23 HRS
16 MIN
31 SEC
Starts in:
1 D
23 H
16 M
31 S
Open Closed

Blazor: Change Menu Display Name dynamically #2778


User avatar
0
Leonardo.Willrich created

If you're creating a bug/problem report, please include followings:

  • ABP Framework version: v5.1.4
  • UI type: Blazor WASM
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes / no
  • Exception message and stack trace:
  • Steps to reproduce the issue:"'

Hi,

I need to create a menu with a display name dynamic. It will show how many records I have (count) and will be updated dynamically.

I've tried two different ways, but no success. Below details:

Try 1: I've create a state container object and have added an onChange callback event. In the MenuContributor class, I've created a local variable to save my menu (ApplicationMenuItem) and then on OnChange Event I has updating the DisplayName property. The problem here is that the menu doesn't render (statehaschanged doesn't exist).

Code: `public class SBCMenuContributor : IMenuContributor { private readonly IConfiguration _configuration; private readonly MainFilterStateContainer _filter; private ApplicationMenuItem unknownDevicesMenu;

    public SBCMenuContributor(IConfiguration configuration, MainFilterStateContainer filter)
    {
        _configuration = configuration;
        _filter = filter;
        filter.OnChange += UpdateMenu;
    }

    // Doesn't work, it doesn't refresh the menu
    private void UpdateMenu()
    {
        Console.WriteLine("UpdateMenu Init");
        if (unknownDevicesMenu != null)
        {
            Console.WriteLine("UpdateMenu - count: {0}", _filter.SelectedUnits.Count());
            unknownDevicesMenu.DisplayName = "Unknow devices " + (_filter.SelectedUnits == null ? "Is null" : _filter.SelectedUnits.Count().ToString());
        }
        Console.WriteLine("UpdateMenu Done");

    }
    ... (continue code)`

Here is how I create th menu:

unknownDevicesMenu = new ApplicationMenuItem(
                    "UnknownUnlinkedDevices",
                    l["Menu:UnknownUnlinkedDevices"],
                    "/unknownunlinkeddevicesgrid",
                    icon: "fa fa-laptop",
                    order: 10
                );
                context.Menu.AddItem(unknownDevicesMenu);

On this option, if I navigate to another menu, it updates the menu. But, it doesn't update when the property is set.

Try 2: I've used IMenuManager to get the menu and then update the DisplayName property. Even navigating to another menu it doesn't update the name displayed.

 private async Task UpdateMenu()
        {
            Console.WriteLine("UpdateMenu Init");
            var menu = await MenuManager.GetAsync("UnknownUnlinkedDevices");
            if (menu != null){
                Console.WriteLine("UpdateMenu Updating menu: {0}", SelectedUnits.Length);
                menu.DisplayName = $"Units Selected {SelectedUnits.Length}";
                
            }
        }

Is there some way to do that?


1 Answer(s)
  • User Avatar
    0
    enisn created
    Support Team .NET Developer

    Hi @Leonardo.Willrich

    Unfortunately, the menu can't be updated without refreshing the page currently. The menu is drawn once while the page is loading and it won't be redrawn while navigating the application without refreshing.

    There are 2 options:

    1. Your Try 1 and Try 2 will work only if you refresh the page.

    2. I know this one is not the best solution but it seems it's the only solution for now. You can access the dom and update it manually with IJSRuntime.

      • Inject the IJSRuntime
      [Inject] IJSRuntime JSRuntime { get; set; }
      
      • Invoke a function name
      await JSRuntime.InvokeVoidAsync("updateMyMenu", 2);
      
      • Define the function in window object in your .js file.
      window.updateMyMenu = function(value){
          // Write a proper query below that finds your menu item. 
          //(You can set an Id from menuContributor to find it easily.)
          $("#menu-selector-here").html(value + " My menu");
      };
      

    I know this is not a good solution. I've created an issue about it you can follow from here

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