DayTemplateSelector and MVVM Binding

[Bavo]

Hi

I noticed you use a EventDayTemplateSelector in the Calender Demo.
How can I alter this Selector, so I can Bind my own collection to it using MVVM?
I get the following exception:

Object of type 'System.Windows.Data.Binding' cannot be converted to type 'System.Collections.ObjectModel.ObservableCollection`1[RiaServicesPinYourDoctorLibrary.Web.Appointment]'.

My code:

XAML Page

<UserControl.Resources>
    <localControls:EventDayTemplateSelector x:Key="EventDayTemplateSelector" Appointments="{Binding DataContext.Appointments, ElementName=LayoutRoot}">
        <localControls:EventDayTemplateSelector.DefaultTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Text}" />
            </DataTemplate>
        </localControls:EventDayTemplateSelector.DefaultTemplate>
        <localControls:EventDayTemplateSelector.EventTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Text}" Foreground="#FF000000" FontWeight="Bold" />
            </DataTemplate>
        </localControls:EventDayTemplateSelector.EventTemplate>
    </localControls:EventDayTemplateSelector>
</UserControl.Resources>

<telerik:RadCalendar DayTemplateSelector="{StaticResource EventDayTemplateSelector}" SelectionMode="Extended" IsTodayHighlighted="true" Margin="0,0,0,10" BorderThickness="0" Style="{StaticResource RadCalendarStyle}" />

ViewModel:

public ObservableCollection<Appointment> Appointments
{
    get { return _appointments; }
    set
    {
        if(_appointments != value)
        {
            _appointments = value;
            RaisePropertyChanged(vm=>vm.Appointments);
        }
    }
}

EventDayTemplateSelector:

public class EventDayTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        CalendarButtonContent content = item as CalendarButtonContent;
        if (content == null)
            return DefaultTemplate;

        //Some days are special.
        return this.Appointments.Any(e => e.StartDate == content.Date) ? this.EventTemplate : DefaultTemplate;
    }

    public ObservableCollection<Appointment> Appointments { get; set; }

    public DataTemplate DefaultTemplate { get; set; }

    public DataTemplate EventTemplate { get; set; }
}

[Kaloyan]

Hi Bavo,

You can't achieve binding to a EventDayTemplateSelector as it is not a DependencyObject itself. Did you try to set the binding through the CollectionViewSource object. Follow the code bellow:

<CollectionViewSource x:Key="EventsView" x:Name="EventsList" Filter="EventsList_Filter"
            Source="{Binding Source={StaticResource EventsList}}" />
    <local:EventDayTemplateSelector x:Key="EventDayTemplateSelector"
            EventsCollection="{StaticResource EventsList}">
        <local:EventDayTemplateSelector.DefaultTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Text}" />
            </DataTemplate>
        </local:EventDayTemplateSelector.DefaultTemplate>
        <local:EventDayTemplateSelector.EventTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Text}" Foreground="#FF000000" FontWeight="Bold" />
            </DataTemplate>
        </local:EventDayTemplateSelector.EventTemplate>
    </local:EventDayTemplateSelector>

Greetings,
Kaloyan
the Telerik team

[Bavo]

I think I don't understand.
You set an x:Key property and an x:Name property. Those can't be used together, so my compiler says.

You set the x:Name property to EventsList and your CollectionViewSource Source property binds to EventsList. You are binding to yourself?

I assume the purpose of your example is to bind the Source of the CollectionViewSource to my ViewModel property and use the CollectionViewSource in my EventDayTemplateSelector?

This doesn't seem to work at all. The EventDayTemplateSelector expects an EventsCollection object, not a CollectionViewSource object. Using a Converter doesn't work either.

Let me explain my problem again. Maybe I haven't been clear enough.
In my opinion it could not be simpler...

I have a RadCalendar and I have a property Appointments in my ViewModel.
I need all the dates set Bold in the RadCalendar for every Appointment StartDate.

In another RadCalender I would like to Disable the dates that don't have Appointments.

I can create a Converter to create whatever List the RadCalendar needs. Just tell me how to Bind it to the Control.

Is this so hard?
I don't want the Demo example again using the StaticResource EventsList. Just give me an MVVM example.

[Kaloyan]

Hello Bavo,

Now I am getting your requirements. A quick solution is to expose you collection of appointments as a static one so it will be accessible from the DataTemplateSelector class. As for now there is now valid way to set binding to the DataTemplateSelector class. Let us know if this is not working for your case.

Sincerely yours,
 Kaloyan 
the Telerik team

[Bavo]

Thank you for your answer.

Unfortunately this is not a solution for us, since the application refreshes the Appointments every 10 seconds.
The calendar should update the Bold calendardates whenever there are new Appointments made.

You are saying that Binding is not possible, so I can't achieve this behavior with the RadCalendar?
I noticed in the forum there are other people requesting this feature.

The same goes for the DatePicker. There I would want to bind to the Disabled dates, so you can't create a new appointment on a day where it's not possible to create appointments.
I assume this is the same issue?

Are there plans to make this bindable, so I can visualize the appointmens in the RadCalendar?
Maybe all you need to do is make the DayTemplateSelector a DependencyObject?

Kind Regards
Bavo

[Miroslav Nedyalkov]

Hi Bavo,

Making the Selector DependencyObject doesn't make much sense as it is used only the first time an item is rendered, so binding one of its properties will not force the control to refresh the templates of all of its children.

What I would suggest you is to pass your ViewModel or collection to the DayTemplate of the calendar and use bindings inside the DataTemplate to achieve the searched effect. I know this solution is not straight-forward, but the Style/Template selectors are designed for the case you have.

All the best,
Miroslav Nedyalkov
the Telerik team

[Forest]

Hi Miroslav

Please can you show us how to "pass the collection to the DayTemplate of the calendar and use bindings inside the DataTemplate".
Can you complete this please ?(in my case it's a styleSelector) :

<telerik:RadCalendar x:Name="Mycalendar" DayButtonStyleSelector="{StaticResource StyleSelector}">
<UserControl.Resources>
  <local:CalendarButtonStyleSelector x:Key="StyleSelector">
   </local:CalendarButtonStyleSelector>
</UserControl.Resources>

Thank you very much
Mathieu

[Forest]

a

[Kaloyan]

Hi Forest,

Please find the attached solution. There is a SyleSelecor class that exposes a custom collection of entities. There is also an attached collection changed event handler to which you can hook up the event and listen when it appears. Let us know if you have any further questions.

Regards,
Kaloyan
the Telerik team

[Forest]

Hi

Thank you for giving this project.
But when i add a new day into the eventsCollection, the calendar does't refresh itself.

Mathieu

[Kaloyan]

Hello Forest,

There is no method that can be used for refreshing the calendar. We will provide an update of our controls that can be used for such cases later on this or next week . All you have to do is change the selector class with the appropriate one.

All the best,
Kaloyan
the Telerik team

[Forest]

Hello

Do the RadControls_for_Silverlight_4_2010_3_1213_TRIAL_hotfix.zip fix this problem ?

Thank you.

Mathieu

[Kaloyan]

Hello Forest,

You can find the fix in this build. The calendar will change the template/style when a new template/style selector is presented. Let us know if you need any further information.

Best wishes,
Kaloyan
the Telerik team

[Pierre Thomasius]

Hi,

Is there a way to use this with the RadDatePicker? It has the DayButtonStyleSelector property but when I apply it following the sample nothing happens. Works fine on a RadCalendar.

Thanks
Pierre

[Miroslav Nedyalkov]

Hello Pierre,

This property is no longer supported by the RadDatePicker control. If you want to change this you need to change its ControlTemplate and change the property of the Calendar control.

Hope this information is helpful.

Kind regards,
Miroslav Nedyalkov
the Telerik team

[Pierre Thomasius]

Hi,

Yeah I saw it was removed in the latest version and have managed to achieve what we need using  a CustomTemplateSelector.

Thanks
Pierre