We’ve heard your demands for a time span picker and we’ve answered them. No more using two date time pickers to setup your time intervals. We are happy to introduce the brand new RadTimeSpanPicker.
Default Components
We provide five default time span part components so you can easily set up the time intervals you wish to pick: DayTimeSpanComponent, HourTimeSpanComponent, MinuteTimeSpanComponent, SecondTimeSpanComponent and MillisecondTimeSpanComponent.
Each default component has three properties that determine the values available for picking: Minimum, Maximum and Step. When these properties are set the component’s ItemsSource is populated with decimal values that start from the Minimum value and end with the Maximum value, each time incremented with the Step value.
For example, if we wish to be able to pick intervals of time by day, but no more than 20 days, we should just add a DayTimeSpanComponent to our RadTimeSpanPicker and set its Maximum property:
<telerik:RadTimeSpanPicker> <telerik:RadTimeSpanPicker.TimeSpanComponents> <telerik:DayTimeSpanComponentMaximum="20"/> </telerik:RadTimeSpanPicker.TimeSpanComponents></telerik:RadTimeSpanPicker>
Below you can find a sample definition of a RadTimeSpanPicker:
<telerik:RadTimeSpanPicker GenerateDefaultComponents="true" />When we set the GenerateDefaultComponents = true we set up our RadTimeSpanPicker to include three components: one HourTimeSpanComponent, one MinuteTimeSpanComponent and one SecondTimeSpanComponent with their default values for Minimum, Maximum and Step.
The five default components make the setup of a regular RadTimeSpanPicker very easy and fast.
Custom StepTimeSpanComponent
However, there might be more custom scenarios that require custom time span components. We’ve provided a way to handle that too.
For example, let’s say we want to be able to pick week intervals. To achieve this we would need to create a custom StepTimeSpanComponentand override its GetTicksForItem() method that returns a TimeSpan as ticks value corresponding to the passed item from the ItemsSource:
publicclassWeekTimeSpanComponent : StepTimeSpanComponentBase{ protectedoverrideFreezable CreateInstanceCore() { returnnewWeekTimeSpanComponent(); } publicoverridelongGetTicksFromItem(objectitem) { if(item != null) { var ticksForOneUnit = 7; decimalselectedItemDecimal; if(decimal.TryParse(item.ToString(), outselectedItemDecimal)) { returnTimeSpan.FromDays((double)(ticksForOneUnit * selectedItemDecimal)).Ticks; } } return0; }}Then just add it as component for our RadTimeSpanPicker:
<telerik:RadTimeSpanPicker> <telerik:RadTimeSpanPicker.TimeSpanComponents> <local:WeekTimeSpanComponentHeader="Weeks"Minimum="1"Maximum="4"Step="1.5"/> </telerik:RadTimeSpanPicker.TimeSpanComponents></telerik:RadTimeSpanPicker>
The default components as well as the custom WeekTimeSpanComponentrely on their Minimum, Maximum and Step properties to generate their ItemsSource.
Custom TimeSpanComponentBase
However, there might be scenarios when we would like to set the ItemsSource of our custom component ourselves.
For example, if we wish to create a composite component that accepts TimeSpan values that can be any size of time interval: 1 hour, 5 days, 1 week, etc. We can achieve that by creating a custom TimeSpanComponentBase:
publicenumTimePart{ Hours, Days, Weeks}publicclassMyDataObject{ publicdoubleValue { get; set; } publicTimePart TimePart { get; set; } publicoverridestringToString() { returnthis.Value + " "+ this.TimePart.ToString(); }}publicclassCompositeTimeSpanComponent : TimeSpanComponentBase{ publicoverridelongGetTicksFromItem(objectitem) { var dobj = (MyDataObject)item; if(dobj != null) { switch(dobj.TimePart) { caseTimePart.Weeks: var ticksForOneUnit = 7; returnTimeSpan.FromDays(ticksForOneUnit * dobj.Value).Ticks; caseTimePart.Days: returnTimeSpan.FromDays(dobj.Value).Ticks; caseTimePart.Hours: default: returnTimeSpan.FromHours(dobj.Value).Ticks; } } return0; } protectedoverrideSystem.Windows.Freezable CreateInstanceCore() { returnnewCompositeTimeSpanComponent(); }} publicList<MyDataObject> CompositeItemsSource{ get { returnnewList<MyDataObject>() { newMyDataObject(){Value = 0.5, TimePart = TimePart.Weeks}, newMyDataObject(){Value = 1, TimePart = TimePart.Weeks}, newMyDataObject(){Value = 1.5, TimePart = TimePart.Weeks}, newMyDataObject(){Value = 2, TimePart = TimePart.Weeks}, newMyDataObject(){Value = 1, TimePart = TimePart.Days}, newMyDataObject(){Value = 5, TimePart = TimePart.Days}, newMyDataObject(){Value = 7, TimePart = TimePart.Days}, newMyDataObject(){Value = 1, TimePart = TimePart.Hours}, newMyDataObject(){Value = 8, TimePart = TimePart.Hours}, newMyDataObject(){Value = 12, TimePart = TimePart.Hours} }; }}Then just add it as component for our RadTimeSpanPicker:
<telerik:RadTimeSpanPicker> <telerik:RadTimeSpanPicker.TimeSpanComponents> <local:CompositeTimeSpanComponentItemsSource="{Binding CompositeItemsSource}"Header="Choose interval"/> </telerik:RadTimeSpanPicker.TimeSpanComponents></telerik:RadTimeSpanPicker>
For more details about RadTimeSpanPicker you can visit our online documentation and take a look at our demos.
Go ahead and try it out, create your custom components and let us know what you think about it.
