DisplayMember and Value Sample with SfPicker

[Murat]

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.

[Muneesh Kumar G]

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  

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PickerList-104491518   

Please get back us, if you have any other queries.  

 

Thanks, 

Muneesh Kumar G. 

 

[Murat]

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?

[Muneesh Kumar G]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PickerList-1569778431  

 

Screenshot:  

 

 

 

Please let us know, if you have any other concerns. 

 

Thanks, 

Muneesh Kumar G. 

[Murat]

Thanks for your help 

[Muneesh Kumar G]

Hi Murat,  

 

Please let us know if you need any further assistance. 

 

Regards, 

Muneesh Kumar G 

[Murat]

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? 

[Muneesh Kumar G]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PickerList1216123548  

 

Thanks,  

Muneesh Kumar G 

[Murat]

Hi Kumar, 

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

[Muneesh Kumar G]

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  

 

[Son Hoang]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PickerList1216123548  

 

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 !

[Anandraj Selvam]

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. 

[Anandraj Selvam]

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 

  

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Picker_GettingStarted-1151041059   

  

Screenshot: 

  

 

  

Please revert us for further investigation. 

  

Regards, 

Anand Raj S.