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
close icon

How to get selected element in Preview8

Hello,

I'm a little bit lost. I try to show a list of data items and jut get back the selected one. If I'm using a ListView, I can style the template using context but I don't know how to get the selected data.
If I'm using a ListBox, I also don't know how to get selected data item too BUT I can't style the template because "context" is unknown.

Can anyone give me an idea? I've searched the samples but there is no sample for selection of an entry.


 <EjsListBox @bind-Value=@Value DataSource="@PlaylistItems" TValue="PlaylistItemModel[]">
        <ListBoxFieldSettings Id="ID" Text="Title"></ListBoxFieldSettings>
       
    <ListBoxTemplates>
        <template>
            @{
                PlaylistItemModel currentData = context as PlaylistItemModel; 
                <div>
                    <p>
                        @currentData.Title
                    </p>
                    <EjsSwitch @bind-Checked="@currentData.IsActive"></EjsSwitch>
                </div>
            }
        </template>
    </ListBoxTemplates>
      
    </EjsListBox>
   
@code {
   
 
    PlaylistItemModel[] _value = new PlaylistItemModel[0];
    public PlaylistItemModel[] Value
    {
        get
        {
          
            return _value;
        }
        set
        {
            _value = value;
        }
    }
  
    [Parameter]
    public List<PlaylistItemModel> PlaylistItems { get; set; }
    PlaylistItemModel Model = new PlaylistItemModel();                  // dient offenbar ausschließlich der Typenbestimmung für das Listentemplate
  
 
    [Parameter]
    public EventCallback<PlaylistItemModel> PlaylistItemSelected
    {
        get; set;
    }
    void SelectionChanged(UIChangeEventArgs e)
    {
    }


Thanks!

21 Replies

SP Sangeetha Priya Murugan Syncfusion Team August 22, 2019 01:32 PM UTC

Hi Peter, 

Thank you for contacting Syncfusion support. 

We have checked your reported requirement “To get the selected item in the ListBox” and it can be achievable by using ValueChange event as like in the below code example. 

Code Example: 
 
<EjsListBox Value="@Content" DataSource="@Data" TValue="string[]" ModelType="Model"> 
        <ListBoxEvents ValueChange="@onChange" TValue="string[]"></ListBoxEvents> 
        <ListBoxFieldSettings Text="Title" Value="Title"></ListBoxFieldSettings> 
        <ListBoxTemplates> 
            <ItemTemplate> 
                @{ 
                    PlaylistItemModel currentData = context as PlaylistItemModel; 
                    <div> 
                        <p> 
                            <label for="@currentData.Title"> 
                                @currentData.Title 
                            </label> 
                        </p> 
                        <div> 
                            <EjsSwitch ID=@currentData.Title Checked="@currentData.IsActive"></EjsSwitch> 
                        </div> 
                    </div> 
                } 
            </ItemTemplate> 
        </ListBoxTemplates> 
    </EjsListBox> 
 
@code { 
   public string SelectedValue = "Javascript"; 
    public void onChange(ListBoxChangeEventArgs args) 
    { 
        SelectedValue = ((JArray)args.Value).ToObject<List<string>>()[0]; 
        this.StateHasChanged(); 
    } 
} 

For your convenience, we have prepared the sample based on our suggestion. Please find the link below. 


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

Regards, 
Sangeetha M 




PB Peter Benedix August 24, 2019 05:30 AM UTC

Thanks for your sample. It works great to show me how to use the onChange event and the template. The only problem now is, that I only get the "Title" member of the PlaylistItemModel as string - but I need the entire model object that is selected. What can I do?

Thanks!


SP Sangeetha Priya Murugan Syncfusion Team August 26, 2019 09:43 AM UTC

Hi Peter, 

Thank you for your update. 

We have checked your reported requirement “To get the entire object of the selected list item” and it can be achievable in our ListBox, using Items property in ValueChange event as like in the below code example. 

Code Example: 
 
<EjsListBox Value="@Content" DataSource="@Data" TValue="string[]" ModelType="Model"> 
        <ListBoxEvents ValueChange="@onChange" TValue="string[]"></ListBoxEvents> 
    </EjsListBox> 
@code { 
public void onChange(ListBoxChangeEventArgs args) 
    { 
         SelectedValue = args.Items.ToString(); // To get the entire object of the selected item 
        this.StateHasChanged(); 
    } 
} 

For your convenience, we have modified our previously updated sample based on our suggestion. Please find the link below. 


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

Regards, 
Sangeetha M 




PB Peter Benedix August 26, 2019 11:31 AM UTC

Perfect! Thanks for the great support!


SP Sangeetha Priya Murugan Syncfusion Team August 27, 2019 04:39 AM UTC

Hi Peter, 
  
We are happy to hear that your reported issue has been resolved. Please feel free to contact us if you need any further assistance on Syncfusion components. 
  
Regards, 
Sangeetha M 



PB Peter Benedix August 27, 2019 11:43 AM UTC

I'm very sorry, but I still have an issue. I just try to build a two-way-binding to the DataSource. If I change the count of elements in the @Data, there is no effect and @bind-DataSource is not existing.

Thanks for helping again!


SP Sangeetha Priya Murugan Syncfusion Team August 28, 2019 12:32 PM UTC

Hi Peter, 

Thank you for your update. 

We have checked your reported requirement and “To build a two-way-binding for DataSource” and it can be achievable by using the ObservableCollection as like in the below code example. 

index.html 
 
@using  System.Collections.ObjectModel    
 
<EjsListBox Value="@Content" DataSource="@data" TValue="string[]" ModelType="Model"> 
        ..// 
    </EjsListBox> 
    <input type="button" @onclick="@ChangeData" value="Add data" /> 
   
@code{ 
 
        public ObservableCollection<PlaylistItemModel> data { get; set; } 
        private string[] Content = new string[] { "Javascript" }; 
        PlaylistItemModel Model = new PlaylistItemModel(); 
        int currentCount = 5; 
        public void ChangeData() 
        { 
            currentCount++; 
            this.data.Add(new PlaylistItemModel() { IsActive = false, Title = "AddedItem" +currentCount, ID="Item"+currentCount}); 
        } 
 
        protected override void OnInitialized() 
        { 
            this.data = PlaylistItemModel.getListData(); 
        } 
 
        public class PlaylistItemModel 
        { 
            public bool IsActive { get; set; } 
            public string Title { get; set; } 
            public string ID { get; set; } 
 
            public static ObservableCollection<PlaylistItemModel> getListData() 
            { 
                ObservableCollection<PlaylistItemModel> data = new ObservableCollection<PlaylistItemModel>(); 
 
                data.Add(new PlaylistItemModel() { Title = "Hennessey Venom", IsActive = true, ID="Item1" }); 
                data.Add(new PlaylistItemModel() { Title = "Bugatti Chiron", IsActive = false,ID="Item2" }); 
                data.Add(new PlaylistItemModel() { Title = "Bugatti Veyron Super Sport", IsActive = true,ID="Item3" }); 
                data.Add(new PlaylistItemModel() { Title = "SSC Ultimate Aero", IsActive = false,ID="Item4" }); 
                data.Add(new PlaylistItemModel() { Title = "Koenigsegg CCR", IsActive = false,ID="Item5" }); 
                return data; 
 
            } 
        } 
        public string SelectedValue = "Javascript"; 
        public void onChange(ListBoxChangeEventArgs args) 
        { 
            SelectedValue = args.Items.ToString();  // To get the entire object of the selected item 
            this.StateHasChanged(); 
        } 
    }   

For your convenience, we have prepared the sample that adds the new item to the ListBox. Please find the link below. 


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

Regards, 
Sangeetha M 



PB Peter Benedix August 28, 2019 12:57 PM UTC

Realy….I love this support! Thanks!


SP Sangeetha Priya Murugan Syncfusion Team August 29, 2019 10:23 AM UTC

Hi Peter, 
 
Thank you for your update, please feel free to contact us if you need any further assistance on this. 
  
Regards, 
Sangeetha M 



PB Peter Benedix September 5, 2019 03:54 AM UTC

I have issues by the visual update of the listbox using ObservableCollection. In the attached video you can see, that the entire list is cleared and refilled when I add a new element to the ObservableCollection. This looks really ugly. What can I do to prevent this behavior?

Thanks.

Attachment: ObservableCollection_2535c8d9.zip


PB Peter Benedix September 5, 2019 04:00 AM UTC

I've added a second video. It looks like the listbox is refreshing also if a member of one entry is changing. This is my code:

 <EjsListBox Value="@Content" DataSource="@PlaylistItems" TValue="string[]" ModelType="Model">
        <ListBoxEvents ValueChange="@onChange" TValue="string[]"></ListBoxEvents>
        <ListBoxFieldSettings Text="Title" Value="Title"></ListBoxFieldSettings>
        <ListBoxTemplates>
            <ItemTemplate>
                @{
                    PlaylistItemModel currentData = context as PlaylistItemModel;
                    <div style="height:30px">
                        <label style="float:left" for="@currentData.Title">
                            @currentData.Title
                        </label>
                        <div style="float:left; margin-left:20px">
                            <EjsSwitch ID=@currentData.Title Checked="@currentData.IsActive"></EjsSwitch>
                        </div>
                    </div>
                }
            </ItemTemplate>
        </ListBoxTemplates>
    </EjsListBox>



Attachment: ObservableCollection_2_a670526.zip


PB Peter Benedix September 5, 2019 04:22 AM UTC

Ok...now it becomes strange. I've modified the demo project from you. I added a button with a onclick Event that do nothing - and the listbox is also refreshing in a bad way. So what's wrong?

Attachment: ListBoxSample_4d0904b.zip


SP Sangeetha Priya Murugan Syncfusion Team September 6, 2019 01:40 PM UTC

Hi Peter, 
 
Thank you for your update. 
 
We have checked your reported issue and we are able to reproduce it in our end. So, we confirmed this as a defect and planned to include the fix for this issue in our upcoming by-weekly release. Which is expected to be available in mid of this month, we appreciate your patience until then. You can track the status of this defect using below link from our feedback portal,  
 
 
Regards, 
Sangeetha M 



PB Peter Benedix September 6, 2019 01:49 PM UTC

This is totaly nasty - the same situation two years before as we puchased your wpf suite. We need ListBox, RichTextBox and Scheduler and NOTHING is useable right now! Stop selling such untested stuff!!!!


SP Sangeetha Priya Murugan Syncfusion Team September 9, 2019 12:35 PM UTC

Hi Peter, 
 
Sorry for the inconvenience caused. 
 
Our product is currently in beta, and we are trying to fix and provide solutions in a shorter timeframe. We will make our product stable before it becomes final. Until then, we're asking for your patience.  As promised we will provide you the fix for ListBox control related issues in our upcoming by-weekly release, which is expected to be available in mid of this month. 
Please let me know if you have any questions. 
 
Regards, 
Sangeetha M 



PB Peter Benedix September 9, 2019 02:00 PM UTC

You're right - it's marked as beta, but two points about this:

1. Most bugs are so heavy that Alpha would be a better state.

2. You're taking money for a product that looks untested and not useable. Our customers don't care about how fast YOU are fixing bugs - they only care about how fast WE can deliver.


SD Steffen Dietrich September 24, 2019 08:54 AM UTC

Hello,

something new about this?

I tested it with the newest Version and it doesn't work. (Version 17.2.0.52-beta)

<EjsListBox TValue="string[]" DataSource="@Vehicles">
    <ListBoxEvents ValueChange="@onChange" ItemSelected="@onSelect" Select="@onSelect" TValue="object" />
    <ListBoxFieldSettings Text="Text" Value="Id" />
    <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings>
</EjsListBox>

@code {
public void onSelect(object args)
    {
        Console.WriteLine("onSelect");

    }

    public void onChange(ListBoxChangeEventArgs  args)
    {
        Console.WriteLine("onChange");
    }
}


SP Sangeetha Priya Murugan Syncfusion Team September 25, 2019 09:35 AM UTC

Hi Steffen, 
 
Thank you for your update. 
 
We have checked your reported issue based on your provided codes and we would like to let you know that we have deprecated the Select event in ListBox, so we would suggest you to use ValueChange event instead of Select event as like in the below example. 
 
Code Block: 
 
<EjsListBox TValue="string[]" DataSource="@Vehicles"> 
    <ListBoxEvents ValueChange="@onChange" TValue="string[]" /> 
    <ListBoxFieldSettings Text="text" Value="id" /> 
    <ListBoxSelectionSettings Mode="SelectionMode.Single"></ListBoxSelectionSettings> 
</EjsListBox> 
 
@code { 
 
    public void onChange(ListBoxChangeEventArgs args) 
    { 
        Console.WriteLine("onChange"); 
    } 
 } 
 
For your convenience, we have prepared the sample based on our suggestion. Please find the link below. 
 
 
Please refer the below link for more details regarding the ValueChange event. 
 
 
Meanwhile, ItemSelected event is triggered when the user typing a character in ListBox component while filtering. For more details regarding the ItemSelected event please find the link below. 
 
 
Could you please check the above sample and links and get back to us with more information, such as a 
issue replicable sample and a detailed description of your issue, if you still have the same issue or need further assistance. 
 
Regards, 
Sangeetha M 



SP Sangeetha Priya Murugan Syncfusion Team October 14, 2019 05:51 AM UTC

Hi Peter, 
 
Thank you for your patience. 
 
We corrected the reported issue and included it in our by weekly release (17.3.0.17-beta) version. So we would suggest you to update the nuget packages and use the updated JS & CSS files to resolve this issue in your end. Please find the links below. 
 
Nuget Link:  
 
Script Links:  
 
 
 
Could you please check the above links and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M 



VO Vicent Ortega November 4, 2019 05:16 PM UTC

And could I ask why the EjsListBox doesn't have a "SelectedItems" property or, at least, a "SelectedValues" one?
I need these values at a given time and I don't want to keep a separated list and keep it in sync... It's too much trouble for something that is inherent to the control (it's value/s). Furthermore, you already have the ValueType property just to allow typed access to the list of keys, isn't it?

How do I get the list of selected keys or models from an event handler other than ValueChange?


MV Madhan Venkateshan Syncfusion Team November 5, 2019 04:49 PM UTC

Hi Vicent,  
 
Sorry for the inconvenience caused. 

We would like to inform you that we have provided the above solution for getting selected Items. Since, we doesn't have property or method to get the selected Items. However, we have already maintained the selected keys or values in our value property. So, could you please check value property to achieve your requirement.  
 
Please refer the below link, 
 
Regards,  
Madhan V 


Loader.
Live Chat Icon For mobile
Up arrow icon