[a2m developerParticipant]

Huh.. turns out there is a pretty important concept to understand:
Angular’s unidirectional data flow rule forbids updates to the view after it has been composed, and anytime you don’t use enableProdMode() the app will complain about your changes. This basically means that you are not allowed to modify component binding data within any of lifecycle hooks. If you wish to do so then wrap the changes in a promise via Promise.resolve(() => { changes… }). Source – good article to read

[a2m developerParticipant]

Hi Ivo, Thanks for the reply.

I understand where you’re coming from, but I’m still having a hard time completely understanding the best practices for this situation. I must declare components in 1 module in order to use them in other components. Are you saying to declare all the jQWidget components in the app (root) module instead of a shared module? In the terms of Best Practices, how are these approaches two different?

[a2m developerParticipant]

Thank you again Hristo,

For some reason everytime I add the autoComplete : true, I get those errors. After some more investigation, I determined that the error “Cannot read property ‘length’ of undefined” was related to the underlying listBox for the comboBox. Even when the source for the comboBox was directly hard coded into the comboBox configuration. Strange.

So, I came up with another solution. I added a keypress event listener to the comboBox and then changed the autoComplete configuration. No error.. and the autoComplete works like a charm! This way I KNOW the listBox items have been set.

My solution:

tool.on('keypress', (event) => { 
   if(!this.headerToolbar.getTools()[4].tool.jqxComboBox('autoComplete') )
     {   
       this.headerToolbar.getTools()[4].tool.jqxComboBox({autoComplete: true}); 
       this.headerToolbar.getTools()[4].tool.off('keypress');  // just be sure to remove the listener .. no need to have it after the fact.
     }
                        
  });

[a2m developerParticipant]

Thank you Hristo for the reply.

Drop down height is now working. I’m surprised that you need to set the autoDropDownHeight to false, when false is the default value. Is this a bug?

I don’t see where you’ve implemented the autoComplete. The searched selection highlights, but i would like to have the autoComplete aka filter option for this comboBox. I’m still getting the following error when setting the autoComplete to true:

 error_handler.ts:1 ERROR TypeError: Cannot read property 'length' of undefined
    at Function.each (http://127.0.0.1:4200/node_modules/jqwidgets-framework/scripts/jquery-1.11.1.min.js:2:2818)
    at a.(anonymous function)._resetautocomplete (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:57:20567)
    at a.(anonymous function).propertyChangedHandler (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:58:2

Auto Complete
The ComboBox auto complete feature enables the end-user to quickly select an item from the dropdown by typing in the edit box. When you type text in the combobox editor, it looks for items containing the characters typed, then the combobox displays only the matching items in the dropdown. – from jQuery documentation.

Thank you

[Author]

Posts