How to show a spinner in wijmo menu?

How to show a spinner in wijmo menu?

Posted by: abhijeet.dey on 2 September 2024, 11:11 am EST

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 September 2024, 11:11 am EST

  Hi Team,

  I am trying to use Wijmo Menu with Angular.

  https://developer.mescius.com/wijmo/demos/Input/Menu/Overview/angular

  In our use case, the list items of the menu are to be fetched from API on click of the wijmo menu trigger button. I want to show a spinner inside the wijmo menu list to indicate to the user that API is still fetching data.

  Any angular code snippet for this would be helpful.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 3 September 2024, 6:47 am EST

  Hi Abhijeet,

  We can use wj-menu-items to show a loader until we have itemsSource. We can use *ngIf to render a loader in wj-menu-item if we don’t have itemsSource. Then once we get the items, we can use wj-menu-items and *ngfor to render the items.

  <div class="container-fluid">
    <wj-menu #fileMenu [header]="'File'">
      <wj-menu-item *ngIf="!items || items.length === 0">
        <div class="spinner" role="spinner">
          <div class="spinner-icon"></div>
        </div>
      </wj-menu-item>
      <wj-menu-item *ngFor="let item of items">
        <div>
          {{ item }}
        </div>
      </wj-menu-item>
    </wj-menu>
  </div>

  Please go through this sample https://stackblitz.com/edit/angular-wtbctt?file=src%2Fapp%2Fapp.component.css for better understanding.
  
  We have used setTimeout to mimic the API fetching time, and asynchronous process in the above sample.

  In case you need further assistance do let us know.

  Thanks, and regards.

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 3 September 2024, 7:51 am EST - Updated 3 September 2024, 7:58 am EST

  Thank you Vivek. However, this menu item would be clickable, how do we stop user from clicking on this by mistake, which will close the dropdown?
  
  Also, can you guys implement this as a feature of the Wijmo Menu?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 4 September 2024, 7:02 am EST

  Hi Abhijeet,

  You can use ‘wj-state-disabled’ class on the item, which essentially disables the menu items.

   this.menu.isDroppedDownChanging.addHandler(
        (s: input.Menu, e: CancelEventArgs) => {
          // here you can use your API calls and assign items to the data
          if (!this.items || this.items.length == 0) {
            s.listBox.hostElement.children[0].classList.add('wj-state-disabled');
            setTimeout(() => {
              this.items = ['New', 'Open', 'Close', 'Save'];
            }, 2000);
          }
        }
      );

  Please go through this updated sample for a better understanding - https://stackblitz.com/edit/angular-mkzkkv?file=src%2Fapp%2Fapp.component.ts

  And thank you for your suggestion, we have forwarded this feature request to the engineering team with internal tracking ID - WJM-34884. We will update you when this feature is added to the Menu control.

  In case you need further assistance do let us know.

  Thanks, and regards.

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 4 September 2024, 8:37 am EST

  Awesome Vivek, thank you for your help. Looking forward to the new feature.