RadRangeSelector in Telerik UI for WinForms can not make Two-Way binding.

2 posts, 1 answers
  1. Johnny
    Johnny avatar
    15 posts
    Member since:
    Dec 2017

    Posted 30 Dec 2020 Link to this post

    I found this thread https://www.telerik.com/forums/binding-to-rangestart-and-rangeend-of-radrangeselector that RadRangeSelector's StartRange and EndRange has been changed when data object changed.

    Data object can not change when I change RadRangeSelector's StartRange and EndRange by UI.

    Followed as my sample code:

    public partial class Form2 : Form
    {
        private readonly RangeDataObject dataObject = new RangeDataObject { StartRange = 0, EndRange = 100 };
     
        public Form2()
        {
            this.InitializeComponent();
     
            this.radRangeSelector1.DataBindings.Add(
                new Binding("StartRange", this.dataObject, "StartRange", false, DataSourceUpdateMode.OnPropertyChanged));
            this.radRangeSelector1.DataBindings.Add(
                new Binding("EndRange", this.dataObject, "EndRange", false, DataSourceUpdateMode.OnPropertyChanged));
        }
     
        private void Form2_Load(object sender, EventArgs e)
        {
        }
    }
     
    public class RangeDataObject : INotifyPropertyChanged
    {
        private float startRange;
     
        private float endRange;
     
        public event PropertyChangedEventHandler PropertyChanged;
     
        public float StartRange
        {
            get { return this.startRange; }
            set
            {
                if (this.startRange != value)
                {
                    this.startRange = value;
                    this.OnPropertyChanged("StartRange");
                }
            }
        }
     
        public float EndRange
        {
            get { return this.endRange; }
            set
            {
                if (this.endRange != value)
                {
                    this.endRange = value;
                    this.OnPropertyChanged("EndRange");
                }
            }
        }
     
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
  2. Answer
    Peter
    Admin
    Peter avatar
    1160 posts

    Posted 04 Jan Link to this post

    Hello, Johnny,

    As my colleague, Hristo mentioned the Winforms simple data binding mechanism relies on Changed events that must be raised from your data object and from our properties StartRange and EndRange. In our realization, these properties do not fire this event. They fire ThumbLeftValueChanged and ThumbRightValueChanged events аnd they cannot be used from the simple data binding mechanism.

    I would like to recommend creating a custom simple DataBindings helper, instead of this.radRangeSelector1.DataBindings.Add:

        public class RangeSelectorDataBindingHelper
        {
            private RangeDataObject rangeDataObject;
            private RadRangeSelector rangeSelector;
            public RangeSelectorDataBindingHelper(RangeDataObject rangeDataObject, RadRangeSelector rangeSelector)
            {
                this.rangeDataObject = rangeDataObject;
                this.rangeSelector = rangeSelector;
    
                this.rangeSelector.ThumbRightValueChanged += RangeSelector_ThumbRightValueChanged;
                this.rangeSelector.ThumbLeftValueChanged += RangeSelector_ThumbLeftValueChanged;
                this.rangeDataObject.PropertyChanged += RangeDataObject_PropertyChanged;
            }
    
            private void RangeDataObject_PropertyChanged(object sender, PropertyChangedEventArgs e)
            {
                switch(e.PropertyName)
                {
                    case "StartRange":
                        this.rangeSelector.StartRange = this.rangeDataObject.StartRange;
                        break;
                    case "EndRange":
                        this.rangeSelector.EndRange = this.rangeDataObject.EndRange;
                        break;
                }
            }
    
            private void RangeSelector_ThumbLeftValueChanged(object sender, EventArgs e)
            {
                rangeDataObject.StartRange = rangeSelector.StartRange;
            }
    
            private void RangeSelector_ThumbRightValueChanged(object sender, EventArgs e)
            {
                rangeDataObject.EndRange = rangeSelector.EndRange;
            }
        }

    Please, refer to the attached project that demonstrates this idea.

    Regards,
    Peter
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top