Chaining ComboBoxes without filter

Chaining ComboBoxes without filter

Posted by: ylipkin on 29 April 2020, 4:55 pm EST

• 

  ylipkin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 April 2020, 4:55 pm EST

  Hi
  
  I’m using Wijmo with mvc project and Pure JS.
  
  I have two comboboxes to present Country and States. States list received from database based on country id by Country combobox selection. On selectedIndexChanged of the combobox Country i call GetStateData() what request data from mvc controller, populate Hidden field at the view and then call LoadState() to actualy load combobox States witch receiving data by reading Hidden field. I’m not passing data directly to the combobox States so i could use LoadState() with some other events. My javascript functions stay in different stand alone files: LoadCountry() in one and GetStateData() with LoadState() in another.
  
  Its working only for the first selection. At the next Country selection new fresh data loaded to wijmo.collections.CollectionView at LoadState() but on screen combobox still has previous data.
  
  Developer Tool => Console shows error:
  
  ​```

  uncaught exception: ** Assertion failed in Wijmo: Element is already hosting a control. assert@http://localhost:5580/scripts/Wijmo5/controls/wijmo.min.js:14:11434
  
  Control@http://localhost:5580/scripts/Wijmo5/controls/wijmo.min.js:14:84105
  
  DropDown@http://localhost:5580/scripts/Wijmo5/controls/wijmo.input.min.js:14:61440
  
  ComboBox@http://localhost:5580/scripts/Wijmo5/controls/wijmo.input.min.js:14:91121
  
  LoadState@http://localhost:5580/scripts/Wijmo5/SupplierProfile_CorpAddress.js:237:31
  
  GetStateData/<@http://localhost:5580/scripts/Wijmo5/SupplierProfile_CorpAddress.js:200:17
  
  u@http://localhost:5580/scripts/jquery-3.3.1.min.js:2:27457
  
  fireWith@http://localhost:5580/scripts/jquery-3.3.1.min.js:2:28202
  
  k@http://localhost:5580/scripts/jquery-3.3.1.min.js:2:77651
  
  n/<@http://localhost:5580/scripts/jquery-3.3.1.min.js:2:79907
  
  wijmo.min.js:14:11480

  Look like i somehow creating the same object again without destroying previous one. I tried to refresh  collections and ComboBox. Tried to declare ComboBox outside of the function to reuse object. Tried to destroy combobbox. Not working. Most likely, I'm missing something vital. 
  
  Can't use collectionView.filter approach like at https://www.grapecity.com/wijmo/demos/Input/ComboBox/Objects/ChainingCombos/purejs. 
  Its absolutely not practical to preload all States for all Country in the world.
  Just to clarify: Hidden Field hidStateID manipulation required to keep selected value after POST event. 
  

  function GetStateData() {

  var country_id = document.querySelector('#hidCountryID').value;
  var state_name = '';
  
  $.post(currentDomain + "Shared/GetStateList",
      { country_id: country_id, state_name: state_name },
      function (data) {
          if (data) {
              document.querySelector('#hidStateList').value = data;
              LoadState();
          }           
      });
  

  }

  function LoadState() {

  var original_selected_id = document.querySelector('#hidStateID').value;
  var source = document.querySelector('#hidStateList').value;
  
  var myJSON = JSON.parse(source);
  var cv = new wijmo.collections.CollectionView(myJSON);
  
  let cmbStateSuppAddress = new wijmo.input.ComboBox('#cmbStateSuppAddress', {
  
      selectedIndexChanged: (s, e) => {
          if (s.selectedItem.STATE_ID > 0) {
              document.querySelector('#hidStateID').value = s.selectedItem.STATE_ID;
          }
          else {
              document.querySelector('#hidStateID').value = original_selected_id;
          }
      },
  
      displayMemberPath: 'STATE_NAME',
      isAnimated: true,
      selectedValuePath: 'STATE_ID',
  
      itemsSource: cv
  });
  
  //cv.refresh();
  //cmbStateSuppAddress.collectionView.refresh();
  
  //force selected 
  cmbStateSuppAddress.selectedValue = parseInt(document.querySelector('#hidStateID').value);
  

  }

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 30 April 2020, 1:08 am EST

  Hi Yakov,

  Whenever you call the LoadState method, the ComboBox is recreated on the same element. That is why, Wijmo throws the error.
  
  To resolve this, I would suggest you save the ComboBox in an external variable and only change it sourceCollection everytime a new state data is returned:

  var stateCombo;
  function LoadState() {
  
      var original_selected_id = document.querySelector('#hidStateID').value;
      var source = document.querySelector('#hidStateList').value;
  
      var myJSON = JSON.parse(source);
      var cv = new wijmo.collections.CollectionView(myJSON);
      // check if combobox is already created
      if(stateCombo) {
  	stateCombo.itemsSource = cv;
  	return;
      }
      // if not, then create it
      stateCombo = new wijmo.input.ComboBox('#cmbStateSuppAddress', {
  
          selectedIndexChanged: (s, e) => {
              if (s.selectedItem.STATE_ID > 0) {
                  document.querySelector('#hidStateID').value = s.selectedItem.STATE_ID;
              }
              else {
                  document.querySelector('#hidStateID').value = original_selected_id;
              }
          },
  
          displayMemberPath: 'STATE_NAME',
          isAnimated: true,
          selectedValuePath: 'STATE_ID',
  
          itemsSource: cv
      });
  

  Regards,
  
  Ashwin

• 

  ylipkin

  • Post Options:
  • Link
    Copy

  Posted 30 April 2020, 1:10 pm EST

  Hi Ashwin,

  Thank you. I did try to declare combobox object outside of the method. What i overlook was if(stateCombo) logic. Appreciate you help.