how to Add verticle dividers to a custom GridViewHeadeerCell

[David]

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?

[Boris]

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