Selecting Range

3 Sep 2020 / 1 minute to read

The left and right thumb of SfDateTimeRangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range.

Following code example shows how to configure the selected range using ViewRangeStart and ViewRangeEnd properties of SfDateTimeRangeNavigator.

  • c#
  • SfDateTimeRangeNavigator sfRangeNavigator = new SfDateTimeRangeNavigator(); 
    sfRangeNavigator.ViewRangeStart = new GregorianCalendar(2015, 4, 1).Time;
    sfRangeNavigator.ViewRangeEnd = new GregorianCalendar(2016, 9, 1).Time;

    Range selection in Xamarin.Android DateTimeRangeNavigator

    Overlay Color

    The OverlayColor property of SfDateTimeRangeNavigator is used to customize the color of unselected area in date-time range navigator.

    Deferred Update

    RangeChanged event will be fired whenever you drag the thumbs. If you are doing some long running tasks in this event handler, then dragging the thumbs will not be smooth. You can delay this event by enabling DeferredUpdateEnabled property. If this property is set to true, the RangeChanged event will get fired only when you stop dragging or if the thumb is held for more than 500 milliseconds. If it is false, the range will be updated for every movement of the thumb. However, It is true by default.

    The delay of update is 500 milliseconds by default. However, it can be changed using DeferredUpdateDelay property of SfDateTimeRangeNavigator.

  • c#
  • SfDateTimeRangeNavigator sfRangeNavigator = new SfDateTimeRangeNavigator(); 
    sfRangeNavigator.DeferredUpdateEnabled = false;
    sfRangeNavigator.DeferredUpdateDelay = 600;

    RangeChanged Event

    RangeChanged event is triggered when the selected range of the SfDateTimeRangeNavigator is changed. The argument contains the following information.

    • ViewRangeStart – used to get the start date of the selected range.
    • ViewRangeEnd – used to get the end date of the selected range.