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

Customizing RadGridView

12 Answers 321 Views
GridView
This is a migrated thread and some comments may be shown as answers.
gopal
Top achievements
Rank 1
gopal asked on 26 Nov 2010, 06:17 AM
Hi,
I am using RadGridView in my project but iam not able to customize it to my needs, the problem is its HeaderRow which is in its default color(black) on left side even if i am using this style 
<telerik:RadGridView.HeaderRowStyle>
<Style TargetType="telerik:GridViewHeaderRow">
<Setter Property="Background" Value="Green" />
</Style>
</telerik:RadGridView.HeaderRowStyle>
>                <Style TargetType="telerik:GridViewHeaderRow">
>                    <Setter Property="Background" Value="Green" />
></telerik:RadGridView.HeaderRowStyle>                </Style>
><telerik:RadGridView.HeaderRowStyle>
>                <Style TargetType="telerik:GridViewHeaderRow">
>                    <Setter Property="Background" Value="Green" />
>                </Style>
><telerik:RadGridView.HeaderRowStyle>
>                <Style TargetType="telerik:GridViewHeaderRow">
>                    <Setter Property="Backgro

12 Answers, 1 is accepted

Sort by
0
Asish
Top achievements
Rank 1
answered on 26 Nov 2010, 07:08 AM
Hi gopal.. I am also facing the same problem . I also want to customize styles of telerik radgridview . Is there any solution ? I think you can try customizing the telerik rad grid view using xpresion blend.
0
Accepted
Vanya Pavlova
Telerik team
answered on 26 Nov 2010, 11:02 AM
Hello Gopal and Asish,



The black colored parts shown at the attached picture cannot be easily customized using a simple style.
In order to achieve your goal you should edit the template of your GridViewHeaderRow. The first part is  named PART_IndicatorPresenter and the second one - PART_HierarchyIndentPresenter. I have prepared an example for you that demonstrates how to customize these within GridViewHeaderRow's template.
In addition to this in our online documentation we have very useful information how to manipulate RadGridView's appearance and Parts using ExpressionBlend, you can find it here.


If you need any further assistance, let me know.


Best wishes,
Vanya Pavlova
the Telerik team
Browse the videos here>> to help you get started with RadControls for WPF
0
Andy
Top achievements
Rank 1
answered on 09 Oct 2013, 12:54 PM
Can i change only the Font properties (i.e Foreground, FontSize, FontWeight & FontFamily) in an easy way on the RadGridView HeaderRowStyle?
Point me in the right direction regarding the RadGridView font formatting as well, it seems to not take effect for me...

/A
0
Matt
Top achievements
Rank 1
answered on 17 Oct 2013, 05:17 PM
I would suggest using a GridViewHeaderStyle.  Something like this should allow you to change anything you want in each cell of the header.:

<telerik:RadGridView.Resources>
                    <Style TargetType="{x:Type telerik:GridViewHeaderCell}">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <TextBlock FontFamily="{StaticResource ContentFontFamily}"
                               FontSize="{StaticResource SmallLabelFontSize}"
                               Foreground="{StaticResource WhiteBrush}"
                               Padding="0,2,2,2"
                               Text="{Binding}"
                               TextAlignment="Center"
                               TextWrapping="Wrap"
                               MinWidth="50"/>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
</telerik:RadGridView.Resrources>
0
Andy
Top achievements
Rank 1
answered on 18 Oct 2013, 06:42 AM
Setting them this way makes the header vanish all together.
Im thinking it could be something with me only loading the windows 8 styling... but im not sure.
0
Vanya Pavlova
Telerik team
answered on 18 Oct 2013, 07:52 AM
Hello Anders, Matthew


Generally, the styles used in our themes are theme specific. Once you switch to the other theme the settings should be changed per theme. I suggest that with the style provided you have a white Foreground on a White Background, which makes the text completely unreadable.  As per your second question you may always define a style Targeted at GridViewHeaderRow, GridViewHeaderCell and set different FontStyle properties as Matthew already mentioned.
Hope this helps! 



Regards,
Vanya Pavlova
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Andy
Top achievements
Rank 1
answered on 18 Oct 2013, 08:12 AM
The control collapses rather than is unreadable due to color changes. Added two pictures showing with/without styling added to HeaderRowStyle 

       <Style x:Key="GridViewHeaderRowStyle" TargetType="{x:Type telerik:GridViewHeaderRow}">
           <Setter Property="FontWeight" Value="Normal"/>
           <Setter Property="FontSize" Value="16"/>
           <Setter Property="FontFamily" Value="Segoe UI"/>
           <Setter Property="Foreground" Value="Green"/>
       </Style>
 
 
<telerik:RadGridView
           Margin="6,0,6,0"
           HeaderRowStyle="{StaticResource GridViewHeaderRowStyle}"
           Grid.Row="1"
           RowIndicatorVisibility="Collapsed"
           ItemsSource="{Binding xxx}"
           SelectedItem="{Binding yyy, Mode=TwoWay}"
           AutoGenerateColumns="False"
           IsFilteringAllowed="True"
           ShowGroupPanel="False"
           RowHeight="30"
           IsSynchronizedWithCurrentItem ="True"
           SelectionMode="Single"
           IsReadOnly="True"
           CanUserDeleteRows="False"
           ShowInsertRow="False"
           CanUserResizeColumns="True"
           >
           <telerik:RadGridView.Columns>
                    <!-- Columns -->
           </telerik:RadGridView.Columns>
       </telerik:RadGridView>
0
Vanya Pavlova
Telerik team
answered on 18 Oct 2013, 08:48 AM
Hi Anders,


It seems pretty strange that the control is collapsed. In a WPF environment an element could be collapsed only and if only the theme is not handled respectively. On the other hand I can strongly confirm that there is a problem when setting FontStyle properties of a GridViewHeaderRow.  Currently, I can suggest you to define an implicit style targeted at GridViewHeaderCell and set its FontStyle properties, as follows:

  <Style TargetType="telerik:GridViewHeaderCell">
          <Setter Property="FontWeight" Value="Normal"/>
           <Setter Property="FontSize" Value="16"/>
           <Setter Property="FontFamily" Value="Segoe UI"/>
           <Setter Property="Foreground" Value="Green"/>
</Style>


I also updated your Telerik points accordingly!
Can you verify how this corresponds to your needs?


Regards,
Vanya Pavlova
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Andy
Top achievements
Rank 1
answered on 18 Oct 2013, 09:03 AM
Hi!
This generates yet another interesting result of a collapsed Header Cell (attaching image)
It takes effect and i can change properties like Height, but it acts like the cell doesn't get any Header from the Header="{Binding xxxResources.ViewListType}" and collapses to minimum height, with the Style set as you stated above.

Thanks!
/A
0
Vanya Pavlova
Telerik team
answered on 18 Oct 2013, 09:27 AM
Hi Anders,


Thank you for getting back to us! Since we are not able to replicate the same behavior with collapsible elements, I believe that the best option here would be to isolate the problem in a small runnable project and sent it back to us as an attachment in a new support thread.  
Would it be possible to prepare such demo?
Any additional information about the grid version you used will be highly appreciated as well. 



I look forward to hearing from you!



Regards,
Vanya Pavlova
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Matt
Top achievements
Rank 1
answered on 18 Oct 2013, 01:10 PM
In all my time working with Telerik controls thus far in WPF, I have not found setting GridViewHeaderRow properties regarding font, its size, and its weight useless and have always resorted to implicit styles for the GridViewHeaderCell itself.  But that is just personal experience.
0
Vanya Pavlova
Telerik team
answered on 18 Oct 2013, 01:28 PM
Hi Matthew,


Thank you for pointing this out! I can definitely do agree with you. Defining HeaderCellStyle is pretty useful, when you are working with  a single column and you may define separate style for its header.
On the other hand, GridViewHeaderCell element should be able to inherit FontStyle properties from its direct parent element-GridViewHeaderCell. The Foreground of a GridViewHeaderRow is not applied correctly, because it is set on a header cell level, which is wrong. We will definitely spare some time to investigate this case and we will do our best to fix it for one of our next internal builds.

Have a great day!



Regards,
Vanya Pavlova
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
GridView
Asked by
gopal
Top achievements
Rank 1
Answers by
Asish
Top achievements
Rank 1
Vanya Pavlova
Telerik team
Andy
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Share this question
or