How to hide the selected item text in Wijmo Menu?

How to hide the selected item text in Wijmo Menu?

Posted by: abhijeet.dey on 5 September 2024, 6:41 am EST

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 September 2024, 6:41 am EST - Updated 5 September 2024, 6:46 am EST

  Hi

  I am using Wijmo Menu in Angular as per the example in your docs
  
  https://developer.mescius.com/wijmo/demos/Input/Menu/Overview/angular

  In the docs, once we click on any item, the menu does not show any extra labels indicating which is the currently selected item.

  But when I am trying to use the same, after click, the button adds the selected item text infront of the header label. How do I hide this label showing selected item?

  I am adding screenshots of before click and after click

  

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2024, 5:45 am EST

  Hi Abhijeet,

  To hide the label which shows the selected Item you just have to edit the ‘header’ property of the Menu.
  
  Read more about header property: https://developer.mescius.com/wijmo/api/classes/Wijmo_Input.Menu.html#header

    <wj-menu
      #menu
      [isButton]="true"
      [displayMemberPath]="'header'"
      [selectedValuePath]="'value'"
      [itemsSource]="data"
      [header]="'Run'"
      (itemClicked)="itemClicked(menu)"
      [selectedValue]="'FFX'"
    >
    </wj-menu>

  In case this does not resolve your issue then, please provide us with a sample where we can replicate the issue. You can also update the attached sample and share it with us.

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

  Thanks, and regards

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 6 September 2024, 5:56 am EST - Updated 6 September 2024, 6:02 am EST

  Hi Vivek,

  Header is used to set the name for the menu, not the selected item, if I am not wrong. I don’t want to hide the name, but the selected item (in my screenshot, I want to hide Tax Account mapping)

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 9 September 2024, 11:34 pm EST

  Hi Abhijeet,

  We understand your requirement, and we can see that the “(Tax Account Mapping)” part is also intended to be dynamic, and generated based on the selected item rather than being a static header.

  Please refer to this demo: https://developer.mescius.com/wijmo/demos/Input/Menu/SplitButtons/angular, where the header is dynamically generated based on the selected item.

  If that is not the case and your header is static, but you’re still encountering the issue where the selected item is being displayed along with the header, please help us replicate the issue by updating the attached sample: https://stackblitz.com/edit/angular-x8zntm?file=src%2Fapp%2Fapp.component.ts and sharing it with us.

  Regards

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 11 September 2024, 5:38 am EST

  Hi Sonu,

  Our team found the root cause. This happens when we set the [value] attribute on the wj-menu-item. I removed the attribute and the selected value was no longer shown. Kindly add this to your documentation somewhere.

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 12 September 2024, 1:07 am EST

  Hi Abhijeet,

  Thank you for the information, we are glad that your issue is resolved.

  Regards