This is a migrated thread and some comments may be shown as answers.

Replacing the plus sign on GroupHeaderRow

4 Answers 198 Views
GridView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Maria
Top achievements
Rank 1
Maria asked on 02 Jan 2010, 05:56 PM
I want to replace the plus sign (+) shown in the group header row.  How do I do this?

4 Answers, 1 is accepted

Sort by
0
Tsvyatko
Telerik team
answered on 05 Jan 2010, 02:14 PM
Hi Maria,

Did you mean plus sign in hierarchy grid? If this is the case you can customize it by editing the RowStyle. The plus sign is represented by GridViewToggleButton. You can check the project within customhierarchyplusstyle.zip for reference and see how to customize it.

If you mean group header row then you probably want to customize the expander arrow. You can check how you can achieve this by editing the GroupRow style. Again arrow is represented by using GridViewToggleButton  (demonstrated in the customgrouparrowstyle.zip)

I hope this helps.

Sincerely yours,
Tsvyatko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Maria
Top achievements
Rank 1
answered on 05 Jan 2010, 03:28 PM
I'm unable to edit the style in Expressions Blend.  When I try to edit the GridViewToggleButtonTemplate, blend throws an exception:
"An object of type "System.Windows.Media.SolidColorBrush" cannot be applied".
0
Maria
Top achievements
Rank 1
answered on 05 Jan 2010, 03:35 PM
Also, I want to replace the plus sign itself (not just the color) in a hierarchy grid.  I'd like to provide my own toggle button image.
0
Tsvyatko
Telerik team
answered on 07 Jan 2010, 09:40 AM
Hello Maria,

To customize the appearance of the grid toggle button you need to modify the following code in the template:
<Path x:Name="plus" Fill="Red" Stretch="Fill" StrokeThickness="1" Height="8" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="8" Data="M19.5,0 L27.5,0 L27.5,19.5 L47,19.5 L47,27.5 L27.5,27.5 L27.5,47 L19.5,47 L19.5,27.5 L0,27.5 L0,19.5 L19.5,19.5 z"/>
<Path x:Name="minus" Fill="Green" Stretch="Fill" StrokeThickness="1" Height="2" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="8" Opacity="0" RenderTransformOrigin="0.5,0.5" Data="M0,0 L8,0 L8,47 L0,47 z"/>

If you don't want to modify the visual states you need to name the elements again "plus" and "minus" and set initial opacity on "minus" element to 0.

Example:
<Image x:Name="plus" Source="icons/plus-icon.png" Height="15" Width="15"/>
<Image x:Name="minus" Source="icons/minus-icon.png" Opacity="0" Height="15" Width="15"/>

Please check attached project for reference.

About the occurring exception - unfortunately there are cases when Blend does not recognize and cannot parse valid xaml. We are constantly working on improving our Blend support by fitting its requirements. In your case you can comment the problem code until you finish editing template and then at the end of editing uncomment it.
The line is:
<EasingColorKeyFrame KeyTime="00:00:00" Value="{StaticResource GridViewDisabledBackground}"/>

Hope this helps.

Kind regards,
Tsvyatko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Tags
GridView
Asked by
Maria
Top achievements
Rank 1
Answers by
Tsvyatko
Telerik team
Maria
Top achievements
Rank 1
Share this question
or