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

DisplayMember and Value Sample with SfPicker

I have some list of value classes like City, Currency etc. with and ID and Name attribute. 

I want to use picker binding those classes getting value list from DB and setting Name attribute as displaymember, ID attribute as value (ID of selected item) of the picker. 

As far as I have reviewed your documentation, samples are just relavant to displaymember not storing an ID behind the item. 

    public class Currency
    {

        private int_sID;
        public int ID
        {
            get { return _sID; }
            set { _sID = value; }
        }

        private string _sName;
        public string Name
        {
            get { return _sName; }
            set { _sName = value; }
        }

Currency
ID          |     Name
1            |    EUR   
2            |    USD  
3            |    GBP    


The picker item list would be populated from this class and when the user selects USD for instance, I would be able to get 2 as ID of USD record. 

Thanks in advance.

12 Replies

MK Muneesh Kumar G Syncfusion Team August 8, 2019 07:30 AM UTC

Hi Murat, 
 
Greeting from Syncfusion. We have validated your query, you can achieve this by setting DisplayMemberPath in XAML as per the below code snippet.  
  
<StackLayout Padding="30"> 
    <syncPicker:SfPicker HeaderText="Select Item"   
                         DisplayMemberPath="Name"   
                         ShowFooter="True" 
                         PickerHeight="350" 
                         PickerWidth="350" 
                         PickerMode="Default"  
                         ShowHeader="True"> 
        <syncPicker:SfPicker.ItemsSource> 
            <collection:ObservableCollection x:TypeArguments="local:EmployeeInfo"> 
                <local:EmployeeInfo Name="EUR" ID="1"/> 
                <local:EmployeeInfo Name="USD" ID="2"/> 
                <local:EmployeeInfo Name="GBP" ID="3"/> 
            </collection:ObservableCollection> 
            </syncPicker:SfPicker.ItemsSource> 
        </syncPicker:SfPicker> 
    </StackLayout> 

Please find the sample from below location 
 
  

Please get back us, if you have any other queries. 
 
 
Thanks, 
Muneesh Kumar G. 
 



MU Murat August 9, 2019 01:12 PM UTC

Hi Muneesh, 

Thanks for your solution. 

- What if I need to get this list from DB or API? I mean how can use XAML side in case of data binding? 
- How can I get selected item's ID of the picker in viewmodel.cs?



MK Muneesh Kumar G Syncfusion Team August 12, 2019 07:20 AM UTC

Hi Murat, 
 
We have validated your query, you can get the Selected item’s ID by using SelectionChanged Event in view model. We have modified the sample using EventToCommandBehavior.   
 
Code snippet: 
 
 
XAML:  
<syncPicker:SfPicker.Behaviors> 
                <prism:EventToCommandBehavior Command="{Binding SelectionChanged}" 
                                              EventName="SelectionChanged" 
                                              EventArgsConverter="{StaticResource SelectionChangedConverter}" 
                                             /> 
            </syncPicker:SfPicker.Behaviors> 
 
ViewModel.cs: 
 
public ICommand SelectionChanged { get; set; } 
        public ViewModel() 
        { 
            this.SelectionChanged = new Command(this.OnSelectionChanged); 
        } 
        private void OnSelectionChanged(object obj) 
        { 
            var id = (obj as EmployeeInfo).ID; 
            Application.Current.MainPage.DisplayAlert("Notification", "ID " + id, "Ok"); 
        } 
 
Please get the sample from below link. In this sample we have display the ID based on SelectedItem using DisplayAlert. 
 
 
Screenshot:  
 
 
 
Please let us know, if you have any other concerns. 
 
Thanks, 
Muneesh Kumar G. 



MU Murat August 26, 2019 05:46 AM UTC

Thanks for your help 


MK Muneesh Kumar G Syncfusion Team August 26, 2019 05:55 AM UTC

Hi Murat,  
 
Please let us know if you need any further assistance. 
 
Regards, 
Muneesh Kumar G 



MU Murat September 12, 2019 10:29 AM UTC

Hi Kumar, 

How is it possible if I want to set an item as selected on loaded list. 
For this case, let's assume USD (ID=2) is set as selected (default value) when displayed to user? 


MK Muneesh Kumar G Syncfusion Team September 13, 2019 07:12 AM UTC

Hi Murat, 
 
Thanks for your update.  
 
We have validated your query, you can set the SelectedItem of SfPicker using below code snippet. 
 
Code snippet: 
 
public MainPage() 
        { 
            InitializeComponent(); 
            viewmodel = new ViewModel(); 
            var item = new EmployeeInfo() { ID = "3",   Name = "GBP" }; 
            picker.SelectedItem = pickerCollection.Where(p => p.ID == item.ID).First(); 
            this.BindingContext = viewmodel; 
        } 
 
Or you can use the SelectedIndex for display the selected item like below code Snippet 
 
<syncPicker:SfPicker x:Name="picker" 
                         HeaderText="Select Item"   
                         DisplayMemberPath="Name"   
                         ShowFooter="True" 
                         SelectedIndex="1" 
                         PickerHeight="350" 
                         PickerWidth="350" 
                         PickerMode="Default"  
                         ShowHeader="True"> 
 
We have modified the already provided sample, please get it from below link. 
 
 
Thanks,  
Muneesh Kumar G 



MU Murat September 13, 2019 01:04 PM UTC

Hi Kumar, 

Great, it works :) Thank you very much and have a nice weekend. 


MK Muneesh Kumar G Syncfusion Team September 13, 2019 01:45 PM UTC

Hi Murat, 
 
Thanks for the update. 
  
We are glad to know that the given solution works. Please let us know if you need any further assistance. 
 
Thanks,  
Muneesh Kumar G  
 



SH Son Hoang replied to Muneesh Kumar G March 25, 2020 06:56 AM UTC

Hi Murat, 
 
Thanks for your update.  
 
We have validated your query, you can set the SelectedItem of SfPicker using below code snippet. 
 
Code snippet: 
 
public MainPage() 
        { 
            InitializeComponent(); 
            viewmodel = new ViewModel(); 
            var item = new EmployeeInfo() { ID = "3",   Name = "GBP" }; 
            picker.SelectedItem = pickerCollection.Where(p => p.ID == item.ID).First(); 
            this.BindingContext = viewmodel; 
        } 
 
Or you can use the SelectedIndex for display the selected item like below code Snippet 
 
<syncPicker:SfPicker x:Name="picker" 
                         HeaderText="Select Item"   
                         DisplayMemberPath="Name"   
                         ShowFooter="True" 
                         SelectedIndex="1" 
                         PickerHeight="350" 
                         PickerWidth="350" 
                         PickerMode="Default"  
                         ShowHeader="True"> 
 
We have modified the already provided sample, please get it from below link. 
 
 
Thanks,  
Muneesh Kumar G 


I binding SelectedItem in sfpicker with list of model contain property has type of meny typedata (int,string). But it not working, throw error "System.ArgumentException: Specified cast is not valid.Couldn't store <YeuHR.Models.ModelItemCombobox> in Approve_Status Column.  Expected type is Int32".

My model :
public class ModelItemCombobox
    {
        private object key;
        private object value;
        //private List<ModelItemCombobox> itemsSource;

        public object Key { get => key; set { this.key = value; } }
        //(value.GetType() == typeof(Int32)) ? Convert.ToInt32(value) : value; 
        //(key.GetType() == typeof(int))? Convert.ToInt32(key) : key
        //(itemsSource is null) ? ((ModelItemCombobox)itemsSource.Where(a => a.Value == value)).Key : value;
        //(itemsSource is null) ? itemsSource.Where(a => a.Value == value) : value;
        public object Value { get => value; set => this.value = value; }
        //public List<ModelItemCombobox> ItemsSource { get ; set ; }

        public ModelItemCombobox()
        {
        }

        public ModelItemCombobox(object key, object value)
        {
            Key = key;
            Value = value;
        } 
    }

My binding :
SetBinding(SfPicker.SelectedItemProperty, "Dr[" + co.ColumnName + "]", BindingMode.TwoWay);

whith Dr is datarow

ItemSource has type :
Approve_Status   Description
0                     Draft
1                     Submited
2                     Approved
3                     Rejected
4                     Canceled
5                     Submitted to cancel register

Help me !


AS Anandraj Selvam Syncfusion Team March 26, 2020 05:29 PM UTC

Hi Son Hoang,   
   
Thanks for the update.  
   
Currently we are validating the reported issue and we will update you with more details on March 30, 2020.   
   
We appreciate your patience until then.  
   
Regards,   
Anand Raj S. 



AS Anandraj Selvam Syncfusion Team March 27, 2020 11:43 AM UTC

Hi Son Hoang, 
  
Thanks for your patience. 
  
We have validated the reported query and we suggest you to set the selected item based on the item collection to resolve the reported issue as like below code snippet: 
  
Code Snippet: 
  
var item= new ModelItemCombobox() { Key = 1, Value = "Submited" }; 
 
// In this, you can get the item from the items collection based on your column name and set item to selected item. 
 
viewModel.SelectedItems = viewModel.Items.Where(p => p.Value == item.Value).First(); 
picker.SetBinding(SfPicker.SelectedItemProperty,"SelectedItems",BindingMode.TwoWay); 
 
  
We have created sample for this and please find the sample from below link 
  
  
Screenshot: 
  
 
  
Please revert us for further investigation. 
  
Regards, 
Anand Raj S. 


Loader.
Live Chat Icon For mobile
Up arrow icon