Strongly typed data binding so that either the Value is a complex object or Item binding is possib;e

How do you suggest that strongly typed data selection binding for selection components like SfListBox can be implemented? For example, in the following blazor code:

  • Person is a class 
  • the People property is a collection of Person instances
  • SelectedPerson is a property of type Person representing the currently selected Person in the list box. I'd like to be able to bind the list box's selected item (a person) to such a property.
  • the list box is intended to allow the user to select a single person from the list of people.
  • the list is presented as a list of people's names.


The following is stylized blazor code that doesn't work but represents the type of result I'd like to achieve:

<SfListBox TItem="Person>" TValue="Person" DataSource="@People" bind-Value="@SelectedPerson">
    <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings>
    <ListBoxFieldSettings Text="@nameof(Person.Name)" Value=""/>
</SfListBox>

It also appears that SfListBox bind-Value functionality doesn't allow binding to an arbitrary domain object. Is this correct?


1 Reply

YA YuvanShankar Arunagiri Syncfusion Team May 12, 2022 10:34 AM UTC

Hi Apolon,


We have validated your reported query. Any class you can use, but set the string[] type for bind-Value and Value property of the listbox. Please check the below code snippet.


[Index.html]:


@using Syncfusion.Blazor.DropDowns

 

<SfListBox TValue="string[]" DataSource="@PeoplesDetails" TItem="Person" @bind-Value="@value">

    <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings>

    <ListBoxFieldSettings Text="People.Name" Value="Id" />

</SfListBox>

 

@code {

    private string[] value = new string[] { "Item1" };

    public List<Person> PeoplesDetails = new List<Person>

{

        new Person{ Id = "Item1", People = new People{ Name = "India" } },

        new Person{ Id = "Item2", People = new People{ Name = "USA" } },

        new Person{ Id = "Item3", People = new People{ Name = "China" } },

        new Person{ Id = "Item4", People = new People{ Name = "Srilanka" } },

        new Person{ Id = "Item5", People = new People{ Name = "AUS" } }

    };

 

    public class People

    {

        public string Name { get; set; }

    }

    public class Person

    {

        public string Id { get; set; }

        public People People { get; set; }

    }

}


Could you please check with above code and get back to us, if you need any further assistance on this. 


Regards,

YuvanShankar A


Loader.
Up arrow icon