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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Initialise Multi-Select Listbox with Checkbox to show selected items based on datasource

Thread ID:

Created:

Updated:

Platform:

Replies:

149398 Nov 25,2019 10:45 AM UTC Nov 27,2019 10:10 AM UTC Blazor 3
loading
Tags: ListBox
Matthew
Asked On November 25, 2019 10:45 AM UTC

I'd like to know how to initially set the selected state on the items in a multi-select listbox.
I've had a poke around the documentation, and tried a few things out, but I cannot seem to make it work.

The functionality I would like would be similar to that of the ListView - which does this perfectly by allowing me to bind the checked state to a field in my data source, i'd like to do the same thing with a listbox. The reason I want this for the listbox is so that I can take advantage of the filter, which does not exist for the listview.

To explain further, if in my data source I have 10 records, and I want to initially set 5 of them as selected in the listbox based on a boolean flag in my datasource - how do I do this?

e.g.

ID
Name
Selected
1
Name 1
false
2
Name 2
true
3
Name 3
true
4
Name 4
false
5
Name 5
true
6
Name 6
false
7
Name 7
false
8
Name 8
true
9
Name 9
false
10
Name 10
true

So in my listbox, items 2, 3, 5, 8 and 9 would appear as selected


Thanks


Madhan Venkateshan [Syncfusion]
Replied On November 26, 2019 11:12 AM UTC

Hi Matthew, 
 
Good day to you. 
 
We would like you to suggest you to loop the data source then add the value field (ID) to ListboxValue based on selected property in data source and assign the ListboxValue to Value property of the ListBox. Please refer the below code snippets and sample link 
 
 
Index.razor 
<div id="listbox-control"> 
    <EjsListBox Value=@ListboxValue DataSource="@ListData" TValue="List<string>"> 
        <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings> 
        <ListBoxFieldSettings Text="Name" Value="ID"></ListBoxFieldSettings> 
    </EjsListBox> 
</div> 
<style> 
    #listbox-control { 
        width: 25%; 
        margin: auto; 
    } 
</style> 
@code{ 
    public List<string> ListboxValue = new List<string>(); 
    public List<ListDataModel> ListData = new List<ListDataModel> 
{ 
        new ListDataModel { Name = "Name 1", ID = "1", Selected = false }, 
        new ListDataModel { Name = "Name 2", ID = "2", Selected = true }, 
        …….. 
    }; 
 
    protected override void OnInitialized() 
    { 
 
        foreach (ListDataModel data in ListData) 
        { 
            if (data.Selected) 
            { 
                this.ListboxValue.Add(data.ID); 
            } 
        } 
    } 
 
    public class ListDataModel 
    { 
        public string Name { get; set; } 
        public string ID { get; set; } 
        public bool Selected { get; set; } 
    } 
} 
 
Regards, 
Madhan V 


Matthew
Replied On November 26, 2019 01:45 PM UTC

Hi,

That works, but I have now encountered a different problem.
When I have selected items in the listbox, then apply a filter which does not include these selected items, then set the filter back to nothing, the previously selected items have been deselected.

What I am trying to achieve is the ability to select multiple UK postcode areas, there are 2821 in total, so the filter was my hope of being able to quickly find the items needed in the list, allow the user to select/deselect then apply a different filter or no filter and still have all previously selected items intact.

Is this possible with the ListBox control? Or should I look to do something a bit different?

Thanks

Madhan Venkateshan [Syncfusion]
Replied On November 27, 2019 10:10 AM UTC

Hi Matthew, 
 
Sorry for the inconvenience caused. 
 
We have confirmed that the reported issue is a defect. The fix for this issue is estimated to be available on Volume 4 release, which is expected to be available by mid of December month and appreciate your patience until then. You can track the same through the below feedback 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