jQWidgets Forums

Tagged: Angular, jqxDropDownList

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

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

Author

Set static ID on jqxDropDownList (wrapper and content) Posts
June 24, 2021 at 3:58 pm Set static ID on jqxDropDownList (wrapper and content) #120438

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>

June 25, 2021 at 9:15 am Set static ID on jqxDropDownList (wrapper and content) #120443
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
Author

Posts

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

You must be logged in to reply to this topic.