Can you change the font size for the whole GridView?

[Dan Kinchen]

Is there a simple way to change the font size (and subsequently the height of each row) globally for an entire grid?  My customer is asking for the font size of the entire grid to be shrunk so they can view more data at once.  Obviously this means that in addition to the font size the row height needs to decrease as well.

My guess is this involes 500+ lines of xaml in a custom style somewhere, but here's to hoping!

Thanks.

[Yavor Georgiev]

Hi Dan Kinchen,

 You can define a new Style in your resources, with target type GridViewCell. You only need one setter, for property FontSize. Then, for every column definition, bind the CellStyle property to the style you created. E.g. 

<telerik:RadGridView.Resources>
    <Style TargetType="telerik:GridViewCell" x:Key="textFont">
        <Setter Property="FontSize" Value="25" />
    </Style>
</telerik:RadGridView.Resources>

Then:

<telerik:RadGridView.Columns>
    <telerik:GridViewToggleRowDetailsColumn/>
    <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}" CellStyle="{StaticResource textFont}"/>
    <telerik:GridViewDataColumn DataMemberBinding="{Binding Established}"
                                Header="Est."
                                DataFormatString="{}{0:yyyy}"
                                CellStyle="{StaticResource textFont}"/>
    <telerik:GridViewDataColumn DataMemberBinding="{Binding StadiumCapacity}"
                                Header="Stadium"
                                DataFormatString="{}{0:N0}"
                                CellStyle="{StaticResource textFont}"/>
</telerik:RadGridView.Columns>

Regards,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Dan Kinchen]

Yes, thanks.  The above solution does work for the font size.  However, it does nothing to alter the height of the rows which is ultimately what I'm after in order to display more data on the screen at once.  Now I have tiny text inside big boxes.  I need tiny text in tiny boxes.

EDIT: I got it figured out.  I had to override the GridViewRowTemplate, which was the 500 lines of xaml I was referring to in my original post.

Thanks again.

[Yavor Georgiev]

Hi Dan Kinchen,

 You are right, if you make the text small enough, the rows stop getting smaller.

I suggest you make another style, targeting GridViewRow and set the Height property accordingly.
Example:

<telerik:RadGridView.Resources>
    <Style TargetType="telerik:GridViewCell" x:Key="textFont">
        <Setter Property="FontSize" Value="8" />
    </Style>
    <Style TargetType="telerik:GridViewRow" x:Key="rowHeight">
        <Setter Property="Height" Value="10" />
    </Style>
</telerik:RadGridView.Resources>

<telerik:RadGridView ... RowStyle="{StaticResource rowHeight}">

Kind regards,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Dan Kinchen]

Yes I had tried your solution but I found it does not work, and I beleive I can show you why.  If you look at the source code for the GridViewRow.xaml in one of the theme projects you will find this bit of code:

    <ControlTemplate x:Key="GridViewRowTemplate" TargetType="grid:GridViewRow">
        <grid:SelectiveScrollingGrid x:Name="grid">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" MinHeight="25" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

You will note that the first RowDefinition is hardcoded to a Height of * with a hardcoded MinHeight of 25 as opposed to using TemplateBinding, so these values will not pay attention to anything you pass in through a Setter.  To get the desired effect I had to create my own style and control template that hardcodes those values to 20.  I then, of course, set the GridView's RowStyle to the style I created.  This produced what I was trying to achieve.

Thanks anyway, you folks are always very responsive.

[Yavor Georgiev]

Hi Dan Kinchen,

 Could you please tell me which theme you are using? I did my tests with Office_Black and it performed accordingly.

Greetings,
Yavor Georgiev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.