SelectItems not whorking

[LUCIANO ALMEIDA PIMENTA]

I have a ListBox and need to select items according to a list. I tried to use the code:

@ViewChild ('listBoxDetails')

public ddlList: ListBoxComponent;

...

public setfield = {

     groupBy: "type",

     text: "description",

     value: "code"

}

...

this.ddlList.selectItems ([description], true);

I already used in the parameter the value and the text and none worked.

[Vinoth Kumar Sundara Moorthy]

Hi Luciano, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement “To select Item in Listbox using selectItems method” and we have prepared a sample to achieve it using created event in ListBox as like in the below code example, 

 

HTML 

<ejs-listbox #listBoxDetails [dataSource]='data' [fields]='ddlFields' (created)="onCreated()"></ejs-listbox> 

 

TS 

import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 

import { ListBoxComponent, FieldSettingsModel } from '@syncfusion/ej2-angular-dropdowns'; 

 

export class AppComponent { 

    @ViewChild('listBoxDetails', {static: true}) 

    public ddlList: ListBoxComponent ; 

    // dataSource definition 

    public data: { [key: string]: Object }[] = [ 

        { text: 'Cabbage', type: 'Leafy and Salad', code: 'item1' }, 

        //.. 

    ]; 

    public ddlFields: FieldSettingsModel = { groupBy: 'type', text: 'text', value: 'code' }; 

    onCreated(){ 

        this.ddlList.selectItems(['Spinach']); 

    } 

     

} 

 

Sample Link: https://stackblitz.com/edit/angular-s4wqwf?file=app.component.ts 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S

[LUCIANO ALMEIDA PIMENTA]

Good Morning

I adapted the example to my need, but it still didn't work.

I don't know if it makes a difference, but I'm using CheckBox:

public selectionSettings: SelectionSettingsModel = {showCheckbox: true};

When I adapted this code in your example, it didn't work.

Also, the data that fills the control is not fixed, it comes from a query (list filled in ngOnInit)

[Vinoth Kumar Sundara Moorthy]

Hi Luciano, 

 

Good day to you. 

 

We have checked your reported issue in ListBox with selectionSettings and it is properly working in our end. Please refer the below code snippet, 

 

app.component.html 

<ejs-listbox #listBoxDetails [dataSource]='data' [selectionSettings]='selectionSettings' [fields]='ddlFields' (created)="onCreated()"></ejs-listbox> 

 

app.component.ts 

import { ListBoxComponent, FieldSettingsModel, SelectionSettingsModel } from '@syncfusion/ej2-angular-dropdowns'; 

 

//.. 

public selectionSettings: SelectionSettingsModel = {showCheckbox: true}; 

 

app.module.ts 

import { ListBoxAllModule, DropDownListModule, CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns'; 

 

//.. 

@NgModule({ declarations: [ AppComponent ], imports: [ ListBoxAllModule, DropDownListModule, BrowserModule], providers: [CheckBoxSelectionService], bootstrap: [AppComponent] 

}) 

export class AppModule { } 

 

Modified Sample Link: https://stackblitz.com/edit/angular-s4wqwf-xykhpg?file=app.component.html 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S

[LUCIANO ALMEIDA PIMENTA]

Good Morning

It worked, but I had to declare my list in code. If I use a query, it doesn't work.

I believe the Created event runs before the query populates the control.

But no problem, I'll use it anyway.

Thanks.

[Vinoth Kumar Sundara Moorthy]

Hi Luciano, 

 

You are most welcome. Please feel free to contact us if you need any further assistance on Syncfusion components. 

 

Regards, 

Vinoth Kumar S 

[Ernesto Yoon]

Hello, I'm not sure if I need to create a new thread since my problem seems to be related to this one.

My scenario is the following, I have a Dialog component and inside a Tab. The Tab has two TabItems, and in each of them I have a ListBox, The Dialog is set as not visible when defined and is opened through a button.

If I try your example provided in the first reply on this thread, I get an undefined trying to select or unselect items in the ListBoxes, any of them.

But if both of them are visible from start, then it works. I need to open the dialog with the listboxes showing pre existent selections that come from other source.

Could you try to simulate this scenario and check if what I'm saying is happening?

Thank you, 

[Ernesto Yoon]

Hi Luciano, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement “To select Item in Listbox using selectItems method” and we have prepared a sample to achieve it using created event in ListBox as like in the below code example, 

 

HTML 

<ejs-listbox #listBoxDetails [dataSource]='data' [fields]='ddlFields' (created)="onCreated()"></ejs-listbox> 

 

TS 

import { Component, ViewEncapsulation, ViewChild } from '@angular/core'; 

import { ListBoxComponent, FieldSettingsModel } from '@syncfusion/ej2-angular-dropdowns'; 

 

export class AppComponent { 

    @ViewChild('listBoxDetails', {static: true}) 

    public ddlList: ListBoxComponent ; 

    // dataSource definition 

    public data: { [key: string]: Object }[] = [ 

        { text: 'Cabbage', type: 'Leafy and Salad', code: 'item1' }, 

        //.. 

    ]; 

    public ddlFields: FieldSettingsModel = { groupBy: 'type', text: 'text', value: 'code' }; 

    onCreated(){ 

        this.ddlList.selectItems(['Spinach']); 

    } 

     

} 

 

Sample Link: https://stackblitz.com/edit/angular-s4wqwf?file=app.component.ts 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S

Hello, one question regarding the selectItems method, I see that is using a string array with "text" instead of the value, I tweak the example a little to see what happens if you have more than one option with the same text, and it's selecting the latest only.

Is this by design? I was expecting that, like a dropdown, the listbox would set selections taking the values into consideration and not the text fields, that also would make selections arrays shorter.

Thank you, 

[Gayathri KarunaiAnandam]

Hi Ernesto, 

We have checked your reported query. We can select the listbox items based on “value” in selectItems method. In selectItems method, we can pass three parameters as selectItems(string[],boolean, boolean).  

• {string[]} items - Array of text value of the item.
• {boolean} state - Set `true`/`false` to select/unselect the list items.
• {boolean} isValue - Set `true` if `items` parameter is an array of unique values.

public data: { [key: string]: Object }[] = [ 

    { text: "Cabbage", type: "Leafy and Salad", code: "item1" }, 

    { text: "Spinach", type: "Leafy and Salad", code: "item2" }, 

    { text: "Wheat grass", type: "Leafy and Salad", code: "item3" }, 

    { text: "Yarrow", type: "Leafy and Salad", code: "item4" }, 

    { text: "Spinach", type: "Leafy and Salad", code: "item5" }, 

    { text: "Chickpea", type: "Beans", code: "item6" }, 

    { text: "Green bean", type: "Beans", code: "item7" }, 

    { text: "Horse gram", type: "Beans", code: "item8" }, 

    { text: "Garlic", type: "Bulb and Stem", code: "item9" }, 

    { text: "Bulb", type: "Bulb and Stem", code: "item10" }, 

    { text: "Onion", type: "Bulb and Stem", code: "item11" } 

  ]; 

  public ddlFields: FieldSettingsModel = { 

    groupBy: "type", 

    text: "text", 

    value: "code", 

    mode: "Multiple" 

  }; 

  onCreated() { 

    this.ddlList.selectItems(["item2", "item5"], true, true); 

  } 

For your reference, we have prepared a sample based on this scenario. Please check the below link. 

Sample: https://stackblitz.com/edit/angular-qial4q-6yubxf?file=app.component.ts 

Please get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Ernesto Yoon]

Thank you for your response.

A couple of things, the online documentation (Angular) doesn't show that third parameter, and it also would be nice to have the online documentation with more samples, for component properties (it doesn't need to be all in stackblitz, could be just an animated gif) and which version they work from on.

Keep up with the good work.

[Gayathri KarunaiAnandam]

Hi Ernesto, 

We have checked your reported query. We would like to let you know that we have showcased the third parameter of selectItems method in our API section of Listbox. Please check the below link. 

API link: https://ej2.syncfusion.com/documentation/api/list-box/#selectitems 

We will add and refresh our documentation in our 2021 Volume 2 main release which will be scheduled on the end of June 2021, and we appreciate your patience until then. 

Regards, 

Gayathri K