Disable spesific items on WjComboBox

Disable spesific items on WjComboBox

Posted by: davidzal1992 on 8 March 2021, 8:39 am EST

• 

  davidzal1992

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 March 2021, 8:39 am EST

  Hey, there is an option that i can disable some items from my drop down list?
  
  for example if I have 3 items - “yellow”,“orange”,“red” i want to disable the orange one for some reason and this option will be disabled for all users but they still will see her on a list.

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 March 2021, 1:33 am EST

  Hi David,

  You can handle the formatItem event of ComboBox and add the wj-state-disabled CSS on items which are disabled:

  https://stackblitz.com/edit/js-g5dbye

  Regards,
  
  Ashwin

• 

  davidzal1992

  • Post Options:
  • Link
    Copy

  Posted 9 March 2021, 4:02 am EST

  This option is supported in Angular as well? there is example that I can find?

  Thanks

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 March 2021, 11:57 pm EST

  Yes, It will work in angular also.
  
  In HTML:

  <wj-combo-box #cb (formatItem)="onFormatItem(cb, $event)" ...></wj-combo-box>
  

  In TS:

  onFormatItem(s, e) {
  	let item = e.data;
    	// add this CSS class
    	wjcCore.toggleClass(e.item, "wj-state-disabled", isDisabled(item));
  }
  

  ~regards

• 

  davidzal1992

  • Post Options:
  • Link
    Copy

  Posted 11 March 2021, 8:22 am EST

  Thakns for that, amazing! working well!
  
  1 more question, I have toolTip directive, there is some way that I can add my attribute directive to items?

  For example I use [toolTip]=“hover me”, when user hover over selected items, there is option to add my attribute directives ?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 12 March 2021, 1:09 am EST

  I am glad that the solution helped you. If you need to add angular components or directives, then you will need to use the wjItemTemplate directive. Using this, you can customize the items displayed in the ComboBox, like, adding a tooltip directive:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-wqcelc

  In this sample, open the drop-down menu and hover over the items. Note that this will only work for non-disabled items because disabled items have their pointer-events set to none. So, the events like mouseover, which helps in displaying the tooltips, will not work.

  ~regards