Wijmo Menu button styling

Posted by: abhijeet.dey on 22 January 2025, 12:34 pm EST

    • Post Options:
    • Link

    Posted 22 January 2025, 12:34 pm EST - Updated 22 January 2025, 12:39 pm EST

    Hi Team,

    We are using wj-menu to show a dropdown.

    Instead of showing text as the title of the dropdown (“File” here)

    We want to display an icon with an tag

    is this possible?

  • Posted 23 January 2025, 5:47 am EST

    Hi Abhijeet,

    You can set the header as a HTML string as well.

    Sample Code:

     <wj-menu  
        [header]="'<i class=&quot;fa fa-bars&quot;></i>'"
        class="menu"
      ></wj-menu>
    

    OR

    You can use the following method to set the header at runtime as well:

      setHeader(menu: input.Menu, header: String | HTMLElement) {
        if (header instanceof HTMLElement) {
          menu.header = header.outerHTML;
          (menu as any)._definedHeader = header.outerHTML;
        } else {
          menu.header = header.toString();
          (menu as any)._definedHeader = header.toString();
        }
      }
    
    

    For reference, please check the following sample application:

  • Posted 23 January 2025, 7:13 am EST

    Thanks this worked

  • Posted 23 January 2025, 7:42 am EST - Updated 23 January 2025, 7:48 am EST

    Hi I found one issue

    I am trying to apply wjTooltip to wj-menu, but if I do that, the dropdown doesn’t open, but the tooltip shows perfectly.

    <wj-menu #wjMenu

    [header]=“options.header”

    [wjTooltip]=“options.tooltip”

    [wjTooltipPosition]=“‘Above’”

    [isDisabled]=“options.disabled”

    [selectedItem]=“options.selectedItem”

    [maxDropDownHeight]=“options.maxDropDownHeight”

    [ngClass]=“{ ‘wijmo-menu-grid-cell’: options.isInsideFlexgridCell }”

    (itemClicked)=“onItemClicked()”>

    <wj-menu-item

    *ngIf=“!items || items.length === 0”

    class=“wj-state-disabled”>





    <wj-menu-item *ngFor=“let item of items”>



    {{item[options.displayMemberPath]}}





    I am also seeing an error in browser console

  • Posted 29 January 2025, 2:44 am EST

    any update on this?

  • Posted 30 January 2025, 3:30 am EST

    Hi Abhijeet,

    Apologies for the delay in getting back to you. This seems to be a bug which is why I have reported this too the development team[WJM-35623].

    As a workaround, I would suggest you to use the JS API for setting Tooltips.

    Sample: https://stackblitz.com/edit/angular-jcxpyr1v?file=src%2Fapp%2Fapp.component.ts

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels