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

Columnheaders with multiple rows and span possible?

14 Answers 398 Views

GridView

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

Markus asked on 30 Sep 2010, 01:59 PM

hc-462.jpg

Hello,

is it possible to create the following with the Telerik-GridView:

I'have got some columns which should have two rows of columnheaders. The first line of the columnheader contains a summary (rubric) and should be centered. The captions of the columns should follow in the next line.

Is there a type of cell-span in the GridView?

Please have a look to the screenshot for better unterstanding (first two rows are essential).

Greetings from Germany

Markus

14 Answers, 1 is accepted

answered on 01 Oct 2010, 09:52 AM

Hi Markus,

Following up the example demonstrated in the blog post, what is the expected behavior when grouping ? Do you require the grid to be grouped by the main header or the secondary ones ? Basically, as the main header represents only a visual aid and it is just a string used for a better view, it is not quite possible to rearrange the grid according to it.

Kind regards,
Maya
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 01 Oct 2010, 10:06 AM

hc-464.JPG

hc-463.jpg

The second header is overwriting the header of the group descriptor. And with the second header it is no more possbile to create custom group descriptors by the user. Please take a look at my screenshots.

answered on 04 Oct 2010, 07:29 AM

groupcolumnheaders-wpf.zip

Hello Markus,

Please excuse me for my mistake. I hope my second try for attaching the file is more successful.

All the best,
Maya
the Telerik team

answered on 04 Oct 2010, 09:02 AM

scr.JPG

Thank you very much, Maya. Now this problem is solved.

The last question: If I have childgrids I have problems to set the colspan. Take a look at my screenshot.

I have upload the whole project to http://www.hammer-of-darkness.com/files/Grobplanung.zip
It would be very nice if you could help me one last time with this :)

Best regards

Markus

answered on 07 Oct 2010, 02:50 PM

grobplanung.zip

Hello Markus,

In order to remove the white space in the header row, you need to set the ColumnSpan property so that it covers all the columns. In your particular case:

<telerik:RadGridView ItemsSource="{Binding Auftragspositionen}"

x:Name="PositionenDV" ShowGroupPanel="true"

AutoGenerateColumns="False">

<i:Interaction.Behaviors>

<local:ColumnGroupsBehavior>

<local:ColumnGroupsBehavior.CommonHeaders>

<local:CommonHeader StartColumnIndex="0" Caption="Positionen" ColumnSpan="21" Height="27"/>

</local:ColumnGroupsBehavior.CommonHeaders>

</local:ColumnGroupsBehavior>

</i:Interaction.Behaviors>

I am sending you your sample project back with some slight changes made.

Regards,
Maya
the Telerik team

answered on 25 Feb 2011, 04:13 PM

Hi

We've had similar issues with the RowIndicator which we've resolved by implementing the follwing changes in SecondaryHeader.xaml.cs

/// <summary>

/// Interaction logic for SecondaryHeader.xaml

/// </summary>

public partial class SecondaryHeader : UserControl

{

public SecondaryHeader()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(SecondaryHeader_Loaded);

}

public RadGridView ParentGridView { get; set; }

public IList<CommonHeader> CommonHeaders

{

get;

internal set;

}

void SecondaryHeader_Loaded(object sender, RoutedEventArgs e)

{

GridViewHeaderRow headerRow = this.ParentGridView.ChildrenOfType<GridViewHeaderRow>().FirstOrDefault();

var scroller = ParentGridView.ChildrenOfType<GridViewScrollViewer>().FirstOrDefault();

scroller.ScrollChanged += new ScrollChangedEventHandler(scroller_ScrollChanged);

BindToColumns();

PlaceCommonHeaders();

this.SecondaryHeadersGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });

}

private void BindToColumns()

{

RowIndicatorColumn.SetBinding(VisibilityProperty, new Binding("RowIndicatorVisibility") { Source = ParentGridView });

for (int i = 0; i < ParentGridView.Columns.Count; i++)

{

ColumnDefinition columndefinition = new ColumnDefinition() { Width = GridLength.Auto };

this.SecondaryHeadersGrid.ColumnDefinitions.Add(columndefinition);

Border border = new Border();

border.SetValue(Grid.ColumnProperty, i);

this.SecondaryHeadersGrid.Children.Add(border);

border.SetBinding(Border.WidthProperty, new Binding("ActualWidth") { Source = ParentGridView.Columns[i] });

}

private void PlaceCommonHeaders()

{

if (this.CommonHeaders.Count > 0 && this.CommonHeaders[0].Parent != null)

return;

foreach (var commonHeader in this.CommonHeaders)

{

commonHeader.SetValue(Grid.ColumnSpanProperty, commonHeader.ColumnSpan);

commonHeader.SetValue(Grid.ColumnProperty, commonHeader.StartColumnIndex);

this.SecondaryHeadersGrid.Children.Add(commonHeader);

}

CommonHeader lastEmptyHeader = new CommonHeader();

lastEmptyHeader.SetValue(Grid.ColumnProperty, this.SecondaryHeadersGrid.ColumnDefinitions.Count);

this.SecondaryHeadersGrid.Children.Add(lastEmptyHeader);

}

void scroller_ScrollChanged(object sender, ScrollChangedEventArgs e)

{

this.ScrollViewer.ScrollToHorizontalOffset(e.HorizontalOffset);

}

Also some small changes to SecondaryHeader.xaml.

<UserControl x:Class="Cleo.Utility.TelerikHelpers.RadGrid.SecondaryHeader"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:rad="http://schemas.telerik.com/2008/xaml/presentation"

Width="Auto" Height="24" HorizontalAlignment="Stretch" >

<UserControl.Resources>

<LinearGradientBrush x:Key="GridViewHeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFEBF3FF" Offset="0"/>

<GradientStop Color="#FFD0E8FF" Offset="1"/>

<GradientStop Color="#FFABC9EE" Offset="0.43"/>

<GradientStop Color="#FFC6DFFF" Offset="0.42"/>

</LinearGradientBrush>

<DataTemplate x:Key="GridViewHeaderIndentCellDataTemplate">

<rad:GridViewHeaderIndentCell />

</DataTemplate>

</UserControl.Resources>

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<ScrollViewer Grid.Column="1" BorderThickness="0" x:Name="ScrollViewer"

VerticalScrollBarVisibility="Hidden"

HorizontalScrollBarVisibility="Hidden">

<Grid x:Name="SecondaryHeadersGrid" />

</ScrollViewer>

<StackPanel Orientation="Horizontal">

<Border x:Name="RowIndicatorColumn" BorderBrush="#FF83A5D2" BorderThickness="0,0,1,1" Background="{StaticResource GridViewHeaderBackground}" Width="25" >

<Border BorderBrush="#FFEFF6FF" BorderThickness="0,0,1,1"/>

</Border>

<rad:IndentPresenter x:Name="PART_SpecialIndentPresenter" Grid.Column="1"

IndentLevel="1"

ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}"

rad:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="Collapsed" />

</StackPanel>

</Grid>

</UserControl>

As for your issue on the DataLoaded event, since the ColumnsGroupHeaders use the same event to place the secondary headers, it is likely that they've already been drawn by the time you are trying to add them in your code-behind.

Regards

Hennie Bester

answered on 27 May 2011, 06:12 PM

Thanks Hennie, this is just what I needed. I copied and pasted this workaround into my project and I get a white border around the commonheaders. Any idea where that is coming from?

Thanks!

Edit: I figured it out by accessing the ScrollContentPresenter in the ScrollViewer.Template and setting the Margin = "0". Now the issue is that since the subgrid has a horizontal scrollbar, the CommonHeaders shift by the width of the scrollbar when scrolled all the way to the right.

Edit #2: Figured out the shift due to the child scroll bar. I added another CommonHeader with Caption="" ColumnSpan="1" Width="25". My StartColumnIndex = "Number of grid columns + 1."

<ScrollViewer Grid.Column="1" BorderThickness="0" Name="ScrollViewer" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden">

<ScrollViewer.Template>

<ControlTemplate TargetType="ScrollViewer">

<Grid Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<ScrollContentPresenter

x:Name="ScrollContentPresenterElement"

Grid.Column="0"

Grid.Row="0"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

Cursor="{TemplateBinding Cursor}"

Margin="0" />

<ScrollBar

BorderThickness="0"

x:Name="VerticalScrollBarElement"

Grid.Column="1"

Grid.Row="0"

Orientation="Vertical"

Cursor="Arrow"

Visibility="Collapsed"

ViewportSize="{TemplateBinding ViewportHeight}"

Minimum="0"

Maximum="{TemplateBinding ScrollableHeight}"

Value="{TemplateBinding VerticalOffset}"

Width="0"/>

<ScrollBar

BorderThickness="0"

x:Name="HorizontalScrollBarElement"

Grid.Column="0"

Grid.Row="1"

Orientation="Horizontal"

Cursor="Arrow"

Visibility="Collapsed"

ViewportSize="{TemplateBinding ViewportWidth}"

Minimum="0"

Maximum="{TemplateBinding ScrollableWidth}"

Value="{TemplateBinding HorizontalOffset}"

Height="0"

/>

</Grid>

</ControlTemplate>

</ScrollViewer.Template>

<Grid x:Name="SecondaryHeadersGrid" />

</ScrollViewer>