ListBox Item Selection

[Keiran]

Hi,

I have two items in a ListBox and would like to select one to work with, which I'm trying to do by triggering a ValueChange event callback.

Then in the OnChange method I'm getting ListBoxChangeEventArgs<TValue, TItem> args but it contains both items. 

How can I retrieve just the selected item? Maybe I'm not selecting the item properly?

Thanks,

Keiran

[Mohan Kumar Ramasamy]

Hi Keiran 

 

We have checked your reported query, we have get the selected items using two way binding Value property. Please refer below code snippets. 

 

 

@using Syncfusion.Blazor.DropDowns 

 

<div class="col-lg-12 control-section"> 

    <div id="listbox-control"> 

        <h4>Select your favorite car:</h4> 

        <SfListBox @bind-Value=@Value DataSource="@Data" TValue="string[]" TItem="DataValues"> 

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

            <ListBoxFieldSettings Text="Text" Value="Text"></ListBoxFieldSettings> 

        </SfListBox> 

    </div> 

    @{ 

 

        foreach (string item in Value) 

        { 

            <div> @item </div> 

        } 

 

    } 

 

</div> 

@code 

{ 

    private string[] Value = new string[] { "Hennessey Venom" }; 

    private List<DataValues> Data = new List<DataValues> 

{ 

        new DataValues { Text = "Hennessey Venom", Id = "List-01" }, 

        new DataValues { Text = "Bugatti Chiron", Id = "List-02" }, 

        new DataValues { Text = "Bugatti Veyron Super Sport", Id = "List-03" }, 

        new DataValues { Text = "SSC Ultimate Aero", Id = "List-04" }, 

        new DataValues { Text = "Koenigsegg CCR", Id = "List-05" }, 

        new DataValues { Text = "McLaren F1", Id = "List-06" }, 

        new DataValues { Text = "Aston Martin One- 77", Id = "List-07" }, 

        new DataValues { Text = "Jaguar XJ220", Id = "List-08" }, 

        new DataValues { Text = "McLaren P1", Id = "List-09" }, 

        new DataValues { Text = "Ferrari LaFerrari", Id = "List-10" } 

    }; 

    public class DataValues 

    { 

        public string Text { get; set; } 

        public string Id { get; set; } 

    } 

} 

 

 

For your reference we have prepared a sample. Please find the sample link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/159372/ze/ListBox-ValueProperty62395996  

 

Please let us know if you need any further assistance, 

 

Regards, 

Mohan kumar R 

[Keiran]

Hi Mohan, 

Thanks for your help, I was able to get it working as required.

Keiran

[Mohan Kumar Ramasamy]

Hi Keiran, 

 

Thanks for the update.  

 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohan kumar R 

[Shannon McCoy]

There is an apparent bug when using any value besides simple types ( e.g. int, string ) I took the same sample code and added a "complex" class type and you always get back a null when selecting a value.

Breakpoint Change and Change2 and you will see that the value is null on the complex type even though the boxes are cut and paste the same with only the type of the "value" changed.

@page "/listbox-features"
@using Syncfusion.Blazor.DropDowns

<div class="col-lg-12 control-section">
    <div id="listbox-control">
        <h4>Select your favorite car:</h4>
        <SfListBox @bind-Value=@Value DataSource="@Data" TValue="string[]" TItem="DataValues">
            <ListBoxFieldSettings Text="Text" Value="Id"/>
            <ListBoxEvents ValueChange="Change" TItem="DataValues" TValue="string[]"/>
            <ListBoxSelectionSettings Mode="SelectionMode.Single"/>
        </SfListBox>


        <SfListBox @bind-Value=@Value2 DataSource="@Data" TValue="Complex[]" TItem="DataValues">
            <ListBoxFieldSettings Text="Text" Value="Complex"/>
            <ListBoxEvents ValueChange="Change2" TItem="DataValues" TValue="Complex[]"/>
            <ListBoxSelectionSettings Mode="SelectionMode.Single"/>
        </SfListBox>
    </div>
    @{
        if( Value != null )
            {
            foreach( var item in Value )
                {
                <div> @item </div>
                }
            }

        if( Value2 != null )
            {
            foreach( var item in Value2 )
                {
                <div> @item.Name </div>
                <div> @item.Age </div>
                <div> @item.Birthday </div>
                }
            }
    }
</div>
@code
{
    private string[]? Value;
    private Complex[]? Value2;

    private void Change( ListBoxChangeEventArgs< string[], DataValues > args )
        {
        }

    private void Change2( ListBoxChangeEventArgs< Complex[], DataValues > args )
        {
        }

    private List< DataValues > Data = new List< DataValues >
        {
        new DataValues { Text = "Hennessey Venom", Id = "List-01", Complex = new Complex{Name = "Dave", Age = 15 }},
        new DataValues { Text = "Bugatti Chiron", Id = "List-02",  Complex =  new Complex { Name = "Julie", Age = 24 } },
        new DataValues { Text = "Bugatti Veyron Super Sport", Id = "List-03",  Complex = new Complex{Name = "Agnes", Age = 34 } },
        new DataValues { Text = "SSC Ultimate Aero", Id = "List-04",  Complex = new Complex{Name = "Belinda", Age = 22 } },
        new DataValues { Text = "Koenigsegg CCR", Id = "List-05",  Complex = new Complex{Name = "Marco", Age = 55 } },
        new DataValues { Text = "McLaren F1", Id = "List-06",  Complex = new Complex{Name = "Karen", Age = 35 } },
        new DataValues { Text = "Aston Martin One- 77", Id = "List-07",  Complex = new Complex{Name = "Rahul", Age = 23 } },
        new DataValues { Text = "Jaguar XJ220", Id = "List-08",  Complex = new Complex{Name = "Divya", Age = 26 } },
        new DataValues { Text = "McLaren P1", Id = "List-09",  Complex = new Complex{Name = "Mike", Age = 77 } },
        new DataValues { Text = "Ferrari LaFerrari", Id = "List-10",  Complex = new Complex{Name = "Susan", Age = 88 } }
        };

    public class DataValues
        {
        public string Text { get; set; }
        public string Id { get; set; }
        public Complex Complex { get; set; }
        }

    public class Complex
        {
        public string Name { get; set; }
        public int Age { get; set; }
        public DateTime Birthday { get; set; }
        }
}
    <style>
    #listbox-control {
        width: 350px;
        margin: auto;
    }

    @@media screen and (max-width: 590px) {
        #listbox-control {
            width: 100%;
        }
    }
</style>

[Shannon McCoy]

Also, once I can select complex types properly. How would I go about using list to simply return the selected item in the list without having to refer to a property.

For example I have a class Person with linked list people

public class Person
{ public string Name {get; set;} public int Age { get; set; }
public DateTime Birthday { get; set; } }
public LinkedList<Person> People;

How do I make a list box where I just want to use the <ListBoxFieldSettings Value="Person object itself instead of a property" Text="Name" /> so I don't have to create a wrapper object and list just to do a simple list selection?

[YuvanShankar Arunagiri]

Hi Shannon,

We are validating your query and will update you the details on or before 14th July 2022.

Regards,

YuvanShankar A

[YuvanShankar Arunagiri]

Hi Shannon,

We have checked your reported issue and prepared the sample based on your requirement. Please refer the below code snippet.

@using Syncfusion.Blazor.DropDowns

 

<div class="col-lg-12 control-section">

  <div id="listbox-control">

    <h4>Select your favorite car:</h4>

    <SfListBox @ref="listObj" @bind-Value=@Value2 DataSource="@Data" TValue="DataValues[]" TItem="DataValues">

      <ListBoxEvents ValueChange="Change2" TItem="DataValues" TValue="DataValues[]" />

      <ListBoxSelectionSettings Mode="SelectionMode.Single" />

      <ListBoxFieldSettings Text="Text" />

    </SfListBox>

  </div>

  @{

    if (Value2 != null)

    {

      foreach (var item in Value2)

      {

        <div> @item.Complex.Name </div>

        <div> @item.Complex.Age </div>

        <div> @item.Complex.Birthday </div>

      }

    }

  }

</div>

@code

{

    private DataValues[]? Value2 = new DataValues[] { new DataValues { Text = "Hennessey Venom", Id = "List-01", Complex = new Complex { Name = "Dave", Age = 15 } } };

    SfListBox<DataValues[], DataValues> listObj;

    private void Change2(ListBoxChangeEventArgs<DataValues[], DataValues> args)

    {

      var item = listObj.Value;

    }

 

    private List<DataValues> Data = new List<DataValues>

{

new DataValues { Text = "Hennessey Venom", Id = "List-01", Complex = new Complex{Name = "Dave", Age = 15 }},

new DataValues { Text = "Bugatti Chiron", Id = "List-02",  Complex =  new Complex { Name = "Julie", Age = 24 } },

new DataValues { Text = "Bugatti Veyron Super Sport", Id = "List-03",  Complex = new Complex{Name = "Agnes", Age = 34 } },

new DataValues { Text = "SSC Ultimate Aero", Id = "List-04",  Complex = new Complex{Name = "Belinda", Age = 22 } },

new DataValues { Text = "Koenigsegg CCR", Id = "List-05",  Complex = new Complex{Name = "Marco", Age = 55 } },

new DataValues { Text = "McLaren F1", Id = "List-06",  Complex = new Complex{Name = "Karen", Age = 35 } },

new DataValues { Text = "Aston Martin One- 77", Id = "List-07",  Complex = new Complex{Name = "Rahul", Age = 23 } },

new DataValues { Text = "Jaguar XJ220", Id = "List-08",  Complex = new Complex{Name = "Divya", Age = 26 } },

new DataValues { Text = "McLaren P1", Id = "List-09",  Complex = new Complex{Name = "Mike", Age = 77 } },

new DataValues { Text = "Ferrari LaFerrari", Id = "List-10",  Complex = new Complex{Name = "Susan", Age = 88 } }

};

 

    public class DataValues

    {

      public string Text { get; set; }

      public string Id { get; set; }

      public Complex Complex { get; set; }

    }

 

    public class Complex

    {

      public string Name { get; set; }

      public int Age { get; set; }

      public DateTime Birthday { get; set; }

    }

}

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

Regards,

YuvanShankar A

Attachment: Index_27c43298.zip