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

Binding to label

Hi,

When using cascading picker, how can i bind my values that i have selected to a label? i will share my code and i want to bind values to that label every time i make a change.



8 Replies

NA nabeel October 24, 2019 12:09 PM UTC

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace CascadingPicker
{
    public partial class MainPage : ContentPage
    {
        string CurrentItem;
        public MainPage()
        {
            InitializeComponent();
        }

        private void picker_SelectionChanged(object sender, Syncfusion.SfPicker.XForms.SelectionChangedEventArgs e)
        {
            if (picker.ItemsSource != null && e.NewValue is IList && (picker.ItemsSource as IList).Count > 1 && CurrentItem != (e.NewValue as IList)[0].ToString())
            {
                //Updated the second column collection based on first column selected value.
                (picker.ItemsSource as ObservableCollection<object>).RemoveAt(1);
                (picker.ItemsSource as ObservableCollection<object>).Add(GetCountry((e.NewValue as IList)[0].ToString()));
            }
        }

        public ObservableCollection<object> GetCountry(string CountryName)
        {
            CurrentItem = CountryName;
            ObservableCollection<object> selectedCountries = new ObservableCollection<object>();
            if (CountryName == "UK")
            {
                selectedCountries.Add("London");
                selectedCountries.Add("Manchester");
                selectedCountries.Add("Cambridge");
                selectedCountries.Add("Edinburgh");
                selectedCountries.Add("Glasgow");
                selectedCountries.Add("Birmingham");
            }
            else if (CountryName == "USA")
            {
                selectedCountries.Add("New York");
                selectedCountries.Add("Seattle");
                selectedCountries.Add("Wasington");
                selectedCountries.Add("Chicago");
                selectedCountries.Add("Boston");
                selectedCountries.Add("Los Angles");
            }
            else if (CountryName == "UAE")
            {
                selectedCountries.Add("Dubai");
                selectedCountries.Add("Abu Dhabi");
                selectedCountries.Add("Fujairah");
                selectedCountries.Add("Sharjah");
                selectedCountries.Add("Ajman");
                selectedCountries.Add("AL Ain");
            }
            else if (CountryName == "India")
            {
                selectedCountries.Add("Mumbai");
                selectedCountries.Add("Bengaluru");
                selectedCountries.Add("Chennai");
                selectedCountries.Add("Pune");
                selectedCountries.Add("Jaipur");
                selectedCountries.Add("Delhi");
            }
            else
            {
                selectedCountries.Add("Berlin");
                selectedCountries.Add("Munich");
                selectedCountries.Add("Frankfurt");
                selectedCountries.Add("Hamburg");
                selectedCountries.Add("Cologne");
                selectedCountries.Add("Bonn");
            }
            return selectedCountries;
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            picker.IsOpen = true;
        }
    }

    public class PickerCascading : INotifyPropertyChanged
    {
        #region Public Properties

        /// <summary>
        /// Area is the acutal DataSource for SfPicker control which will holds the collection of Country and State
        /// </summary>
        /// <value>The area.</value>
        public ObservableCollection<object> Area { get; set; }

        //Country is the collection of country names
        private ObservableCollection<object> Country { get; set; }

        //State is the collection of state names
        private ObservableCollection<object> State { get; set; }

        /// <summary>
        /// Headers api is holds the column name for every column in cascading picker
        /// </summary>
        /// <value>The Headers.</value>
        public ObservableCollection<string> Header { get; set; }

        private object _selectedarea;

        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //Identify the selected area using property changed method
        public object SelectedArea
        {
            get { return _selectedarea; }
            set { _selectedarea = value; RaisePropertyChanged("SelectedArea"); }
        }

        public PickerCascading()
        {
            Area = new ObservableCollection<object>();
            Header = new ObservableCollection<string>();

            Country = new ObservableCollection<object>();
            State = new ObservableCollection<object>();

            //populate Countries
            Country.Add("UK");
            Country.Add("USA");
            Country.Add("India");
            Country.Add("UAE");
            Country.Add("Germany");

            //populate states
            State.Add("London");
            State.Add("Manchester");
            State.Add("Cambridge");
            State.Add("Edinburgh");
            State.Add("Glasgow");
            State.Add("Birmingham");

            Area.Add(Country);

            Area.Add(State);

            Header.Add("Country");

            Header.Add("State");

            SelectedArea = new ObservableCollection<object>() { "UK", "London" };
        }

        //Hooked when changes occured 
        public void RaisePropertyChanged(string name)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
    }

}











NA nabeel October 24, 2019 12:09 PM UTC

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="CascadingPicker.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:CascadingPicker"
    xmlns:syncfusion="clr-namespace:Syncfusion.SfPicker.XForms;assembly=Syncfusion.SfPicker.XForms">

    <ContentPage.BindingContext>
        <local:PickerCascading />
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <Grid HorizontalOptions="Center" VerticalOptions="Center">
            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Button
                    Clicked="Button_Clicked"
                    HeightRequest="40"
                    Text="Open Picker"
                    WidthRequest="200" />
                <Label Text="Bind here" />
            </StackLayout>
            <syncfusion:SfPicker
                x:Name="picker"
                ColumnHeaderText="{Binding Header}"
                HeaderText="Select your Area"
                HeightRequest="350"
                ItemsSource="{Binding Area}"
                PickerHeight="250"
                PickerMode="Dialog"
                PickerWidth="280"
                SelectedItem="{Binding SelectedArea}"
                SelectionChanged="picker_SelectionChanged"
                ShowColumnHeader="True"
                ShowFooter="True"
                WidthRequest="300" />
        </Grid>
    </ContentPage.Content>

</ContentPage>



NA nabeel October 24, 2019 12:10 PM UTC

I want to bind the values to <Label Text=""/>


HM Hemalatha Marikumar Syncfusion Team October 25, 2019 04:57 AM UTC

Hi Nabeel, 
  
Greetings from Syncfusion. 
  
We have analyzed your query. You can bind the picker selected item value to label text as like below code snippet. 
  
XAML: 
<ContentPage.BindingContext> 
     <local:PickerCascading /> 
</ContentPage.BindingContext> 
  
 
  
<Label Text="{Binding LabelText}" /> 
  
C#: 
   private void picker_SelectionChanged(object sender, Syncfusion.SfPicker.XForms.SelectionChangedEventArgs e) 
        { 
             var selectedItem = (picker.SelectedItem as ObservableCollection<object>); 
            var pickerViewModel = picker.BindingContext as PickerCascading; 
  
            string labelText = null; 
  
            for (int i = 0; i < selectedItem.Count; i++) 
            { 
                labelText += selectedItem[i] + "    "; 
            } 
  
            pickerViewModel.LabelText = labelText; 
  
Output: 
 
  
We have created sample based on your requirement, please find the sample from below location. 
  
  
Please let us know if you have any other queries. 
 
Regards, 
Hemalatha M. 



PR Padmini Ramamurthy Syncfusion Team October 25, 2019 10:52 AM UTC

From: Nabeel Mumtaz
Sent: Friday, October 25, 2019 5:40 AM
To: Syncfusion Support <support@syncfusion.com>
Subject: RE: Syncfusion support community forum 148549, Binding to label , has been updated. 
  
Hi Hemalatha M, 
Thank you so much for your kind effort. I really appreciate your hard work and quick reply!. 




HM Hemalatha Marikumar Syncfusion Team October 28, 2019 05:35 AM UTC

Hi Nabeel, 
 
Thanks for your update. 
 
We glad to hear that given solution works. 
 
Please let us know if you have any other query. 
 
Regards, 
Hemalatha M. 



NA nabeel October 28, 2019 01:46 PM UTC

            x:Name="picker"
            CancelButtonBackgroundColor="White"
            CancelButtonClicked="{Binding CancelPressed}"
            HeaderBackgroundColor="White"
            HeaderText="Select Frequency"
            HeaderTextColor="Black"
            HeightRequest="350"
            ItemsSource="{Binding Area}"
            OKButtonBackgroundColor="White"
            OkButtonClicked="{Binding OkPressed}"
            PickerHeight="250"
            PickerMode="Default"
            SelectedItem="{Binding SelectedArea}"
            SelectedItemFontAttribute="Bold"
            SelectedItemTextColor="Black"
            ShowFooter="True" />


How can i add functionality to "ok" & "cancel" button in my ViewModel? Because i want to keep my backfile empty.

And when "ok" or "cancel" is pressed, i want to to this ( await _navigationService.GoBackAsync(); ).

so how can i bind it to my view model ? i tried with command but its not working in viewmodel


SP Sakthivel Palaniyappan Syncfusion Team October 29, 2019 09:34 AM UTC

Hi Nabeel, 
Thanks for your update. 
We have analyzed your query. For ok and cancel button, we don't have command support. You can satisfy this requirement by implementing EventToCommandBehavior for SfPicker OkButtonClicked and CancelButtonClicked as per the snippet. 
XAML: 
          <syncfusion:SfPicker  
                ColumnHeaderText="{Binding Header}" 
                HeaderText="Select your Area" 
                HeightRequest="350" 
                ItemsSource="{Binding Area}" 
                PickerHeight="250" 
                PickerMode="Dialog" 
                PickerWidth="280"  
                SelectedItem="{Binding SelectedArea}"  
                WidthRequest="300" > 
 
                <syncfusion:SfPicker.Behaviors> 
 
                    <local:EventToCommandBehavior Command="{Binding OkButtonCommand}"  EventName="OkButtonClicked"/> 
                    <local:EventToCommandBehavior Command="{Binding CancelButtonCommand}"  EventName="CancelButtonClicked"/> 
 
                </syncfusion:SfPicker.Behaviors> 
 
            </syncfusion:SfPicker> 
 
We have created sample based on your requirement, please find the sample from below location. 
Regards, 
Sakthivel P.  


Loader.
Up arrow icon