Modifying theme for GridView

[Maria]

Hello,

I'm working on modifying a built-in theme for the RadGridView, and was wondering how to change the background colour of the individual grouping cells in the "Group by". See the attached image - I've been able to modify many of the components of the Office_Black theme, but I cannot seem to find the tag to edit the circled components. The grid seems to be picking up the change to the foreground (text) colour, but the background colour stubbornly refuses to be set. I'm using the Q1 release - 2011.1.315.1040.

Thanks.

Maria

[Vanya Pavlova]

Hi Maria,

In RadGridView this part is called GridViewGroupPanelItem, which represents the grouped cell within RadGridView's GroupPanel. As the rest of its parts you may change it either by creating a simple style or by editing its template. You may apply its style through setting GroupPaneltemStyle property of RadGridView to the corresponding style. If you take a look at the template structure of GroupPanelItem you may see that internally contains a part named GroupPanelCell, which is the visual part of the GridViewGroupPanelItem.
You may also change its template in the way you need. 


If you need any further assistance do not hesitate to contact us!

Kind regards,
Vanya Pavlova
the Telerik team

[Vanya Pavlova]

Hi Maria,

Regarding your second question the black space to the left is GridViewHeaderRow's indicator.
In our online documentation you will find the information you need about the different indicators in RadGridView, following this link. 

Kind regards,
Vanya Pavlova
the Telerik team

[Maria]

Ok, I was able to change the indicator - thank you for the link.

However, I'm still struggling with the GroupPanelItem/Cell. All I need is to change the background. I've gone into Blend and made changes there, to the point that the background on the elements GridViewGroupPanelCell/Template and GridViewGroupPanelItem/Template now shows up as the background colour that I want. However, when I run the application, it is still showing the default Office_Black background on the group panel cell.

Is there some setting that is overriding my changes? This is the only control with which is causing me trouble - all the other ones work as expected, with changes made being reflected when the application is run. Are you able to tell me exactly which styles/tags I need to change in order to modify the background of the group panel cell?

Thanks.

Maria

[Vanya Pavlova]

Hi Maria,

 

As it was proposed in my previous reply, the GridViewGroupPanelCell represents the visual part of the GridViewGroupPanelItem. You may always create an implicit style targeted at GridViewGroupPanelCell, as shown below:

<Style TargetType="telerik:GridViewGroupPanelCell">
        <Setter Property="Background" Value="Red"/>
</Style>

This will change the background only for the GridViewGroupPanelCells not to the entire GridViewGroupPanelItem. In case you have to modify the arrow used there you have to modify the whole template of GridViewGroupPanelCell. 


Hope this helps!

All the best,
Vanya Pavlova
the Telerik team

[Maria]

I understand the theory, but none of the suggested changes that I try to make seem to be working.

I followed the suggested approach of modifying a built-in theme by creating my own Theme project and copying the files from the built-in theme. While trying to debug this, I also noticed that when I open Telerik.Windows.Controls.GridView.xaml, I get two errors of "Element is already the child of another element" on GridViewGroupPanelCell.xaml and GridViewLoadingIndicator.xaml. Strangely, despite the errors shown in the IDE, I can still run the application. Could this be causing the template to be overriden?

However, these errors also show up when I open the Themes.sln solution provided in the Themes folder of Telerik installation. This leads me to believe that this error is not due to any changes *I* made, but is already present in the provided code. The error is present in all the theme projects, not just OfficeBlack, which I started with. Nonetheless - could this be causing my problem? If so, do you have any suggestions to fix it?

Thanks.

[Vanya Pavlova]

Hello Maria,

 

Thank you for the detailed description of these issues! We have never experienced such problems when creating custom theme projects. Since you have added the needed files and change the GridViewGroupPanelCell.xaml file everything should work as expected. May you please try to isolate in a runnable project and sent it to us in a new support ticket? Using this project we can see what might be causing such a behavior and to provide you with an appropriate solution.


I am waiting to hearing from you!

Greetings,
Vanya Pavlova
the Telerik team

[Ryan]

Hi,
Was there a solution to this?
I am running into the same exact issue. I styled the control in blend and I can see the change take in Blend, but when i load the application up in visual studio, I get the base theme (in my case Summer).I've styled the 'GridViewGroupPanelCell' and the 'GridViewGroupPanelItem'.
I then used the styled GridViewGroupPanelCell style with in the GridViewGroupPanelItem:

<ControlTemplate x:Key="GridViewGroupPanelItemTemplate" TargetType="telerikTemplate:GridViewGroupPanelItem">
       <StackPanel x:Name="PART_GroupPanelItemStackPanel" Orientation="Horizontal"
                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                   Background="{TemplateBinding Background}">
           <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
               <Grid.RowDefinitions>
                   <RowDefinition MinHeight="4" Height="Auto" />
                   <RowDefinition />
               </Grid.RowDefinitions>
               <Path Name="PART_InsertionPoint" Grid.Row="0" Visibility="{TemplateBinding InsertionPointVisibility}" Fill="{StaticResource GridView_IndicatorPrimaryColor}" Stretch="Fill" VerticalAlignment="Top" HorizontalAlignment="Center" Width="6.414" Height="4.677" Data="M206.66812,170.31108 L212.08199,170.31108 209.36058,173.98834 z" />
               <Grid x:Name="PART_ConnectingLine" Grid.Row="1" Margin="{TemplateBinding Padding}" Opacity="{Binding IsFirst, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InvertedBooleanToOpacityConverter}}">
                   <Path Fill="{StaticResource GridView_IndicatorSecondaryColor}" Stretch="Fill" Stroke="{x:Null}" Width="4" Height="7" Data="M0,0 L1,0 1,1 2,1 2,2 3,2 3,3 4,3 4,4 3,4 3,5 2,5 2,6 1,6 1,7 0,7 z" Margin="1,2,0,0"/>
                   <Path Fill="{StaticResource GridView_IndicatorPrimaryColor}" Stretch="Fill" Stroke="{x:Null}" Width="4" Height="7" Data="M0,0 L1,0 1,1 2,1 2,2 3,2 3,3 4,3 4,4 3,4 3,5 2,5 2,6 1,6 1,7 0,7 z"/>
               </Grid>
           </Grid>
           <telerikTemplate:GridViewGroupPanelCell Content="{TemplateBinding Content}" telerik:StyleManager.Theme="{StaticResource Theme}" Style="{StaticResource GridViewGroupPanelCellStyle}"
                                        SortDirection="{Binding Path=SortDirection}" x:Name="PART_Cell"/>
       </StackPanel>
   </ControlTemplate>

Thanks,
Ryan