Span multiple columns with gridview header

[John Thompson]

Is is possible to span multiple colums with the gridview header text?  Or to turn off the header text on a particular column in a gridview while still showing the column?  In other words I have two columns 'origin city' and 'origin state' and I would like one header across both columns that says 'Origin'

[Richard Slade]

Hi John, 

One way to do this is with HTMLView (the name is rather strange) See this link

I'll post a bit more in a moment too
Richard

[Richard Slade]

Hi again, 

You can also use this method too

http://www.telerik.com/help/winforms/overview2.html

http://www.telerik.com/help/winforms/columngroupsview.html

An example would be to load in your data, then 

' Me.ColumnGroupsViewDefinition() is your own method to return a View Definition
Me.GridView.ViewDefinition = Me.ColumnGroupsViewDefinition()

Private Function ColumnGroupsViewDefinition() As ColumnGroupsViewDefinition

    Dim columnGroupsView As ColumnGroupsViewDefinition

    Dim columnGroupRowSample1 As GridViewColumnGroupRow
    Dim columnGroupRowSample2 As GridViewColumnGroupRow
    Dim columnGroupRowSample3 As GridViewColumnGroupRow

    Dim columnGroupSample1 As GridViewColumnGroup
    Dim columnGroupSample2 As GridViewColumnGroup
    Dim columnGroupSample3 As GridViewColumnGroup

    columnGroupRowSample1 = New GridViewColumnGroupRow()
    With columnGroupRowSample1.Columns
        .Add(Me.GridView.Columns("A"))
        .Add(Me.GridView.Columns("B"))
        .Add(Me.GridView.Columns("C"))
    End With

    columnGroupRowSample2 = New GridViewColumnGroupRow()
    With columnGroupRowSample2.Columns
        .Add(Me.GridView.Columns("D"))
        .Add(Me.GridView.Columns("E"))
        .Add(Me.GridView.Columns("F"))
    End With

    columnGroupRowSample3 = New GridViewColumnGroupRow()
    With columnGroupRowSample3.Columns
        .Add(Me.GridView.Columns("G"))
        .Add(Me.GridView.Columns("H"))
        .Add(Me.GridView.Columns("I"))
    End With

    columnGroupSample1 = New GridViewColumnGroup("Sample1")
    columnGroupSample1.Rows.Add(columnGroupRowSample1)

    columnGroupSample2 = New GridViewColumnGroup("Sample2")
    columnGroupSample2.Rows.Add(columnGroupRowSample2)

    columnGroupSample3 = New GridViewColumnGroup("Sample3")
    columnGroupSample3.Rows.Add(columnGroupRowSample3)

    columnGroupsView = New ColumnGroupsViewDefinition()
    columnGroupsView.ColumnGroups.Add(columnGroupSample1)
    columnGroupsView.ColumnGroups.Add(columnGroupSample2)
    columnGroupsView.ColumnGroups.Add(columnGroupSample3)

    Return columnGroupsView
End Function

hope that helps

[John Thompson]

Thanks for your help.  I was hoping to be able to span columns with the header text without adding a column group.

[Richard Slade]

Hi John, 

There may be a way, but from what I have seen it is not a standard feature to be able to have one column header only span multiple columns. 
I'll look to see if there's a way. 
Richard

[Emanuel Varga]

Hello guys,

John, like Richard said, you can use HTML formatting and even load the header layout from XML using HTML-like syntax if it is more convenient:
Like the example: for creation:

<table>
<tr>
   <td>ID</td>
   <td>Name</td>
   <td rowspan="2">City</td>
   <td rowspan="2">Country</td>
</tr>
<tr>
   <td colspan="2">Phone</td>
</tr>
</table>

and load:

view.ReadXml("myViewDefinition.html");

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

[Richard Slade]

I think what John wants Emanuel is to be able to have one column header for 2 columns. 

E.g. 

c o l u m n   h e a d e r   |    column header
----------------------------------------------------------
col1 data     col2 data       |   col3 data
col1 data     col2 data       |   col3 data
col1 data     col2 data       |   col3 data
col1 data     col2 data       |   col3 data

[Emanuel Varga]

That was just an example of the syntax for HTML if he does not want to group columns, i cannot (didn't want to impose) offer a solution for the header creation without knowing his situation exactly.

But if you insist, here is an example with 2 parent headers and 2 child headers:

<table>
<tr>
   <td colspan="2">Origin</td>
   <td colspan="2">Personal</td>
   <td rowspan="2">Date</td>
</tr>
<tr>
   <td>City</td>
   <td>State</td>
   <td>Address</td>
   <td>Phone</td>
</tr>
</table>

And what i really like about HTML views is that you can have "free" headers (headers that don't belong to any group - note the Date here) something which you cannot achieve using GroupedHeaders.

Best Regards,
Emanuel Varga

[Richard Slade]

Hi Emanuel, 

I still think this is incorrect (I may be wrong). 
You have a parent header and a child header here. What (I think) John wants to do from a previous statement is have one header line with a one of the column headers spanning multiple columns. 

Regards, 
Richard

EDIT: P.s. - I think the docs are out of date as it's now view.RowTemplate.ReadXml("")

[John Thompson]

Richard you are correct, that is exactly what I am looking for, one column header for two columns

c o l u m n   h e a d e r   |    column header
----------------------------------------------------------
col1 data     col2 data       |   col3 data
col1 data     col2 data       |   col3 data
col1 data     col2 data       |   col3 data
col1 data     col2 data       |   col3 data

[Emanuel Varga]

Hello again,

OK, now i understood, i don't think you can do this in a clean and good looking way, you can try collapsing the headers but it will look ugly...

Something like the attachment (but i really don't reccomend it, it was just a test to see if it resizing the rest of the columns headers...)

Best Regards,
Emanuel Varga

[Richard Slade]

hmm, I'm pretty sure this isn't possible as the view must contain (at a minimum) the columns that you want to present. Plus, that would mean a filter row would also span two columns and it would not know how to treat the (possibly) two different data types. Would also apply to grouping. 
I think your only option may be to have two header rows, unless we can find a way to hide one of the header rows. 
Richard

Edit: oops, almost another double posting Emanuel! :o) 

[Jack]

Hi guys,

You have good suggestions. There are two options for implementing this scenario:

1. You can create custom header row and override its ArrangeCell method. This way you will be able to change the column with for the second column to 0. Consider the following sample:

void radGridView1_CreateRow(object sender, GridViewCreateRowEventArgs e)
{
    if (e.RowType == typeof(GridTableHeaderRowElement))
    {
        e.RowType = typeof(CustomHeaderRowElement);
    }
}

public class CustomHeaderRowElement : GridTableHeaderRowElement
{
    protected override Type ThemeEffectiveType
    {
        get { return typeof(GridTableHeaderRowElement); }
    }

    public override bool ArrangeCell(RectangleF clientRect, GridCellElement cell, int position, SizeF scrollOffset)
    {
        if (cell.ColumnInfo.Name == "col2")
        {
            return true;
        }
        if (cell.ColumnInfo.Name == "col1")
        {
            RectangleF rect = TableElement.ViewElement.RowLayout.ArrangeCell(clientRect, cell);
            rect.Width += ViewTemplate.Columns["col2"].Width;
            cell.Arrange(rect);
            return true;
        }
        return base.ArrangeCell(clientRect, cell, position, scrollOffset);
    }
}

2. You can create a custom layout inside the cell element:

this.radGridView1.Columns["col2"].IsVisible = false;
this.radGridView1.Columns.Remove(this.radGridView1.Columns["col1"]);
this.radGridView1.Columns.Insert(0, new CustomColumn("col1"));

public class CustomColumn : GridViewTextBoxColumn
{
    public CustomColumn(string fieldName)
        : base(fieldName)
    {
        this.HeaderText = fieldName;
        this.Width = 150;
    }

    public override Type GetCellType(GridViewRowInfo row)
    {
        if (row is GridViewTableHeaderRowInfo)
        {
            return typeof(CustomHeaderCellElement);
        }
        if (row is GridViewDataRowInfo)
        {
            return typeof(CustomDataCellElement);
        }
        return base.GetCellType(row);
    }
}

public class CellContentElement : StackLayoutElement
{
    LightVisualElement left;
    LightVisualElement right;

    protected override void InitializeFields()
    {
        base.InitializeFields();
        this.StretchHorizontally = true;
        this.StretchVertically = true;
    }

    protected override void CreateChildElements()
    {
        this.ElementSpacing = 2;
        this.Orientation = System.Windows.Forms.Orientation.Horizontal;

        left = new LightVisualElement();
        left.StretchHorizontally = true;
        left.StretchVertically = true;
        this.Children.Add(left);

        right = new LightVisualElement();
        right.StretchHorizontally = true;
        right.StretchVertically = true;
        this.Children.Add(right);
    }

    public void SetContent(string leftText, string rightText)
    {
        left.Text = leftText;
        right.Text = rightText;
    }
}

public class CustomHeaderCellElement : GridHeaderCellElement
{
    CellContentElement content;

    public CustomHeaderCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row) {}

    protected override Type ThemeEffectiveType
    {
        get { return typeof(GridHeaderCellElement); }
    }

    public override void UpdateInfo()
    {
        base.UpdateInfo();
        UnbindProperty(TextProperty);
        Text = "";
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        content = new CellContentElement();
        this.Children.Add(content);
    }

    public override void SetContent()
    {
        int index = this.ViewTemplate.Columns.IndexOf(this.ColumnInfo.Name);
        string secondColumnValue = index + 1 < this.ViewTemplate.Columns.Count ? this.ViewTemplate.Columns[index + 1].HeaderText : "";
        this.content.SetContent(this.ColumnInfo.HeaderText, secondColumnValue);
    }
}

public class CustomDataCellElement : GridDataCellElement
{
    CellContentElement content;

    public CustomDataCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row) {}

    protected override Type ThemeEffectiveType
    {
        get { return typeof(GridDataCellElement); }
    }

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        content = new CellContentElement();
        this.Children.Add(content);
    }

    public override void SetContent()
    {
        int index = this.ViewTemplate.Columns.IndexOf(this.ColumnInfo.Name);
        string secondColumnValue = index + 1 < this.ViewTemplate.Columns.Count ?  this.RowInfo.Cells[index + 1].Value.ToString() : "";
        this.content.SetContent(this.Value.ToString(), secondColumnValue);
    }
}

John, please confirm whether this solves the issue. If you need further assistance, I will be glad to help.

All the best,
Jack
the Telerik team

[Emanuel Varga]

Great!
Thank you for the information Jack, it's always good to learn new customization options.

Best Regards,
Emanuel Varga

[John Thompson]

Thanks,

I should be able to make that work.