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.
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!
Evan Hutnick works as a Developer Evangelist for Telerik specializing in Silverlight and WPF in addition to being a Microsoft MVP for Silverlight. After years as a development enthusiast in .Net technologies, he has been able to excel in XAML development helping to provide samples and expertise in these cutting edge technologies. You can find him on Twitter @EvanHutnick.