How to use ScheduleViewDataTemplateSelector dynamically

7 posts, 0 answers
  1. Hardik
    Hardik avatar
    61 posts
    Member since:
    Jun 2011

    Posted 28 Mar 2013 Link to this post

    Hi, I am using this class for showing appointment with different styles.
    I want the things dynamically. 

    I have created data template

    <DataTemplate x:Key="FlexibleFinishedRecurrentAppointmentTemplate">
          <Border x:Name="XamlBorder"
                        BorderBrush="Black"
                        BorderThickness="0.5"
                        Margin="-2">
            <Border.Background>
              <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                <GradientStop Color="#FF6F94C0"
                                      Offset="0.162" />
                <GradientStop Color="#FFBCD0E8"
                                      Offset="0.892" />
              </LinearGradientBrush>
            </Border.Background>
            <Grid>
              <ToolTipService.ToolTip>
                <StackPanel Orientation="Vertical"
                                        MaxWidth="225"
                                        MaxHeight="225">
                  <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Start, StringFormat=\{0:HH:mm\}}" />
                    <TextBlock Text="-" />
                    <TextBlock Text="{Binding End, StringFormat=\{0:HH:mm\}}" />
                  </StackPanel>
                  <TextBlock Text="{Binding Subject}"
                                           TextWrapping="Wrap" />
                </StackPanel>
              </ToolTipService.ToolTip>
              <StackPanel Orientation="Horizontal"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Bottom">
                <maestroBaseControls:XamlIconMT x:Name="XamlFlexibleImage" Foreground="{StaticResource ColorBrush5}"
                               Margin="0,0,1,4"
                               HorizontalAlignment="Right"
                               VerticalAlignment="Bottom"
                               Width="16"
                               Height="16"
                               XamlIconType="{Binding Text, Converter={StaticResource XamlImageSourceConverter}, ElementName=XamlFlexible}" />
                <TextBlock x:Name="XamlFlexible"
                                   Text="Flexible"
                                   Width="1000"
                                   Visibility="Collapsed" />
                <maestroBaseControls:XamlIconMT x:Name="Xamlrecurrence" Foreground="{StaticResource ColorBrush5}"
                                   Margin="0,0,4,4"
                                   HorizontalAlignment="Right"
                                   VerticalAlignment="Bottom"
                                   Width="16"
                                   Height="16"
                                   XamlIconType="{Binding Text, Converter={StaticResource XamlImageSourceConverter}, ElementName=XamlRecurrence}" />
                <TextBlock x:Name="XamlRecurrence"
                                   Text="Recurrence"
                                   Width="1000"
                                   Visibility="Collapsed" />

              </StackPanel>

              <TextBlock x:Name="XamlSubjectTextBlock"
                                   Margin="7 0 18 0"
                                   Width="{Binding Width, ElementName=XamlBorder}"
                                   VerticalAlignment="Top"
                                   HorizontalAlignment="Left"
                                   TextTrimming="WordEllipsis"
                                   Text="{Binding Subject}"
                                   Foreground="Black"
                                   TextWrapping="Wrap" />
            </Grid>
          </Border>
        </DataTemplate>

    So many templates are there each template have same content except the things in Bold area. Image will be different for different template. 

    ---------------------------------------------------------------------------------------------------------------------------------------------------
    TemplateSelector static resource.

    <localScheduler:ReservationTemplateSelector x:Key="XamlItemTemplateSelector"
                                                        FlexibleFinishedRecurrentAppointmentTemplate="{StaticResource FlexibleFinishedRecurrentAppointmentTemplate}"
    -----------------------------------------------------------------------------------------------------------------------------------------------------------------

    -----------------------------------------------------------------------------------------------------------------------------------------------------------------
    Binding in XAML 
    <telerik:RadScheduleView x:Name="XamlRadScheduleView"
                                                AppointmentItemContentTemplateSelector="{StaticResource XamlItemTemplateSelector}"
    />
    ------------------------------------------------------------------------------------------------------------------------------------------------------------------

    In TemplateSelector class I am using 

    public override DataTemplate SelectTemplate(object item, DependencyObject container, ViewDefinitionBase activeViewDeifinition)
     {
      {if (ocu.Appointment != null)
          {
            if (actualEndTime != null)
            {
              return this.FlexibleFinishedRecurrentAppointmentTemplate;
            }
    ..........
    .......
    .........
    ......... (multiple conditions are there)

    Now I have a problem with this structure. If I want to add one new template then I have to make changes in each and every template. As Template change is something like this
    T1 - image1
    T2 - image2
    T3 - image1 image2
    T4 - without image

    So if I want to add one more template with Image3 then changes into templates are like this
    T1 - image1
    T2 - image2
    T3 - image3
    T4 - image1 and image2
    T5 - image2 and image3
    T6 - image1 and image3
    T7 - Image1 and Image2 and Image3
    T8 - without image.

    So it goes in the n^2 manner, Is there any possibility that In XAML I use only one template and make changes into template run time one the basis of different condition.?


    Thanks
    h@rdik pancholi
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 01 Apr 2013 Link to this post

    Hello Hardik,

    In order to create DataTemplates dynamically, you should first build the XAML string that describes it and then pass the string to XamlReader.Load, here is a simple example in the ScheduleViewDataTemplateSelector SelectTemplate method:

    public override DataTemplate SelectTemplate(object item, DependencyObject container, ViewDefinitionBase activeViewDefinition)
    {
        var newTemplate = (DataTemplate) XamlReader.Load(@"<DataTemplate
            <TextBlock Foreground='Red' Text='{Binding Subject}' TextWrapping='Wrap' TextTrimming='WordEllipsis' />
            </DataTemplate>");
        return newTemplate;
    }      

    You can use StringBuilder to build the different templates, here you can find an example.

    Hope this helps.

    Kind regards,
    Yana
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Hardik
    Hardik avatar
    61 posts
    Member since:
    Jun 2011

    Posted 03 Apr 2013 Link to this post

    HI thanks Yana.

    Actually I am facing problem here,

    For example,
     I have

    var newTemplate = (DataTemplate) XamlReader.Load(@"<DataTemplate
            xmlns='http://schemas.microsoft.com/client/2007' 
            xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
            <TextBlock Foreground='Red' Text='{Binding Subject}' TextWrapping='Wrap' TextTrimming='WordEllipsis' />
            <TextBlock Foreground='Black' Text='{Binding Subject}' TextWrapping='Wrap' TextTrimming='WordEllipsis' />
            </DataTemplate>");
        return newTemplate;

    Now I want to change the TextBlock  "Foreground" on basis of condition. How can I do that?

    I tried this one.

     DataTemplate newTemplate = (DataTemplate)XamlReader.Load(@"<DataTemplate
            xmlns='http://schemas.microsoft.com/client/2007' 
            xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
            <TextBlock x:Name='Test' Foreground='Red' Text='{Binding Subject}' TextWrapping='Wrap' TextTrimming='WordEllipsis' />
      <TextBlock  x:Name='ABC' Foreground='Black' Text='{Binding Subject}' TextWrapping='Wrap' TextTrimming='WordEllipsis' />
            </DataTemplate>");

          FrameworkElement element = newTemplate.LoadContent() as FrameworkElement;

          if (element.FindName("Test") != null)
          {
            ((TextBlock)element).Foreground= new SolidColorBrush(Colors.Blue);;
          }

          return newTemplate ;

    But this is not working.

    Thanks
    h@rdik pancholi

  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 09 Apr 2013 Link to this post

    Hi Hardik,

    You could try it like this:

    var color = "Blue";
     
    var newTemplate = (DataTemplate) XamlReader.Load(@"<DataTemplate
        <TextBlock Foreground='" + color + @"' Text='{Binding Subject}' TextWrapping='Wrap' TextTrimming='WordEllipsis' />
        </DataTemplate>");
    return newTemplate;


    All the best,
    Yana
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Hardik
    Hardik avatar
    61 posts
    Member since:
    Jun 2011

    Posted 09 Apr 2013 Link to this post

    Thanks Yana,

    This is working.

    But I am thinking other solution for my case.

    As I had defined in first thread when multiple templates will be there it will cause problem on development.
     See my case is like this, I have 2 images and I need templates with combination of those images. So I will have 2^2 = 4 templates.

    Template1 - Image1
    Template2 - Image2
    Template3 - Image1 and Image2
    Template4 - No image

    This development is done. Now let's assume my requirement gets changed and I need one more image. So now I will have 2^3 = 8 templates.

    Template1 - Image1
    Template2 - Image2
    Template3 - Image3
    Template4 - Image1 and Image2
    Template5 - Image2 and Image3
    Template6 - Image1 and Image3
    Template7 - Image1 and Image2 and Image3
    Template8 - No image

    This work is very tedious as number of images increased. Here I not only images but other controls might be there. Here Appointments with different color also there.

    So what I thought is I will create on common Template in which my all controls will be there, and as per my condition I want to hide control from this common template. With this image color of control also different. 

    Like
    Tempalate1 - Image1 and red color
    Tempalate2 - Image1 and blue color

    etc.......


    What can be the easiest way to make this dynamic? So when any change into template I don't have to do any complex coding.

    Thanks in advance
    H@rdik Pancholi




  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 11 Apr 2013 Link to this post

    Hi Hardik,

    Yes, you could have one template with all the images and bind their Visibility property, so that it is switched according to the appointment's properties ( you could use a ValueConverter).

    All the best,
    Yana
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Hardik
    Hardik avatar
    61 posts
    Member since:
    Jun 2011

    Posted 18 Apr 2013 Link to this post

    Hi yana,

    Its working for me.

    Thanks
    H@rdik Pancholi
Back to Top
DevCraft banner