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

how to Add verticle dividers to a custom GridViewHeadeerCell

1 Answer 20 Views
GridView
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 02 May 2014, 07:56 PM
Hi,

I have my GridView defiined in xaml with a custom GridViewHeadCell style.


<telerik:RadGridView x:Name="RadGrid" Margin="5"  IsReadOnly="True"
            AutoGenerateColumns="False" CanUserInsertRows="False" ShowGroupPanel="False" 
                                           DataLoadMode="Asynchronous"     IsSynchronizedWithCurrentItem="True"
                                                     GridLinesVisibility="Both"
                                                     VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                                                     ItemsSource="{Binding CurrentParticlesList}">
                <telerik:RadGridView.Resources>
                    <Style TargetType="telerik:GridViewHeaderCell">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="telerik:GridViewHeaderCell">
                                    <ContentPresenter>
                                        <ContentPresenter.LayoutTransform>
                                            <RotateTransform Angle="270" />
                                        </ContentPresenter.LayoutTransform>
                                        <ContentPresenter.HorizontalAlignment>
                                            Center
                                        </ContentPresenter.HorizontalAlignment>
                                        <ContentPresenter.Margin>
                                            2,5,2,10
                                        </ContentPresenter.Margin>
                                    </ContentPresenter>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </telerik:RadGridView.Resources>
            </telerik:RadGridView>


I canot figure out how to get vertical lines to be drawn to separate the column headers.  Does anybody know what I can do to have some drawn?

1 Answer, 1 is accepted

Sort by
0
Boris
Telerik team
answered on 07 May 2014, 09:11 AM
Hello David,

A possible approach is to add a Border in your GridViewHeaderCell style just before the ContentPresenter.

<Style TargetType="telerik:GridViewHeaderCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:GridViewHeaderCell">
                        <Grid>
                            <Border x:Name="GridViewHeaderCell" BorderBrush="Blue" BorderThickness="0,0,1,1">
                                <Border Background="Red" BorderThickness="1" BorderBrush="Yellow" />
                            </Border>
                            <ContentPresenter>
                                <ContentPresenter.LayoutTransform>
                                    <RotateTransform Angle="270" />
                                </ContentPresenter.LayoutTransform>
                                <ContentPresenter.HorizontalAlignment>Center</ContentPresenter.HorizontalAlignment>
                                <ContentPresenter.Margin>2,5,2,10</ContentPresenter.Margin>
                            </ContentPresenter>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Another possible approach is to edit the default GridViewHeaderCell template directly. This would be the better option because you will still have a functioning default behavior like change of color of the GridViewHeaderCell on MouseHover. You can check our Editing Control Templates and Styling the Column Headers documentation articles.

As a side note I should point out that setting DataLoadMode="Asyncronous" is generally not recommended as it could lead to some problems. This is an old mode and it is not relevant with our latest version. Please remove it.

Please give the suggested approaches a try and let us know how it goes.


Regards,
Boris Penev
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
GridView
Asked by
David
Top achievements
Rank 1
Answers by
Boris
Telerik team
Share this question
or