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

[Matthew]

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]

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 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/149398/ze/ListboxSelectWithDataSource1319942513 

 

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]

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]

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 

 

https://www.syncfusion.com/feedback/9694/checkbox-selection-not-maintained-after-removing-filter 

  

Regards, 

Madhan V