RadGridView Header Properties

[naveen kumar]

Hi Telerik,

1). I want to set to size of the column width automatically( i.e., when the   column has lenghty data , then column should be lenghty otherwise column should be small).There is property ColumnWidthMode but it is giving extra space with column.

2).  How to change the Column HeaderCellStyle (i.e.,Bold,Italics,Regular ........)

3). When the parent Grid has child Grid, i want to reduce the gap between the 2 Grids. Now it is giving some gap , i want to reduce it.

4). I want to set GroupPanel for Parent and not to Child.
      when i set GroupPanel True  to Parent and for Child to False. it is not 
       coming.
5). Setting Column Length for parent is working properly but not working 
       to child.

6).  For dragging the column line (which  we have set , by coding in child.) it is working properly in parent but in child  it is not  working .

   send as early as possible.

Thanks in Advance.
Kumar

[Dimitar Dobrev]

Hi Naveen,

You can find the answers to your questions on our forum which you can find here.

Sincerely yours,

Dimitar Dobrev,

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Hi Telerik,

1).I want  to display my own styles to  Radgridview header font for parent and  child (i.e., Hieararchial Grid ) eg.Parent Grid Header should display in normal font and child grid should display in italic font. and sizes also different.

[Atanas]

Hi David,

I made a sample example for you, which demonstrates how to set a defferent font size for GridViewHeaderRow in parent grid and child grids.

Here is the xaml defined style affecting the parent grid:

<Style TargetType="{x:Type telerik:GridViewHeaderRow}">
                <Setter Property="FontSize" Value="25"/>
            </Style>

All I need to achieve my goal is to define a style for child grids:

<Style TargetType="{x:Type telerik:ChildDataControlsPresenter}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:ChildDataControlsPresenter}">
                            <ItemsControl ItemsSource="{Binding}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <telerik:GridViewDataControl IsHierarchyRoot="False" ColumnsWidthMode="Auto"
                                                                     ItemsSource="{Binding TableDefinition.DataSource}"
                                                                     ParentRow="{Binding ParentRow, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:ChildDataControlsPresenter}}}">

                                            <telerik:GridViewDataControl.Resources>
                                                <Style TargetType="{x:Type telerik:GridViewHeaderRow}">
                                                    <Setter Property="FontSize" Value="15"/>
                                                </Style>
                                            </telerik:GridViewDataControl.Resources>

                                        </telerik:GridViewDataControl>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Please do not hesitate to write if you have any other issues.




Greetings,
Atanas
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Hi Atanas,

Thanks for giving reply.

1). I have applied a Static Resource to Parent RadGrid for changing the   Header Row cell Styles to different. But I want to apply these Static Resource
to Child RadGrid. I am unable to change  these styles in child grid.

Plz can u  help me, I have urgent need.

Thanks in Advance.

[Atanas]

Hi David,

As far as I understand you have issues with setting a custom style to GridViewHeaderRow in child grid controls.
In the sample project I sent you the xaml code that is affecting the child grid controls is:

<Style TargetType="{x:Type telerik:ChildDataControlsPresenter}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:ChildDataControlsPresenter}">
                            <ItemsControl ItemsSource="{Binding}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <telerik:GridViewDataControl IsHierarchyRoot="False" ColumnsWidthMode="Auto"
                                                                     ItemsSource="{Binding TableDefinition.DataSource}"
                                                                     ParentRow="{Binding ParentRow, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:ChildDataControlsPresenter}}}">

                                            <telerik:GridViewDataControl.Resources>
                                                <Style TargetType="{x:Type telerik:GridViewHeaderRow}">
                                                    <Setter Property="FontSize" Value="15"/>
                                                </Style>
                                            </telerik:GridViewDataControl.Resources>

                                        </telerik:GridViewDataControl>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Can you confirm my project works properly on your machine. This is the exact piece of xaml applying the style of RadGridViewHeaderRow in child grids:

<Style TargetType="{x:Type telerik:GridViewHeaderRow}">
                                                    <Setter Property="FontSize" Value="15"/>
                                                </Style>

Are you using the same xaml snippet in your project?




Sincerely yours,
Atanas
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Hi Atanas,

1).  By creating StaticResource for ParentGrid HeaderStyles i am successfully
      changing whatever i need, in this iam changing FontStyle to normal
      (i.e., Not Bold ) and FontFamily to Arial and  FontSize to 10.
   
                 All these are iam able apply for parent by using the follwing line.

 

<telerik:GridViewDataColumn DataType="{x:Null}" HeaderText="Country ID" UniqueName="Number" HeaderCellStyle="{StaticResource headerCellStyle}" />

 

 

    But in child grid ,which i dont take RadGrid, it will take columns from properties  from a class file, for this where can i set these StaticResource.
 
please send me as soon as possible.

[Atanas]

Hi David,

Currently there is no way to apply different style for each column in child grids. This is a known issue and we are planning to solve it in the forthcoming releases of the control.

Thank you for your understanding and patience with us.

Sincerely yours,
Atanas
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[David]

Hi Atanas,

Thank you for giving response.

    I have also tried it and i got 1 solution it.Just i pasting the following lines of
    code.
// grid part
<telerik:RadGridView.Columns>

 

<telerik:GridViewDataColumn DataType="{x:Null}" HeaderText="Country" UniqueName="Country" HeaderCellStyle="{StaticResource headerCellStyle}" />

 

 

<telerik:GridViewDataColumn DataType="{x:Null}" HeaderText="Country ID" UniqueName="Number" HeaderCellStyle="{StaticResource headerCellStyle}" />

 

 

<telerik:GridViewDataColumn DataType="{x:Null}" HeaderText="TelePhone" UniqueName="Phone" HeaderCellStyle="{StaticResource headerCellStyle}" />

 

 

</telerik:RadGridView.Columns>

 

 

<telerik:GridViewDataControl.Resources>

 

 

<Style TargetType="{x:Type telerik:GridViewHeaderCell}">

 

 

<Setter Property="Template" Value="{StaticResource gridViewHeaderCellTemplate}"/>

 

 

</Style>

 

 

</telerik:GridViewDataControl.Resources>

 

 

</telerik:RadGridView>

 

    In the above code, which is BOLD is my styles.so after applying this, i
    got  for child header column is displaying in normal font and running
   successfully. 
   Is this is the correct way or not , bcoz iam running my applications
   successfully.


2). For parent i need Grouping, for this purpose i am giving value to TRUE
     to ShowGroupPanel and for Child Grid purpose (i.e.,Hieararchy Grid
     which is taking properties values or calling parent columns only. Here
     I am not taking any childgrid for child purpose.)
    I don't need Grouping, for this purpose i need not to show GroupPanel.
    can u send this, how can i achieve this.

3).How can I change the colours of the ScrollBar.

Plz send these answers as early as possible.

Thanking You.

[Atanas]

Hi David,

As far as I understand you want to hide group panels in all child grids, currently you could not achieve this functionality, but I can send you a pre-released build with our latest assemblies where this could be done, but you have to open a custom ticket, since I could not make the assemblies available in a public forum.

About the color of the ScrollBar control, the template is big enough and there are a lot of colors, I am sending you our ScrollViewer template where you can style the horizontal or the vertical ScrollBar:

<ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">

        <Grid x:Name="Grid" Background="Transparent" ClipToBounds="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" MinWidth="10"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto" MinHeight="10"/>
            </Grid.RowDefinitions>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition  Height="*"/>
                </Grid.RowDefinitions>
                <ScrollContentPresenter Margin="0,0,0,0" x:Name="PART_ScrollContentPresenter" Grid.Column="0" Grid.Row="1" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
            </Grid>
            <Rectangle Fill="Transparent" x:Name="Corner" Grid.Column="1" Grid.Row="1"/>
            <ScrollBar Background="Transparent" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_VerticalScrollBar" Grid.Column="1" Grid.Row="0" ViewportSize="{TemplateBinding ViewportHeight}" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="VerticalScrollBar">
                <ScrollBar.Template>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Border BorderBrush="Transparent" SnapsToDevicePixels="True" Margin="0,10,0,0">
                            <Grid SnapsToDevicePixels="true" x:Name="Bg" Background="{TemplateBinding Background}">
                                <Grid.RowDefinitions>
                                    <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                    <RowDefinition Height="0.00001*"/>
                                    <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                </Grid.RowDefinitions>
                                <RepeatButton x:Name="DecreaseRepeat"  BorderThickness="0" Command="ScrollBar.LineUpCommand"  Background="Transparent" Focusable="False" IsTabStop="False">
                                    <RepeatButton.Template>
                                        <ControlTemplate>
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" Cursor="Hand">
                                                    <Path x:Name="DecreaseArrow" HorizontalAlignment="Center" VerticalAlignment="Top" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"  Fill="#FF2ECFEC" RenderTransformOrigin="0.5,0.5">
                                                        <Path.RenderTransform>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                                <RotateTransform Angle="-360"/>
                                                                <TranslateTransform X="0" Y="0"/>
                                                            </TransformGroup>
                                                        </Path.RenderTransform>
                                                    </Path>
                                                </Border>
                                            </Grid>
                                        </ControlTemplate>
                                    </RepeatButton.Template>
                                </RepeatButton>
                                <RepeatButton Grid.Row="2" x:Name="IncreaseRepeat"  Command="ScrollBar.LineDownCommand">
                                    <RepeatButton.Template>
                                        <ControlTemplate>
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" Cursor="Hand">
                                                    <Path x:Name="DecreaseArrow" HorizontalAlignment="Center" VerticalAlignment="Bottom" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"  Fill="#FF2ECFEC" RenderTransformOrigin="0.5,0.5">
                                                        <Path.RenderTransform>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                                <RotateTransform Angle="-180"/>
                                                                <TranslateTransform X="0" Y="0"/>
                                                            </TransformGroup>
                                                        </Path.RenderTransform>
                                                    </Path>
                                                </Border>
                                            </Grid>
                                        </ControlTemplate>
                                    </RepeatButton.Template>
                                </RepeatButton>
                                <Track IsEnabled="{TemplateBinding IsMouseOver}"   x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton  OverridesDefaultStyle="True" Background="Transparent" Focusable="False" IsTabStop="False" Command="{x:Static ScrollBar.PageUpCommand}">
                                            <RepeatButton.Template>
                                                <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                    <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton  OverridesDefaultStyle="True" Background="Transparent" Focusable="False" IsTabStop="False" Command="{x:Static ScrollBar.PageDownCommand}">
                                            <RepeatButton.Template>
                                                <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                    <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb  Margin="1,0,0,0" OverridesDefaultStyle="True" Background="Transparent" Focusable="False" IsTabStop="False">
                                            <Thumb.Template>
                                                <ControlTemplate TargetType="{x:Type Thumb}">
                                                    <Border SnapsToDevicePixels="True" CornerRadius="6,0,0,6" BorderThickness="1"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                                        <Border.BorderBrush>
                                                            <LinearGradientBrush EndPoint="0.455,0.962" StartPoint="0.455,0.038">
                                                                <GradientStop Color="#FF2CD0EB" Offset="1"/>
                                                                <GradientStop Color="#FF2CD0EB" Offset="0"/>
                                                            </LinearGradientBrush>
                                                        </Border.BorderBrush>
                                                        <Border.Background>
                                                            <LinearGradientBrush EndPoint="0.937,0.503" StartPoint="0.094,0.503">
                                                                <GradientStop Color="#885C20D4" Offset="0"/>
                                                                <GradientStop Color="#88000000" Offset="0.451"/>
                                                                <GradientStop Color="#887337F0" Offset="0.45"/>
                                                                <GradientStop Color="#88571FCB" Offset="1"/>
                                                            </LinearGradientBrush>
                                                        </Border.Background>
                                                        <Path SnapsToDevicePixels="True" Width="8" Height="5" Fill="#FF26D5E9" Stretch="Fill" Stroke="#00FFFFFF" StrokeLineJoin="Round" StrokeThickness="0" Canvas.Left="4" Canvas.Top="22" Data="M0,0 L8,0 8,1 0,1 0,0 z M0,-2 L8,-2 8,-1 0,-1 0,-2 z M0,-4 L8,-4 8,-3 0,-3 0,-4 z" x:Name="gripLines_Copy"/>
                                                    </Border>
                                                </ControlTemplate>
                                            </Thumb.Template>
                                        </Thumb>
                                    </Track.Thumb>
                                </Track>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bg" Value="Transparent"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ScrollBar.Template>
            </ScrollBar>
            <ScrollBar  Background="Transparent" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Cursor="Arrow" x:Name="PART_HorizontalScrollBar" Grid.Column="0" Grid.Row="1" Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" AutomationProperties.AutomationId="HorizontalScrollBar">
                <ScrollBar.Template>
                    <ControlTemplate TargetType="{x:Type ScrollBar}">
                        <Border BorderBrush="Transparent" SnapsToDevicePixels="True" Margin="10,0,0,0">
                            <!--BorderThickness ="1" CornerRadius="6,6,0,0"-->
                            <Grid SnapsToDevicePixels="true" x:Name="Bg" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                    <ColumnDefinition Width="0.00001*"/>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                </Grid.ColumnDefinitions>
                                <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}"  Command="{x:Static ScrollBar.LineLeftCommand}" >
                                    <RepeatButton.Template>
                                        <ControlTemplate>
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" Cursor="Hand">
                                                    <Path x:Name="DecreaseArrow" HorizontalAlignment="Left" VerticalAlignment="Center" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"  Fill="#FF2ECFEC" RenderTransformOrigin="0.5,0.5">
                                                        <Path.RenderTransform>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                                <RotateTransform Angle="-90"/>
                                                                <TranslateTransform X="0" Y="0"/>
                                                            </TransformGroup>
                                                        </Path.RenderTransform>
                                                    </Path>
                                                </Border>
                                            </Grid>
                                        </ControlTemplate>
                                    </RepeatButton.Template>
                                </RepeatButton>
                                <Track IsEnabled="{TemplateBinding IsMouseOver}"  x:Name="PART_Track" Grid.Column="1">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton  Command="{x:Static ScrollBar.PageLeftCommand}" OverridesDefaultStyle="True" Background="Transparent" Focusable="False" IsTabStop="False">
                                            <RepeatButton.Template>
                                                <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                    <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" OverridesDefaultStyle="True" Background="Transparent" Focusable="False" IsTabStop="False">
                                            <RepeatButton.Template>
                                                <ControlTemplate TargetType="{x:Type RepeatButton}">
                                                    <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb  Margin="0,1,0,-1" OverridesDefaultStyle="True" IsTabStop="False">
                                            <Thumb.Template>
                                                <ControlTemplate TargetType="{x:Type Thumb}">
                                                    <Border SnapsToDevicePixels="True"  CornerRadius="6,6,0,0" BorderThickness="1"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                                        <Border.BorderBrush>
                                                            <LinearGradientBrush EndPoint="1, 0.455" StartPoint="1,0.455">
                                                                <GradientStop Color="#FF2CD0EB" Offset="1"/>
                                                                <GradientStop Color="#FF2CD0EB" Offset="0"/>
                                                            </LinearGradientBrush>
                                                        </Border.BorderBrush>
                                                        <Border.Background>
                                                            <LinearGradientBrush EndPoint="0.515,0.935" StartPoint="0.515,0.071">
                                                                <GradientStop Color="#885C20D4" Offset="0"/>
                                                                <GradientStop Color="#88000000" Offset="0.451"/>
                                                                <GradientStop Color="#887337F0" Offset="0.45"/>
                                                                <GradientStop Color="#88571FCB" Offset="1"/>
                                                            </LinearGradientBrush>
                                                        </Border.Background>
                                                        <Path HorizontalAlignment="Center" SnapsToDevicePixels="True" Fill="#26D5E9"  VerticalAlignment="Center" Width="5" Height="7"  Stretch="Fill" Stroke="{x:Null}" Data="M0,0 L1,0 L1,7 L0,7 z M2,0 L3,0 L3,7 L2,7 z M4,0 L5,0 L5,7 L4,7 z"/>
                                                    </Border>
                                                </ControlTemplate>
                                            </Thumb.Template>
                                        </Thumb>
                                    </Track.Thumb>
                                </Track>
                                <RepeatButton IsEnabled="{TemplateBinding IsMouseOver}"  Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}">
                                    <RepeatButton.Template>
                                        <ControlTemplate>
                                            <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent" Cursor="Hand">
                                                    <Path x:Name="DecreaseArrow" HorizontalAlignment="Right" VerticalAlignment="Center" StrokeThickness="1" Data="M 0 4 L 8 4 L 4 0 Z"  Fill="#FF2ECFEC" RenderTransformOrigin="0.5,0.5">
                                                        <Path.RenderTransform>
                                                            <TransformGroup>
                                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                                <RotateTransform Angle="90"/>
                                                                <TranslateTransform X="0" Y="0"/>
                                                            </TransformGroup>
                                                        </Path.RenderTransform>
                                                    </Path>
                                                </Border>
                                            </Grid>
                                        </ControlTemplate>
                                    </RepeatButton.Template>
                                </RepeatButton>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </ScrollBar.Template>
            </ScrollBar>
        </Grid>
    </ControlTemplate>

Greetings,
Atanas
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.