Number of Appointments Per Day

[Chris Coetzee]

Hi Telerik Team,

Great work with your controls, they really are a pleasure to work with!

Currently I'm using the ScheduleView and looking for a way to customize the MonthView to display next to the number of each day an indication of the number of items in the system.  E.g. "12  (2 entries)" meaning there are already 2 entries scheduled for the 12th of the month (and those 2 are not necessarily contained in the bound AppointmentSource).

What would be the best approach to accomplish this?

Thanks in advance.
Etienne.

[Pana]

Hi,

You can create custom DataTemplate for the RadScheduleView's TimeRulerItems. In the month view add additional TextBlock and bind it using a two way binding to both the TimeRulerItem's DateTime in DataContext and RadScheduleView using RelativeSource binding. With a MultiConverter you should be able to convert somewhat source to a number of appointments.

<Window x:Class="RadScheduleView_WPF_DCTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Window.Resources>
        <telerik:TimeRulerItemTemplateSelector x:Key="TimeRulerItemTemplateSelector">
            <telerik:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.HorizontalDayMajorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.HorizontalDayMinorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.HorizontalWeekMajorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.HorizontalWeekMinorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" MinWidth="50" TextAlignment="Right" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.VerticalDayMajorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" MinWidth="50" TextAlignment="Right" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.VerticalDayMinorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" MinWidth="50" TextAlignment="Right" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.VerticalWeekMajorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" MinWidth="50" TextAlignment="Right" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.VerticalWeekMinorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
                <DataTemplate>
                    <TextBlock Margin="2 1" TextAlignment="Left" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.HorizontalTimelineGroupTemplate>
            <telerik:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" TextAlignment="Left" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.HorizontalTimelineMajorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" TextAlignment="Left" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.HorizontalTimelineMinorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
                <DataTemplate>
                    <TextBlock Margin="1 2" TextAlignment="Right" Text="{Binding FormattedValue}">
                                                <FrameworkElement.LayoutTransform>
                                                    <RotateTransform Angle="-90" />
                                                </FrameworkElement.LayoutTransform>
                    </TextBlock>
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.VerticalTimelineGroupTemplate>
            <telerik:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" MinWidth="50" TextAlignment="Right" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.VerticalTimelineMajorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
                <DataTemplate>
                    <TextBlock Margin="2" MinWidth="50" TextAlignment="Right" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.VerticalTimelineMinorItemTemplate>
            <telerik:TimeRulerItemTemplateSelector.MonthGroupTemplate>
                <DataTemplate>
                    <TextBlock Margin="6 2" Text="{Binding FormattedValue}" />
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.MonthGroupTemplate>
            <telerik:TimeRulerItemTemplateSelector.MonthItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Margin="6 2" Text="{Binding FormattedValue}" />
                        <TextBlock Text="{Binding DateTime}" />

                        <!--
                        Instead of Text="{Binding DateTime}"
                        Use a MultiBinding here that will have one binding to DateTime and second to the DataContext of the RadScheduleView
                        using a RelativeSource FindAncestor type RadScheduleView with Path DataContext
                        and in the MultiBinding's converter convert the date to a number using the sources of the view model
                        -->
                    </StackPanel>
                </DataTemplate>
            </telerik:TimeRulerItemTemplateSelector.MonthItemTemplate>
        </telerik:TimeRulerItemTemplateSelector>
    </Window.Resources>
    <Grid>
        <telerik:RadScheduleView TimeRulerItemTemplateSelector="{StaticResource TimeRulerItemTemplateSelector}">
            <telerik:RadScheduleView.AppointmentsSource>
                <telerik:ObservableAppointmentCollection />
            </telerik:RadScheduleView.AppointmentsSource>
            <telerik:RadScheduleView.ActiveViewDefinition>
                <telerik:MonthViewDefinition />
            </telerik:RadScheduleView.ActiveViewDefinition>
        </telerik:RadScheduleView>
    </Grid>
</Window>

Kind regards,
Pana
the Telerik team

[Chris Coetzee]

Hello Pana,

Thank you for making the effort to provide a clear example and explanation. It's highly appreciated.

Your solution works like a charm!

Thanks again,
Etienne.

[palak]

Hi Etienne and pana,

Can you please tell me about multiconverter , and how can i achieve this functionality. kindly share sample code to understand if feasible to you.

thanks & regards

[Chris Coetzee]

Hi palak,

The following worked well for me as per Pana's suggestion. 
I've created the MultiConverter to take the Date and an IDictionary containing the counts for each date, which it then converts to a formatted string indicating the number of items:

public class DateToDiaryEntryCountConverter : IMultiValueConverter
{
  public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
  {
    if (values.Length != 2)
      throw new TargetParameterCountException("DateToDiaryEntryConverter expects two parameters.");
    if (!(values[0] is DateTime) || !(values[1] is Dictionary<DateTime, int>))
      return String.Empty;

    var date = (DateTime)values[0];
    var counts = (IDictionary<DateTime, int>) values[1];
    var count = counts.ContainsKey(date) ? counts[date] : 0;
    return count > 0 ? String.Format("({0} item{1})", count, count > 1 ? "s" : "") : String.Empty;
  }

  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
  {
    throw new NotImplementedException();
  }
}

I then changed the MonthItemTemplate to add a TextBlock with Text bound to the converted value:

<telerik:TimeRulerItemTemplateSelector.MonthItemTemplate>
  <DataTemplate>
    <DataTemplate.Resources>
      <Converters:DateToDiaryEntryCountConverter x:Key="DateToDiaryEntryCount" />
    </DataTemplate.Resources>
    <StackPanel Orientation="Horizontal">
      <TextBlock Margin="6 2" Text="{Binding FormattedValue}" />
      <TextBlock Margin="6 2" Foreground="Gray">
        <TextBlock.Text>
          <MultiBinding Converter="{StaticResource DateToDiaryEntryCount}">
            <Binding Path="DateTime" />
            <Binding Path="DataContext.DiaryManager.UserDiaryEntryCounts"
                  RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type telerik:RadScheduleView}}" />
          </MultiBinding>
        </TextBlock.Text>
      </TextBlock>
    </StackPanel>
  </DataTemplate>
</telerik:TimeRulerItemTemplateSelector.MonthItemTemplate>

I hope this helps.
Etienne.

[John]

Is there anyway to get the resource Id, if we have multiple resources?

[palak]

Hi Etienne,

You helped me a lot by briefing out sample code. i am sure this would be perfectly working as per my requirement.

Many thanks.

palak

[palak]

Hi Etienne,

I am not able to find IMultiValueConverter in my class.I tried importing namespaces of scheduleview and others but seems , it required other assembly reference. Can you pls tell me which assembly i need to add/import into my project before instantiating IMultiValueConverter.

thanks  & regards
palak

[Pana]

Hello Palak,

Are you using Silverlight or WPF?

Kind regards,
Pana
the Telerik team

[palak]

Hi Pana,

I am using Silverlight. Did you find anything regarding my problem ?

thanks & regards
palak

[Valeri Hristov]

Silverlight does not have MultiBinding, hence the solution is not available for it.

Kind regards,
Valeri Hristov
the Telerik team

[palak]

Hi Valeri,

Thanks for information about multibinding not supported by silverlight.

anyways, is thr a way that i can achieve this functionality in silvelright too ? if any idea you got, you can share with us.

thanks & regards
palak

[Valeri Hristov]

Unfortunately, you cannot achieve this in Silverlight.

Regards,
Valeri Hristov
the Telerik team

[palak]

ok valeri.

thanks & regards,
palak