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

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

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


3 Replies

MV Madhan Venkateshan Syncfusion Team 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 



MA Matthew 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


MV Madhan Venkateshan Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon