HeaderTitle or Placeholder for Listbox?

[Ahmad Atallah]

Is there's anyway to show HeaderTitle or Placeholder for a Listbox?

I tried to add these properties but it didn't work

[selectionSettings]="{ showCheckbox: true }"

showHeader="true"

placeholder="Type"

headerTitle="Type"

Also, can I add id field to the items inside the listbox? So I can get what is similar to getSelectedItems() ? In the "value" I'm only getting the text, and the id is just 0, 1, etc..

I tried to add something like 

[fields]="{ id: 'id', text: 'name' }"

But this didn't work!

Thank you so much :)

[Arunkumar Devendiran]

Hi Ahmad Atallah, 

 

Thank you for contacting Syncfusion support. 

 

Query1: Is there's anyway to show HeaderTitle or Placeholder for a Listbox? 

 

We have checked your reported query and we would inform you that we have already documented for to set the header title on listbox category. In this way, you can achieve your requirement. Please refer the below documentation link. 

 

Documentation link: 

https://ej2.syncfusion.com/angular/documentation/list-box/sorting-and-grouping/#grouping 

 

Query2: I tried to add these properties but it didn't work 

 

We suspect that you are trying to get the listbox items id and text in the value property. We would inform you that we have only handled the item text in the value property. Could you please share your exact scenario? So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 

 

Regards, 

Arunkumar D 

[Ahmad Atallah]

Thank you for your reply, to clarify my second point.

Let's say I have the following Listbox

<div class="control-section">

    <div id="listbox-selection">

        <h4>Select your favorite car:</h4>

        <ejs-listbox [dataSource]='data' [selectionSettings]='selection'></ejs-listbox>

    </div>

</div>

with the following AppComponent:

export class AppComponent {

    // dataSource definition

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

        { text: 'Hennessey Venom', id: 'list-01' },

        { text: 'Bugatti Chiron', id: 'list-02' },

        { text: 'Bugatti Veyron Super Sport', id: 'list-03' },

        { text: 'SSC Ultimate Aero', id: 'list-04' },

        { text: 'Koenigsegg CCR', id: 'list-05' },

        { text: 'McLaren F1', id: 'list-06' },

        { text: 'Aston Martin One- 77', id: 'list-07' },

        { text: 'Jaguar XJ220', id: 'list-08' },

        { text: 'McLaren P1', id: 'list-09' },

        { text: 'Ferrari LaFerrari', id: 'list-10' }

    ];

    public selection = { showCheckbox: true };

}

And I selected McLaren P1, Aston Martin One-77 and Maclaren F1.

Now, I want to get the selected items (their texts and their ID as well) so the expecting result I want is:

<value="McLaren P1", id="list-09">

<value="Aston Martin One-77 ", id="list-07">

<value="McLaren F1", id="list-06">

I hope it's more clear now

Thanks

[Arunkumar Devendiran]

Hi Ahmad Atallah, 

 

We have checked your reported query and we suspect that you are trying to get the value and id for selected items in our listbox. We would inform you that we have created the sample for your reported query, in that we have got the value and id for selected items by using getDataByValue method. In this way, you can achieve your requirement. Please refer the below sample link. 

 

Sample Link: 

https://stackblitz.com/edit/angular-bxkytq-s4ursp?file=app.component.ts 

 

Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 

 

Regards, 

Arunkumar D 

[Ahmad Atallah]

You guys are awesome! thank you so much :)

[Madhan Venkateshan]

Hi Ahmad Atallah, 

 

Thank you for your update, Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Madhan V 

[Ahmad Atallah]

I'm having an error "Property 'getSelectedItems' is private and only accessible within class 'ListBox'." when tried to apply your sample on my machine.

Even in the example the error is there, but for me the error is not letting the app to run. any fix for it?

https://stackblitz.com/edit/angular-bxkytq-s4ursp?file=app.component.ts

[Arunkumar Devendiran]

Hi Ahmad Atallah 

 

We have checked your reported query and we suggest you to use the value property to resolve your reported issue. We have created the sample for your reported query, in that we have got the selected items by using value property. Please refer the below sample link. 

 

Sample link:  

https://stackblitz.com/edit/angular-bxkytq-eyiqn9?file=app.component.ts 

 

Please get back to us if you need further assistance. 

 

Regards, 

Arunkumar D