Gridview with 2 column headers

[Sree]

Hello Team ,

I have a gridview in my winforms program, where i need to display 2 headers for the grid like in below example
gridview should have column name as one header and the corresponding unit of measurement as second header
if i add unit of measurement as first row to grid, not working because
i am binding data to the grid from an excel using import option, that time it is removing the added row and binding the data to it
is this possible in telerik, if so please help me

[Plamen]

Hello Lakshmi,

Thank you for writing.

To add a second header row, you could use a summary row, which you can pin to the top of the grid. Summary rows are RadGridView rows which allow you to display information about the data in the control such as first item, last item, count of items, etc: http://www.telerik.com/help/winforms/gridview-rows-summary-rows.html

GridViewSummaryItem summaryItem = new GridViewSummaryItem();
GridViewSummaryRowItem summaryRowItem = new GridViewSummaryRowItem();
summaryRowItem.Add(summaryItem);
this.radGridView1.SummaryRowsTop.Add(summaryRowItem);
radGridView1.MasterView.SummaryRows[0].Cells["Depth"].Value = "m";
radGridView1.MasterView.SummaryRows[0].Cells["Pressure"].Value = "psi";
radGridView1.MasterView.SummaryRows[0].Cells["Density"].Value = "sg";
radGridView1.MasterView.SummaryRows[0].Cells["Temperature"].Value = "deg";
radGridView1.MasterView.SummaryRows[0].Cells["Time"].Value = "hrs";
radGridView1.MasterView.SummaryRows[0].Cells["FlowvRate"].Value = "gpa";

this.radGridView1.AddNewRowPosition = SystemRowPosition.Bottom;

Or, you can use the default header row and just use two lines of text, by adjusting the header row height trough the GridTableElement.TableHeaderHeight property:

radGridView1.MasterGridViewTemplate.Columns["Depth"].HeaderText = "Depth \n m";
((GridTableElement)this.radGridView1.GridElement).TableHeaderHeight = 50;

I hope this helps.

Kind regards,
Plamen
the Telerik team

[Bharat]

Hi Team,

We to have the similar functionality like below grid, but the units available on 2nd row is dropdown which contains different units. how can we implement editable summary row with dropdown columns. Please provide your solution. thanks in advance.

[Dess | Tech Support Engineer, Principal]

Hello Bharat,

Thank you for writing.

Your question has already been answered in the support thread you have opened on the same topic. However, I am posting the answer here as well in order the community to benefit from it. RadGridView provides a variety of visual cells (all inheriting from GridCellElement) with different functionality and purpose – header cells, indent cells, command cells, summary cells, group content cells, data cells, etc. All these cover the standard cases of the usage. In case you need to implement more specific and custom scenario, you can create a custom cell. Here is a sample code snippet demonstrating how to insert a RadDropDownListElement to each header cell. It is up to what action will be performed when changing the drop-down selection:

public Form1()
{
    InitializeComponent();

    this.radGridView1.AutoSizeColumnsMode = Telerik.WinControls.UI.GridViewAutoSizeColumnsMode.Fill;
    this.radGridView1.TableElement.TableHeaderHeight = 50;

    //register the custom row  behavior
    BaseGridBehavior gridBehavior = radGridView1.GridBehavior as BaseGridBehavior;
    gridBehavior.UnregisterBehavior(typeof(GridViewTableHeaderRowInfo));
    gridBehavior.RegisterBehavior(typeof(GridViewTableHeaderRowInfo), new CustomGridHeaderRowBehavior());
}

private void Form1_Load(object sender, EventArgs e)
{
    this.categoriesTableAdapter.Fill(this.nwindDataSet.Categories);
}

private void radGridView1_CreateCell(object sender, Telerik.WinControls.UI.GridViewCreateCellEventArgs e)
{
    if (e.CellType == typeof(GridHeaderCellElement))
    {
        e.CellElement = new CustomGridHeaderCellElement(e.Column, e.Row);
    }
}

public class CustomGridHeaderCellElement : GridHeaderCellElement
{
    public CustomGridHeaderCellElement(GridViewColumn column, GridRowElement row) : base(column, row)
    {
    }

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

    StackLayoutElement stack = new StackLayoutElement();
    RadDropDownListElement ddl = new RadDropDownListElement();
    LightVisualElement headerElement = new LightVisualElement();

    protected override void CreateChildElements()
    {
        base.CreateChildElements();
        stack.Orientation = Orientation.Vertical;
        stack.StretchHorizontally = true;
        stack.StretchVertically = true;

        ddl.DropDownStyle = RadDropDownStyle.DropDownList;
        ddl.NotifyParentOnMouseInput = true;
        stack.Children.Add(headerElement);
        stack.Children.Add(ddl);
        this.Children.Add(stack);
    }

    protected override void BindColumnProperties()
    {
        base.BindColumnProperties();
        UnbindProperty(TextProperty);
    }

    protected override void SetContentCore(object value)
    {
        base.SetContentCore(value);

        this.Text = string.Empty;
        headerElement.Text = this.ColumnInfo.HeaderText;
        if (ddl.DataSource == null)
        {
            ddl.DataSource = new List<string>() { headerElement.Text + "1", headerElement.Text + "2", headerElement.Text + "3" };
        }
    }
}

public class CustomGridHeaderRowBehavior : GridHeaderRowBehavior
{
    public override bool OnMouseUp(MouseEventArgs e)
    {
        //prevent sorting when the header drop-down is clicked
        RadDropDownListElement elementUnderMouse = this.GridControl.GridViewElement.ElementTree.GetElementAtPoint(e.Location).FindAncestor<RadDropDownListElement>();
        if (elementUnderMouse == null)
        {
            return base.OnMouseUp(e);
        }
        return true;
    }
}

I hope this information helps. Should you have further questions, I would be glad to help.

 

Regards,
Dess
Telerik