jQWidgets Forums
jQuery UI Widgets › Forums › Angular › combobox, autocomplete error, dropdownheight not working
Tagged: #combobox, angular 2 angularJS, angular 4, AutoComplete, dropDownHeight
This topic contains 5 replies, has 2 voices, and was last updated by Hristo 7 years, 6 months ago.
-
Author
-
Building an AngularJS (v4) app
#1 Trying to use the ComboBox in the Toolbar, but when I set AutoComplete to True, I get a fatal error:
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:26181) at Object.a.jqx.setvalueraiseevent (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:8:22390) at Boolean.<anonymous> (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:8:21658) at Function.each (http://127.0.0.1:4200/node_modules/jqwidgets-framework/scripts/jquery-1.11.1.min.js:2:3027) at Object.a.jqx.set (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:8:21548) at Object.a.jqx.jqxWidgetProxy (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:8:23424) at HTMLDivElement.<anonymous> (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:8:28602) at Function.each (http://127.0.0.1:4200/node_modules/jqwidgets-framework/scripts/jquery-1.11.1.min.js:2:2973) at m.fn.init.each (http://127.0.0.1:4200/node_modules/jqwidgets-framework/scripts/jquery-1.11.1.min.js:2:835) at m.fn.init.a.fn.(anonymous function) [as jqxComboBox] (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:8:28505) at a.(anonymous function).HeaderComponent.initTools (http://127.0.0.1:4200/main.bundle.js:238:30) at a.(anonymous function)._initializeTool (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:229:9915) at a.(anonymous function)._createTools (http://127.0.0.1:4200/node_modules/jqwidgets-framework/jqwidgets/jqx-all.js:229:9549)
if (!menuToolIninitialization) { tool.jqxComboBox({ height: 36, width: 150, placeHolder: 'Entity Filter', autoComplete: true, // remoteAutoComplete: true, // search: this.searchService.entitySearch, source: this.searchService.entityList, displayMember: 'TEXT', // valueMember: "ID", dropDownHeight: 500, //NOT WORKING! :( dropDownWidth: 400, // autoDropDownHeight: true, enableBrowserBoundsDetection: true, searchMode: 'startswithignorecase', theme: 'fresh' }); tool[0].style.marginTop = '10px'; tool[0].style.marginLeft = '0px'; }
#2 DropDownHeight is not working. The drop down menu fully extends past the browser window height. It’s ugly.
Hello a2m developer,
I tested the example below and it seems to work fine:
app.module.ts:import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { jqxToolBarComponent } from '../assets/jqwidgets-ts/angular_jqxtoolbar'; @NgModule({ declarations: [ AppComponent, jqxToolBarComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
app.component.html:
<jqxToolbar #myToolbar [tools]="tools" [initTools]="initTools" [width]="500" [height]="35"> </jqxToolbar>
app.component.ts:
import { Component, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements AfterViewInit { ngAfterViewInit() { this.combobox1.add(this.combobox1Min).on('select', (event) => { if (event.args) { let country = event.args.item.label; let source; if (country === 'Japan') { source = this.JapaneseCities; } else if (country === 'UK') { source = this.UKCities; } else { source = this.USACities; } this.combobox2.jqxComboBox({ source: source }); this.combobox2Min.jqxComboBox({ source: source }); } }); }; countries = ['Japan', 'UK', 'USA']; JapaneseCities = ['Kobe', 'Kyoto', 'Tokyo']; UKCities = ['Brighton', 'Glasgow', 'London']; USACities = ['Boston', 'Los Angeles', 'Minneapolis']; combobox1: any; combobox1Min: any; combobox2: any; combobox2Min: any; theme: string = ''; tools: string = 'combobox | combobox'; initTools: any = (type, index, tool, menuToolIninitialization) => { switch (index) { case 0: tool.jqxComboBox({ width: 150, source: this.countries, selectedIndex: 0, autoDropDownHeight: false, // should set this property to false dropDownHeight: 345, placeHolder: 'Select a country...' }); if (menuToolIninitialization === false) { this.combobox1 = tool; } else { this.combobox1Min = tool; } break; case 1: tool.jqxComboBox({ width: 150, source: this.JapaneseCities, selectedIndex: 0, placeHolder: 'Select a city...' }); if (menuToolIninitialization === false) { this.combobox2 = tool; } else { this.combobox2Min = tool; } break; } } }
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThank 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
Hello a2m developer,
It is not a bug, it is created with these settings for the jqxToolBar.
I just add to previous shared exampleautoComplete: true
property and it seems to work fine.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comThank 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. } });
Hello a2m developer,
I assume that everything is fine.
Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.