Set Multiple Selected Values in jqxDropDownList

[geromelouieParticipant]

Hi,

I have a scenario wherein on load of a page, multi values in a dropdown must be pre-selected. The dropdown is not in a jqxgrid, just in form. The app is built using Angular 7.

Hope someone can help me on this.

Thanks!

[HristoParticipant]

Hello geromelouie,

Please, clarify it.
Do you want to achieve something like this:
https://www.jqwidgets.com/angular/angular-combobox/angular-combobox-multiselect.htm?light
It is created with the jqxComboBox but it could be used as an alternative.
Another option is to use the selectionRenderer callback of the jqxDropDownList to show specific data.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[geromelouieParticipant]

Hi Hristo,

The link below has an image. I have a multi-select dropdown that needs to be pre populated on load of the page. This dropdown is dynamically created so it may or may not be present. Also it is not part of any grid element, it is just rendered in an html table.

https://ibb.co/99Rr2Cm

Thanks!

[adminKeymaster]

Hi geromelouie,

In order to load it on page load you need to set the DropDownList’s source property within ngOnInit or ngAfterViewInit.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[geromelouieParticipant]

Hi,

Would you mind providing a code snippet for Angular to implement this?

Thanks!

[Yavor DashevParticipant]

Hi geromelouie,

We have prepared a quick example on how to implement this functionality.
//In you app.component.ts

export class AppComponent implements AfterViewInit , OnInit {
  @ViewChild('myDropDownList', { read: jqxDropDownListComponent,static: false }) myDropDownList: jqxDropDownListComponent;
  source: string[] =[];

 ngAfterViewInit():void{
    }
    ngOnInit ( ):void{
        this.init();
    }
    init(){
        this.source =   [
            'Affogato',
            'Americano',
            'Bicerin',
            'Breve'
        ];
    }
}

//In your app.component.html

<jqxDropDownList #myDropDownList      
                [width]="200"
                [height]="30" 
                [source]="source"
                [checkboxes]="true"
    >
</jqxDropDownList>

Note that if you want to have multiple selection you can set the checkbox property of the dropDownList to ‘true’ , also with it the component achieves similar looks like the one you send a link of.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[geromelouieParticipant]

Hi Yavor,

Thank you for this. The problem I was getting was when I load the page, I need Americano and Affogato automatically selected for example. The dropdown however is dynamically created in Angular.

Thanks!

[Yavor DashevParticipant]

Hi geromeluie,

If you want to have certain items pre-selected you can use the ‘checkItem’ method.
And again a quick code example on how to use it :

 ngAfterViewInit():void{
        
     this.myDropDownList.checkItem('Affogato' as jqwidgets.DropDownListItem);
     this.myDropDownList.checkItem('Americano' as jqwidgets.DropDownListItem);
     
    }

Please, let me know if you have any other questions.

Best Regards,
Yavor Dashev

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts