The last time we all got together we were discussing some of the options available to us while utilizing RadGridView. Utilizing built-in functionality we could easily add pre-defined grouping to our grid as well as set custom cell styles and rules for what template will display, all without leaving our Xaml. This week, we’re going to look at another major control that is being utilized in the CRM demo to help keep track of activities – RadScheduleView. This control is used across the modules of the application for activities display, plus due to the architecture of the control we’ve been able to do some really cool things with the dialog window that you’re used to seeing.
ScheduleView Defined
To get us started we will dive directly into some code and then start dissecting to see what our team has done. The code below was taken directly out of TFS about five minutes ago, so it is still work-in-progress and will possibly change before release, but definitely helps to demonstrate some of the capabilities we’re already using within RadScheduleView (and nicely sets me up for the next subsection as well :D ):
<telerik:RadScheduleView AppointmentsSource="{Binding SelectedCompanyAppointments}" x:Name="scheduleView"
HorizontalScrollBarVisibility="Disabled" MinTimeRulerExtent="300"
AppointmentEdited="scheduleView_AppointmentEdited" AppointmentCreated="scheduleView_AppointmentCreated"
CategoriesSource="{StaticResource DefaultCategoryCollection}">
<telerik:RadScheduleView.SchedulerDialogHostFactory>
<helpers:ScheduleViewCustomDialogHostFactory DialogHost="{Binding ElementName=dialog}" />
</telerik:RadScheduleView.SchedulerDialogHostFactory>
<telerik:RadScheduleView.ViewDefinitions>
<telerik:WeekViewDefinition Title="WEEK" EnableSmallAppointmentRendering="True" FirstDayOfWeek="Monday"
DayStartTime="09:00:00" DayEndTime="19:00:00" VisibleDays="5"
MajorTickLength="1h" MinorTickLength="1h" StretchGroupHeaders="True"
TimerulerMajorTickStringFormat="{}{0:h tt}"
GroupHeaderDateStringFormat="{}{0:dd}">
</telerik:WeekViewDefinition>
<telerik:DayViewDefinition Title="DAY" EnableSmallAppointmentRendering="True"
FirstDayOfWeek="Monday" DayStartTime="09:00:00" DayEndTime="19:00:00"
MajorTickLength="1h" MinorTickLength="1h" StretchGroupHeaders="True"
TimerulerMajorTickStringFormat="{}{0:h tt}"
GroupHeaderDateStringFormat="{}{0:dd}"/>
</telerik:RadScheduleView.ViewDefinitions>
</telerik:RadScheduleView>
It may look like there is a lot going on here, so we’ll step through in bullet fashion to better describe the functionality listed. We’ll also be skipping minor properties (I think we all know what HorizontalScrollBarVisibility does already) to save more room for the interesting stuff.
- Appointments Source – This is the ItemsSource of RadScheduleView. Since we rely on an IAppointment/AppointmentBase object, we can’t just go using a regular ItemsSource because that will not guarantee the specific fields RSV requires to function.
- Categories Source – For appointments we can add categories that help define how an appointment will display. This is normally a list of colors, but you can make it anything you want very easily by setting this property.
- Dialog Host Factory – Next section, trust me. :)
- View Definitions – RadScheduleView relies on the developer to set which views will be available to the end user, in our case we are providing only the Week and Day definitions as anything longer than those timespans will be tough to consume in the application. Without touching a line of code, we can easily set properties like the DayStartTime and DayEndTime (define what timespan is displayed), FirstDayOfWeek (does your work week start with Monday or Sunday?), as well as more visual properties like TickLength and TickStringFormat. Again, all of this is easily defined in Xaml and enables someone to customize the look of RadScheduleView to a large degree without once stepping into templates or code-behind.
If you’re curious how this looks in action, per our new exciting darker theme this is a CRM RadScheduleView:
Extensible Dialog Window
Everyone who has worked with RadScheduleView or the previous RadScheduler is probably familiar with the EditAppointmentDialog window:
Any time you’re working with custom appointments or need to add or remove functionality based on appointments you have probably extracted the template and went editing crazy to make it match your new appointment. Shouldn’t there be a better way? Well, our team definitely thought so.
With RadScheduleView you can define a custom appointment dialog window that handles the functionality you require for setting appointments (or in our CRM speak, activities). Here’s a look at what this new dialog window looks like in the running application:
How did we do it? About 158 lines of unformatted Xaml has allowed us to create a ScheduleViewCustomDialogHost that displays a bunch of custom controls as well as RadControls for picking the different fields we require. The custom Date and Time controls are all our demo team, but other items like RadComboBox, RadUniformGrid, and RadRadioButton all make their way into the mix. On the code side, here’s another straight-from-TFS, work-in-progress look at a custom ScheduleView dialog window and some of the code needed to make it work -
DialogHostFactory:
public class ScheduleViewCustomDialogHostFactory : DependencyObject, IScheduleViewDialogHostFactory
{
public IScheduleViewDialogHost DialogHost
{
get { return (IScheduleViewDialogHost)GetValue(DialogHostProperty); }
set { SetValue(DialogHostProperty, value); }
}
public static readonly DependencyProperty DialogHostProperty =
DependencyProperty.Register("DialogHost", typeof(IScheduleViewDialogHost), typeof(ScheduleViewCustomDialogHostFactory), null);
public IScheduleViewDialogHost CreateNew(ScheduleViewBase scheduleView, DialogType dialogType)
{
var dialogHost = this.DialogHost;
dialogHost.ScheduleView = scheduleView;
return dialogHost;
}
}
DialogHost:
public class ScheduleViewCustomDialogHost : ContentControl, IScheduleViewDialogHost
{
public ScheduleViewCustomDialogHost()
{
}
public void Close()
{
this.ScheduleView.Cancel();
this.Visibility = Visibility.Collapsed;
if (this.Closed != null)
{
this.Closed(this, new WindowClosedEventArgs());
}
}
public void Save()
{
this.ScheduleView.Commit();
this.Visibility = Visibility.Collapsed;
}
public event EventHandler<WindowClosedEventArgs> Closed;
public ScheduleViewBase ScheduleView { get;set; }
public void Show(bool isModal)
{
this.Visibility = System.Windows.Visibility.Visible;
}
}
Utilizing built-in RadScheduleView commands we can access things like Cancel and Commit, while our custom host tackles items like Close, Save, and Show courtesy of the DialogHost interface. End result is a complete replacement with custom functionality and no need to edit the EditAppointmentDialog – we actually just have it commented out in the custom style. :)
Wrapping-Up
I hope the rest of you are as impressed with the work our team has done on RadScheduleView and how the intelligent architecture of the control allowed us to both customize how views would be displayed via Xaml as well as how we could completely replace the EditAppointmentDialog with a custom implementation, all while maintaining the functionality you know and love from ScheduleView. Stay tuned for the next two weeks as we start to close the loop on this project and move towards our Q3 release.
Stay tuned!
@EvanHutnick
