GroupHeaderTemplate Multiple Items?

[Warren]

I need some help in how to solve what I want to do.

I have a radJumpList that is working great with databinding and now I wanted to expand the details in the Group Headers through my current GroupHeaderTemplate that also is using databinding for one item.

This idea is that my list is grouped by Server names and I wanted to also include more details to provide more details in the list accordingly.

Working Header with a single binding:

<DataTemplate x:Key="GroupHeaderTemplate">
    <Grid HorizontalAlignment="Stretch" Height="48">
        <Grid.Background>
            <LinearGradientBrush StartPoint="1,0" EndPoint="0.89,1">
                <GradientStop Color="Transparent" Offset="0.13"/>
                <GradientStop Color="#0795B9" Offset="0.13"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding}"
                   Grid.Column="0"
                   VerticalAlignment="Bottom"
                   FontSize="{StaticResource PhoneFontSizeMedium}"
                   FontFamily="{StaticResource PhoneFontFamilyLight}"
                   FontWeight="SemiBold"
                   Margin="6"
                   Foreground="White"/>
    </Grid>
</DataTemplate>

Working Group Descriptor:

Dim groupByServer As New GenericGroupDescriptor(Of ServiceInfoSend, String)(Function(server) server.Server)
radJumpListServices.GroupDescriptors.Add(groupByServer)

I want to to Bind multiple items in the header for greater displayed details but can not figure out how to do it.
I have a class that I'm passing in that has these items I want to display:
.Server, .ResponseTime, .ServiceCount
I should note that I only want to group on .Server. The others are only for extra details to display.

I try to modify the the template like this:

<DataTemplate x:Key="GroupHeaderTemplate">
    <Grid HorizontalAlignment="Stretch" Height="48">
        <Grid.Background>
            <LinearGradientBrush StartPoint="1,0" EndPoint="0.89,1">
                <GradientStop Color="Transparent" Offset="0.13"/>
                <GradientStop Color="#0795B9" Offset="0.13"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Server}"
                   Grid.Column="0"
                   VerticalAlignment="Bottom"
                   FontSize="{StaticResource PhoneFontSizeMedium}"
                   FontFamily="{StaticResource PhoneFontFamilyLight}"
                   FontWeight="SemiBold"
                   Margin="6"
                   Foreground="White"/>
        <TextBlock Text="{Binding ResponseTime}"
                   Grid.Column="1"
                   VerticalAlignment="Bottom"
                   FontSize="{StaticResource PhoneFontSizeMedium}"
                   FontFamily="{StaticResource PhoneFontFamilyLight}"
                   FontWeight="SemiBold"
                   Margin="6"
                   Foreground="White"/>
        <TextBlock Text="{Binding ServiceCount}"
                   Grid.Column="2"
                   VerticalAlignment="Bottom"
                   FontSize="{StaticResource PhoneFontSizeMedium}"
                   FontFamily="{StaticResource PhoneFontFamilyLight}"
                   FontWeight="SemiBold"
                   Margin="6"
                   Foreground="White"/>
    </Grid>
</DataTemplate>

This does not work and I am pretty sure I need to do something with the GroupDescriptor but have no idea how I would need to modify it to accomplish what I need to do.  I do not know lamba expressions very well and it was luck to get the one that is working.

If this able to be done, I would also like to know how I could modify the GroupPicker to display the same details.

Thanks

[ManniAT]

Hi,

did you try to run this with debug?
If so - are there any binding errors shown in the "Output" window?

I would (didn't test) try to add the following to your grid:
<Grid HorizontalAlignment="Stretch" Height="48" Datacontext="{Binding}">

This would bind the class instance to your grid - and the textboxes get the elements of the item.
Not sure if it works - but maybe you see binding errors when you debug your app.

Manfred

[Deyan]

Hi Warren,

Could you please prepare a sample project where your scenario is represented and send it to us so that we can directly take a look at the code and see how we can help?

Please note that in order to attach your project you will need to open a new support ticket..

Thanks for your time.

All the best,
Deyan
the Telerik team

[Brandon]

I found the same problem you did so I'll share with the thread on how I believe it works. Add additional binding by using key.



For example, with your code:

<DataTemplate x:Key="GroupHeaderTemplate">

    <Grid HorizontalAlignment="Stretch" Height="48">

        <Grid.Background>

            <LinearGradientBrush StartPoint="1,0" EndPoint="0.89,1">

                <GradientStop Color="Transparent" Offset="0.13"/>

                <GradientStop Color="#0795B9" Offset="0.13"/>

            </LinearGradientBrush>

        </Grid.Background>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

        <TextBlock Text="{Binding key.Server}"

                   Grid.Column="0"

                   VerticalAlignment="Bottom" 

                   FontSize="{StaticResource PhoneFontSizeMedium}" 

                   FontFamily="{StaticResource PhoneFontFamilyLight}"

                   FontWeight="SemiBold"

                   Margin="6"

                   Foreground="White"/>

        <TextBlock Text="{Binding key.ResponseTime}"

                   Grid.Column="0"

                   VerticalAlignment="Bottom" 

                   FontSize="{StaticResource PhoneFontSizeMedium}" 

                   FontFamily="{StaticResource PhoneFontFamilyLight}"

                   FontWeight="SemiBold"

                   Margin="6"

                   Foreground="White"/>

    </Grid>

</DataTemplate>







I hope this helps and can close the thread.







thanks,



Brandon

[Deyan]

Hello Brandon,

The scenario mentioned in Warren's post is easily accomplishable by using the whole data object as a group key. In this way the data context of the created groups will be the data objects itself, not the value of the property specified in the group descriptor. So, instead of returning a property value in the group descriptor, you return the whole data object. In order for the correct groups to be created however, you will need to override the Equals method in the data object and compare the object to the target by using the property initially used as a group key. This will create the same grouping as the initial one but also will ensure that you have the whole data object behind the group header as a data context so that you can display multiple properties from it on the group header.

I hope this helps.

Kind regards,
Deyan
the Telerik team