jQuery UI Widgets Forums Angular Set static ID on jqxDropDownList (wrapper and content)

This topic contains 1 reply, has 2 voices, and was last updated by  Yavor Dashev 3 months ago.

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

  • jliterado
    Participant

    I would like to know how to set a static ID on the wrapper and content on a jqxDropDownList.

    My dropdown list is currently being initialized using a json source. Once I called the createComponent method, the dropdown list is generated and the Ids for the wrapper and content is dynamic.

    `<div id=”dropdownlistWrapperjqxWidget6c61b6020016″ style=”overflow: hidden; outline: none; background-color: transparent; border: none; float: left; width:100%; height: 100%; position: relative;”>
    <div id=”dropdownlistContentjqxWidget6c61b6020016″ unselectable=”on” style=”outline: none; background-color: transparent; border: none; float: left; position: relative; margin-top: 0px; margin-bottom: 0px; width: 94.8661%; height: 24px; left: 0px; top: 0px;” class=”jqx-dropdownlist-content jqx-dropdownlist-content-jqx jqx-disableselect jqx-disableselect-jqx”>Test scenario</div>
    <div id=”dropdownlistArrowjqxWidget6c61b6020016″ unselectable=”on” style=”background-color: transparent; border: none; float: right; position: relative; width: 3.79464%; height: 24px;”><div unselectable=”on” class=”jqx-icon-arrow-down jqx-icon-arrow-down-jqx jqx-icon jqx-icon-jqx”>
    </div>
    </div>

    • This topic was modified 3 months ago by  jliterado.

    Yavor Dashev
    Participant

    Hi jilterado,

    I have prepared a little code example which showcases you how to achieve this:
    //In your app.component.ts file

     @ViewChild('myDropDownList', { static: false }) myDropDownList: jqxDropDownListComponent;
        ngAfterViewInit(): void {
    
            this.myDropDownList.createComponent(this.settings);
            this.myDropDownList.elementRef.nativeElement.id = 'wraperId';
            this.myDropDownList.elementRef.nativeElement.firstChild.id = 'dropdownId';
          
        }    

    // and in you app.component.html file:
    <jqxDropDownList #myDropDownList [auto-create]="false"></jqxDropDownList>

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.