We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

SelectItems not whorking

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.

10 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 26, 2019 08:39 AM UTC

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']); 
    } 
     
} 
 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S


LA LUCIANO ALMEIDA PIMENTA September 26, 2019 10:58 AM UTC

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)


VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 27, 2019 11:54 AM UTC

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 { } 
 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S


LA LUCIANO ALMEIDA PIMENTA September 27, 2019 01:06 PM UTC

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.


VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 30, 2019 07:20 AM UTC

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 



EY Ernesto Yoon April 19, 2021 02:00 PM UTC

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, 


EY Ernesto Yoon replied to Vinoth Kumar Sundara Moorthy April 19, 2021 03:08 PM UTC

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']); 
    } 
     
} 
 
 
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, 


GK Gayathri KarunaiAnandam Syncfusion Team April 21, 2021 03:21 AM UTC

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: { [keystring]: 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 ddlFieldsFieldSettingsModel = { 
    groupBy: "type", 
    text: "text", 
    value: "code", 
    mode: "Multiple" 
  }; 
  onCreated() { 
    this.ddlList.selectItems(["item2""item5"], truetrue); 
  } 


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


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

Regards, 
Gayathri K 



EY Ernesto Yoon April 30, 2021 06:52 PM UTC

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.


GK Gayathri KarunaiAnandam Syncfusion Team May 3, 2021 12:33 PM UTC

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. 


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 


Loader.
Live Chat Icon For mobile
Up arrow icon