Inclined (Tilted) header for GridView and GridViewColumn header hide (first column)

5 posts, 0 answers
  1. Daryn
    Daryn avatar
    6 posts
    Member since:
    Mar 2012

    Posted 25 Jun 2012 Link to this post

    Hi there,

    In my project I'm using MVVM and have to do something like in the picture (file attached)

    1. First of all I have to change GridView header and do it like tilted list with the "label" and "count"

    I did some changed in GridViewHeaderCell:

    <DataTemplate x:Key="GridViewHeaderDataTemplate">
        <StackPanel Orientation="Horizontal" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left">
            <StackPanel.RenderTransform>
                <CompositeTransform Rotation="-90"/>
            </StackPanel.RenderTransform>
            <TextBlock RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Text="Property" HorizontalAlignment="Left">
                <TextBlock.RenderTransform>
                    <CompositeTransform SkewX="-22"/>
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Foreground="Red" HorizontalAlignment="Left">
                <TextBlock.RenderTransform>
                    <CompositeTransform SkewX="-22"/>
                </TextBlock.RenderTransform>
                <Run Text=" ("/>
                <Run Text="{Binding Property13}"/>
                <Run Text=")"/>
                </TextBlock>
        </StackPanel>
    </DataTemplate>
    <Style x:Key="GridViewHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="ContentTemplate" Value="{StaticResource GridViewHeaderDataTemplate}"/>
        <Setter Property="Padding" Value="3,0,3,32"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
        <Setter Property="Background" Value="#19B1B8BA"/>
    </Style>
    and changed GridViewHeaderRow:

    <ControlTemplate x:Key="DataCellsPresenterTemplate" TargetType="telerik:DataCellsPresenter">
        <Grid RenderTransformOrigin="0.5,1">
            <Grid.RenderTransform>
                <CompositeTransform SkewX="-35"/>
            </Grid.RenderTransform>
            <ItemsPresenter/>
            <telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" HorizontalAlignment="Left"/>
        </Grid>
    </ControlTemplate>
    <Style x:Key="DataCellsPresenterMainStyle" TargetType="telerik:DataCellsPresenter">
        <Setter Property="Template" Value="{StaticResource DataCellsPresenterTemplate}"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:GridViewCellsPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="GridViewHeaderRowMainStyle" TargetType="telerik:GridViewHeaderRow">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:GridViewHeaderRow">
                    <Grid>
                        <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Style="{StaticResource DataCellsPresenterMainStyle}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
        <Setter Property="IsAlternating" Value="False"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="Height" Value="135"/>
    </Style>
    Then created RadGridView control:

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <telerik:RadGridView DataContext="{Binding Collection}" ItemsSource="{Binding}" HeaderRowStyle="{StaticResource GridViewHeaderRowMainStyle}" Style="{StaticResource RadGridViewMainStyle}" FrozenColumnCount="2" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Property 1" DataMemberBinding="{Binding Property1}" HeaderCellStyle="{StaticResource FirstColumnStyle}" />       
                <telerik:GridViewCheckBoxColumn Header="Property 2" DataMemberBinding="{Binding Property2}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 3" DataMemberBinding="{Binding Property3}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 4" DataMemberBinding="{Binding Property4}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 5" DataMemberBinding="{Binding Property5}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 6" DataMemberBinding="{Binding Property6}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 7" DataMemberBinding="{Binding Property7}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 8" DataMemberBinding="{Binding Property8}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 9" DataMemberBinding="{Binding Property9}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 10" DataMemberBinding="{Binding Property10}" HeaderCellStyle="{StaticResource GridViewHeaderCellMainStyle}" />         
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
    But now I can't change Header content for each column with binding. How is it possible to do it?

    2. Then I have to delete or hide the first column header (cell)

    I tried to do this:

    <Style TargetType="telerik:GridViewHeaderCell" x:Key="FirstColumnStyle">
        <Setter Property="Opacity" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    but that just hided header content. And I have to hide all header with the border for first column

    I don't now how I can do this. Is it possible to do so?

     

    Kind regards,

    Daryn

  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 25 Jun 2012 Link to this post

    Hello Daryn,



    You may try to predefine the Header property of the column and bind it to a property value of your ViewModel as suggested here. As per removing column header Borders you may check the following thread and download a runnable application which demonstrates how to achieve your goal.   

     


    All the best,
    Vanya Pavlova
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. Daryn
    Daryn avatar
    6 posts
    Member since:
    Mar 2012

    Posted 02 Jul 2012 Link to this post

    Hi,
    I changed necessary styles and templates and now I have this: image attached
    <ControlTemplate x:Key="DataCellsPresenterTemplate" TargetType="telerik:DataCellsPresenter">
        <Grid RenderTransformOrigin="0.5,1">
            <Grid.RenderTransform>
                <CompositeTransform SkewX="-35"/>
            </Grid.RenderTransform>
            <ItemsPresenter/>
            <telerik:FrozenColumnsSplitter x:Name="PART_FrozenColumnsSplitter" HorizontalAlignment="Left"/>
        </Grid>
    </ControlTemplate>
    <Style x:Key="DataCellsPresenterMainStyle" TargetType="telerik:DataCellsPresenter">
        <Setter Property="Template" Value="{StaticResource DataCellsPresenterTemplate}"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:GridViewCellsPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="GridViewSlantedHeaderRowMainStyle" TargetType="telerik:GridViewHeaderRow">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:GridViewHeaderRow">
                    <Grid>
                        <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Style="{StaticResource DataCellsPresenterMainStyle}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
        <Setter Property="IsAlternating" Value="False"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <Setter Property="Height" Value="135"/>
    </Style>   
    <Style x:Key="RadGridViewSlantedMainStyle" TargetType="telerik:RadGridView">
        <Setter Property="RowIndicatorVisibility" Value="Collapsed"/>
        <Setter Property="ShowGroupFooters" Value="False"/>
        <Setter Property="ShowInsertRow" Value="False"/>
        <Setter Property="ShowGroupPanel" Value="False"/>
        <Setter Property="CanUserResizeColumns" Value="False"/>
        <Setter Property="CanUserReorderColumns" Value="False"/>
        <Setter Property="CanUserInsertRows" Value="False"/>
        <Setter Property="CanUserDeleteRows" Value="False"/>
        <Setter Property="CanUserFreezeColumns" Value="False"/>
        <Setter Property="IsFilteringAllowed" Value="False"/>
        <Setter Property="HeaderRowStyle" Value="{StaticResource GridViewSlantedHeaderRowMainStyle}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="AlternateRowBackground" Value="DarkGray"/>
        <Setter Property="SelectionUnit" Value="Cell"/>    
    </Style>
    <Style x:Key="GridViewSlantedHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0">
                        <ContentPresenter RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}">
                            <ContentPresenter.RenderTransform>
                                <CompositeTransform Rotation="-90" SkewX="-17.5"/>
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderThickness" Value="1,1,0,1"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Height" Value="135"/>
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
        <Setter Property="Padding" Value="5,0,3,15"/>
    </Style>
    <Style x:Key="ColumnHeaderHideStyle" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="BorderThickness" Value="0,0,0,1"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    and this is in the MainPage:
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <telerik:RadGridView DataContext="{Binding Collection}" ItemsSource="{Binding}" HeaderRowStyle="{StaticResource GridViewSlantedHeaderRowMainStyle}" Style="{StaticResource RadGridViewSlantedMainStyle}" FrozenColumnCount="2" AutoGenerateColumns="False" Margin="10">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Property 1" DataMemberBinding="{Binding Property1}" HeaderCellStyle="{StaticResource ColumnHeaderHideStyle}" />        
                <telerik:GridViewCheckBoxColumn Header="Property 2" DataMemberBinding="{Binding Property2}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property Prop 3" DataMemberBinding="{Binding Property3}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />      
                <telerik:GridViewDataColumn Header="Property 4" DataMemberBinding="{Binding Property4}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Prop 5" DataMemberBinding="{Binding Property5}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property Property 6" DataMemberBinding="{Binding Property6}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />      
                <telerik:GridViewDataColumn Header="Property 7" DataMemberBinding="{Binding Property7}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 8" DataMemberBinding="{Binding Property8}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 9" DataMemberBinding="{Binding Property9}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />       
                <telerik:GridViewDataColumn Header="Property 10" DataMemberBinding="{Binding Property10}" HeaderCellStyle="{StaticResource GridViewSlantedHeaderCellMainStyle}" />     
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>

    As you can see the header content cutted to header width count. How can I fix this bug?

    Best regard, Daryn
  4. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1218 posts

    Posted 05 Jul 2012 Link to this post

    Hello,

    Unfortunately the reason for this behavior is a Framework limitation. As RenderTransform operations are calculated after the Measure-Arrange layout cycle, the only option would be to use a hard-coded width value for the columns that would be large enough to fit the inclined elements.

    All the best,
    Ivan Ivanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. Daryn
    Daryn avatar
    6 posts
    Member since:
    Mar 2012

    Posted 06 Jul 2012 Link to this post

    I did it.
    I changed this:

    <Style x:Key="GridViewSlantedHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0">
                        <ContentPresenter RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}">
                            <ContentPresenter.RenderTransform>
                                <CompositeTransform Rotation="-90" SkewX="-17.5"/>
                            </ContentPresenter.RenderTransform>
                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderThickness" Value="1,1,0,1"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Width" Value="50"/>
        <Setter Property="Height" Value="135"/>
        <Setter Property="VerticalContentAlignment" Value="Bottom"/>
        <Setter Property="Padding" Value="5,0,3,15"/>
    </Style>

    to this:

    <Style x:Key="GridViewSlantedHeaderCellMainStyle" TargetType="telerik:GridViewHeaderCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" RenderTransformOrigin="0.5,0">
                            <Border Margin="0,0,-86,0" Width="{TemplateBinding Height}" Height="{TemplateBinding Width}" VerticalAlignment="Bottom">
                                <ContentPresenter RenderTransformOrigin="0.5,0.5" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Width="{TemplateBinding Height}">
                                    <ContentPresenter.RenderTransform>
                                        <CompositeTransform Rotation="-90" SkewX="-17.5" TranslateX="-45" TranslateY="-65"/>
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </Border>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderThickness" Value="1,1,0,1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="Width" Value="50"/>
            <Setter Property="Height" Value="135"/>
            <Setter Property="VerticalContentAlignment" Value="Bottom"/>
            <Setter Property="Padding" Value="0"/>
        </Style>

    And now the everything are working.

    Best regardes,
    Daryn

Back to Top