RadJumpList Header Binding Issue

[MAQ MA]

Hi,
I am using Caliburn Micro MVVM framework in my project. The project also uses the RadJumpList control in it. I have taken as reference help from the Telerik Tasks example. My problem is that how can I bind the group header in MVVM style. In the tasks example everything is done by code behind. Though I am able to bind the ItemsSource via MVVM style. But the headers are not coming. I added the following code in the constructor of view

GenericGroupDescriptor<Ringtone, string> groupByCategory = new GenericGroupDescriptor<Ringtone, string>(rt => rt.CategoryName);
this.NewRingtones.GroupDescriptors.Add(groupByCategory);

and my xaml code looks something like this

<UserControl.Resources>
        <DataTemplate x:Key="RtItemTemplate">
            <HyperlinkButton Style="{StaticResource StretchingContentControl}" cal:Message.Attach="LoadRingtone($dataContext)">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <TextBlock HorizontalAlignment="Left" Margin="12" Grid.Row="0" TextWrapping="Wrap" Text="{Binding Name}" VerticalAlignment="Bottom" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                    <TextBlock HorizontalAlignment="Left" Margin="12" Grid.Row="1" TextWrapping="Wrap" Text="{Binding Film}" VerticalAlignment="Bottom" Foreground="{StaticResource PhoneAccentBrush}"/>
                    <TextBlock HorizontalAlignment="Left" Margin="12" Grid.Row="2" TextWrapping="Wrap"  Text="{Binding Description}" VerticalAlignment="Bottom" FontFamily="{StaticResource PhoneFontFamilyNormal}"/>
                </Grid>
                </HyperlinkButton>

        </DataTemplate>
        <DataTemplate x:Key="JumpListGroupHeaderTemplate">
            <Grid>
                <Image Stretch="None" Source="../Assets/Images/JumpListHeader.png"/>
                <TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding CategoryName}" FontWeight="Bold" Foreground="Red"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <telerikDataControls:RadJumpList CacheMode="BitmapCache" GroupHeaderTemplate="{StaticResource JumpListGroupHeaderTemplate}" ItemTemplate="{StaticResource RtItemTemplate}" EmptyContent="" x:Name="NewRingtones" ItemsSource="{Binding NewRingtones}" DataVirtualizationMode="Automatic" EmptyContentDisplayMode="DataSourceEmpty" IsSynchronizedWithCurrentItem="True" ScrollBarMode="Default" />
    </Grid>

The data for the list comes from webservice.
I assume here that as the header is assign before the data gets loaded this problem occurs. But I am not sure whether this will work if I assign the header after the webservice async call is completed.

Please advise.

Thanks

[Deyan]

Hi,

I presume the issue here is related to the fact that the TextBlock binding in your GroupHeaderTemplate is not correct. Since you're using the CategoryName as a group key, each different CategoryName is used to create the different group headers, so you should simply bind directly to the DataContext itself, instead of a property called CategoryName:

<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="{Binding}" FontWeight="Bold" Foreground="Red"/>

Take a look at the bolded part of the code snippet.

I hope this helps.

Kind regards,
Deyan
the Telerik team