how to Add verticle dividers to a custom GridViewHeadeerCell

2 posts, 0 answers
  1. David
    David avatar
    22 posts
    Member since:
    Oct 2012

    Posted 02 May 2014 Link to this post

    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?
  2.
  3. Boris
    Admin
    Boris avatar
    276 posts

    Posted 07 May 2014 Link to this post

    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.
     
Back to Top