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
  1. Home
  2. Forum
  3. Blazor
  4. Listbox Binding

Listbox Binding

So I have a listbox that has a binding:
    <EjsListBox @ref="lbSignedUp" Height="150px" DataSource="@SignedUp" TValue="string[]">
        <ListBoxFieldSettings Text="Text" Value="Value" />
        <ListBoxEvents TValue="string[]"></ListBoxEvents>
    </EjsListBox>

….
    public List<KeyStringPair> SignedUp { get; set; }
…..
I then have a button that just adds a new Item:

    private void AddSelected()
    {
        SignedUp.Add(new KeyStringPair() { Text = "Name", Value = "100" });
}

But this addition is not reflected in ListBox!  Does it not have two way bind?

Mike

5 Replies
SP Sangeetha Priya Murugan Syncfusion Team October 10, 2019 04:40 AM

Hi Michael, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported requirement “Two way binding for ListBox Datasource” and it can be achievable by using ObservableCollection as like in the below code example. 
 
Code Example: 
 
<EjsListBox DataSource="@SignedUp" TValue="string[]" ModelType="Model"> 
    <ListBoxFieldSettings Text="Text" Value="Value" /> 
    <ListBoxEvents TValue="string[]"></ListBoxEvents> 
</EjsListBox> 
<input type="button" @onclick="@ChangeData" value="Add data" /> 
 
@code{ 
 
    public ObservableCollection<ListData> SignedUp { get; set; } 
  
    ListData Model = new ListData(); 
    int currentCount = 5; 
    public void ChangeData() 
    { 
        currentCount++; 
        this.SignedUp.Add(new ListData() { Text = "AddedItem" + currentCount, Value = "Item" + currentCount }); 
    } 
 
    protected override void OnInitialized() 
    { 
        this.SignedUp = ListData.getListData(); 
    } 
 
    public class ListData 
    { 
        public string Text { get; set; } 
        public string Value { get; set; } 
 
        public static ObservableCollection<ListData> getListData() 
        { 
            ObservableCollection<ListData> data = new ObservableCollection<ListData>(); 
 
            data.Add(new ListData() { Text = "Hennessey Venom", Value = "Item1" }); 
            data.Add(new ListData() { Text = "Bugatti Chiron", Value = "Item2" }); 
            data.Add(new ListData() { Text = "Bugatti Veyron Super Sport", Value = "Item3" }); 
            data.Add(new ListData() { Text = "SSC Ultimate Aero", Value = "Item4" }); 
            data.Add(new ListData() { Text = "Koenigsegg CCR", Value = "Item5" }); 
            return data; 
        } 
    } 
} 
 
 
For your convenience, we have prepared the sample based on our suggestion. Please find the link below. 
 
 
Could you please check the above sample and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M 


ML Michael Lambert October 10, 2019 12:35 PM

Thanks Sangeetha, 

Another question:  How do I get the selected items in a Listbox.  Say I select a couple items and then press a button to capture what is selected  (multiple items).  

I tried var items = lbSignedUp.GetItems(); , but that doesn't return anything, not even all the items in the ListBox.  Though I can get the total items from the binded ObservableCollection, but  how do I get just the selected ones.

Thanks,
Mike

SP Sangeetha Priya Murugan Syncfusion Team October 11, 2019 04:47 AM

Hi Michael, 
 
Thank you for your update. 
 
We have checked your reported requirement “To get the selected items in the ListBox” and it can be achievable by using the ValueChange event as like in the below code example. 
 
Code Example: 
 
<EjsListBox DataSource="@SignedUp" TValue="string[]" ModelType="Model" @ref="listbox"> 
        <ListBoxFieldSettings Text="Text" Value="Value" /> 
        <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings> 
        <ListBoxEvents TValue="string[]" ValueChange="onValueChange"></ListBoxEvents> 
    </EjsListBox> 
 
<p>@Items</p> 
<input type="button" @onclick="@ChangeData" value="Add data" /> 
<input type="button" @onclick="@ToGetData" value="Get Selected data" /> 
 
@code{ 
    EjsListBox<string[]> listbox; 
    public ObservableCollection<ListData> SignedUp { get; set; } 
    ListData Model = new ListData(); 
    public List<ListData>selectedItems; 
    public string Items; 
    int currentCount = 5; 
    public void ChangeData() 
    { 
        currentCount++; 
        this.SignedUp.Add(new ListData() { Text = "AddedItem" + currentCount, Value = "Item" + currentCount }); 
    } 
    public void ToGetData() 
    { 
       Items = JsonConvert.SerializeObject(selectedItems); // Display the selected items 
        this.StateHasChanged(); 
    } 
    public void onValueChange(Syncfusion.EJ2.Blazor.DropDowns.ListBoxChangeEventArgs args) 
    { 
        selectedItems =  ((JArray)args.Items).ToObject<List<ListData>>(); // Get the selected items in ValueChange event 
    } 
    protected override void OnInitialized() 
    { 
        this.SignedUp = ListData.getListData(); 
    } 
 
    public class ListData 
    { 
        public string Text { get; set; } 
        public string Value { get; set; } 
 
        public static ObservableCollection<ListData> getListData() 
        { 
            ObservableCollection<ListData> data = new ObservableCollection<ListData>(); 
 
            data.Add(new ListData() { Text = "Hennessey Venom", Value = "Item1" }); 
            data.Add(new ListData() { Text = "Bugatti Chiron", Value = "Item2" }); 
            data.Add(new ListData() { Text = "Bugatti Veyron Super Sport", Value = "Item3" }); 
            data.Add(new ListData() { Text = "SSC Ultimate Aero", Value = "Item4" }); 
            data.Add(new ListData() { Text = "Koenigsegg CCR", Value = "Item5" }); 
            return data; 
        } 
    } 
} 
 
For your convenience, we have prepared the sample based on our suggestion that print the selected value in the button click event. Please find the link below. 
 
 
Could you please check the above sample and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M 


VO Vicent Ortega November 4, 2019 12:25 PM

It's a joke?

Do I have to keep a separated List and keep it on sync just to get the selected items or keys???

Come on, what's the puoupose of a ListBox? For sure that internaly it has this values... You can't expose them???????????????

I'm getting really tired of absurd implementations like this. Your Blazor components are PLENTY of bugs, and that's ok for now, because this is a beta version, but that kind of lackings are not acceptable... Please provide a method to just get the list of selected items or at least the selected keys, otherwise we are making difficult what is easy.

MV Madhan Venkateshan Syncfusion Team November 5, 2019 11:47 AM

Hi Vicent,  
 
Sorry for the inconvenience caused. 
We would like to inform you that we have provided the above solution for getting selected Items. Since, we doesn't have property or method to get the selected Items. However, we have already maintained the selected keys or values in our value property. So, could you please check value property to achieve your requirement.  
 
Please refer the below link, 
  
Regards,  
 Madhan V

Loader.
Live Chat Icon For mobile
Up arrow icon