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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Listbox Binding

Thread ID:

Created:

Updated:

Platform:

Replies:

148195 Oct 9,2019 06:14 PM UTC Nov 5,2019 04:47 PM UTC Blazor 5
loading
Tags: ListBox
Michael Lambert
Asked On October 9, 2019 06:14 PM UTC

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

Sangeetha Priya Murugan [Syncfusion]
Replied On October 10, 2019 09:40 AM UTC

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 


Michael Lambert
Replied On October 10, 2019 05:35 PM UTC

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

Sangeetha Priya Murugan [Syncfusion]
Replied On October 11, 2019 09:47 AM UTC

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 


Vicent Ortega
Replied On November 4, 2019 05:25 PM UTC

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.

Madhan Venkateshan [Syncfusion]
Replied On November 5, 2019 04:47 PM UTC

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon