Display nothing in comboBox until a value is selected

Display nothing in comboBox until a value is selected

Posted by: kyle.m.vassella on 12 March 2019, 4:24 pm EST

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 12 March 2019, 4:24 pm EST

  Hi grapecity,

  I’ve got a combobox which contains a list of years in its dropdown. When a user initially visits the page, I’d like the combobox to display blank (display nothing). But currently, it’s automatically displaying the first ‘year’ in my list.

  I’ve tried the [headerPath] and placeholder properties on this element to no avail.

  The behavior I want: have combobox display blank until a value is selected from its dropdown. Then it’s okay to display the year you have selected. On revisit of the page, the comboBox should again display blank.

  Our code:

      <wj-combo-box 
          #m_comboBox
          [isEditable]="false"
          [itemsSource]="m_aryComboBoxItemSource"
          [displayMemberPath]="'myYear'"
          [selectedValuePath]="'myYear'"
          (initialized)="initComboBox($event, m_comboBox)" 
          style="width:300px"          
      >
  </wj-combo-box>
  

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 12 March 2019, 4:29 pm EST

  FYI, this is for Angular 2+

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 13 March 2019, 12:36 am EST

  Please try setting the isRequired property of the combo box to false and then set the selectedIndex property to -1. Let me know if you are still facing issues.

  <wj-combo-box 
          #m_comboBox
          [isEditable]="false"
          [itemsSource]="m_aryComboBoxItemSource"
          [displayMemberPath]="'myYear'"
          [selectedValuePath]="'myYear'"
          (initialized)="initComboBox($event, m_comboBox)" 
          style="width:300px"          
          [isRequired]="false"
          [selectedIndex]= "-1">
  </wj-combo-box>
  

• 

  kyle.m.vassella

  • Post Options:
  • Link
    Copy

  Posted 14 March 2019, 7:35 pm EST

  Hi abhishek,

  Unfortunately this did not solve the issue. Combobox is still displaying ‘2018’ (my first ‘year’) on page load.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 15 March 2019, 1:52 am EST

  Here’s a sample for the implementation.

  https://stackblitz.com/edit/angular-hsaked-kypztw?file=src/app/app.component.html
  

  Please let me know if you are still facing issues