jQWidgets Forums

jQuery UI Widgets Forums Angular combobox, autocomplete error, dropdownheight not working

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 7 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • a2m developer
    Participant

    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.


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    http://www.jqwidgets.com


    a2m developer
    Participant

    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 🙂


    Hristo
    Participant

    Hello a2m developer,

    It is not a bug, it is created with these settings for the jqxToolBar.
    I just add to previous shared example autoComplete: true property and it seems to work fine.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    a2m developer
    Participant

    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.
         }
                            
      });

    Hristo
    Participant

    Hello a2m developer,

    I assume that everything is fine.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.