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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Binding to label

Thread ID:

Created:

Updated:

Platform:

Replies:

148549 Oct 24,2019 12:01 PM UTC Oct 29,2019 09:34 AM UTC Xamarin.Forms 8
loading
Tags: SfPicker
nabeel
Asked On October 24, 2019 12:01 PM UTC

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.



nabeel
Replied On 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));
        }
    }

}










nabeel
Replied On 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>


nabeel
Replied On October 24, 2019 12:10 PM UTC

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

Hemalatha Marikumar [Syncfusion]
Replied On 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. 


Padmini Ramamurthy [Syncfusion]
Replied On 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!. 



Hemalatha Marikumar [Syncfusion]
Replied On 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. 


nabeel
Replied On 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

Sakthivel Palaniyappan [Syncfusion]
Replied On 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.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon