Grouping column headers

[Jason Maronge]

I need to create a time sheet and was wondering if the RadGridView supported a header like I have in the attached file.   Implementing the actual data part of the grid is easy to do,  what I need help with is creating the day headers.


Thanks,

Jason

[Jason Maronge]

I have found a way to do this in the windows grid view, but I am not sure how or even if it can be changed to work on the RadGridView.  All needs to be done is a project created with a form and a data grid view.  Here is the link if anyone wants to check it out.

http://social.msdn.microsoft.com/Forums/en-US/winformsdatacontrols/thread/87004d70-482a-4b86-ba18-371670254b6a/

namespace Sample5
{
    public partial class DgvColumnHeaderMerge : Form
    {
        public DgvColumnHeaderMerge()
        {
            InitializeComponent();
        }

        private void DgvColumnHeaderMerge_Load(object sender, EventArgs e)
        {
            this.dataGridView1.Columns.Add("JanWin", "Win");
            this.dataGridView1.Columns.Add("JanLoss", "Loss");
            this.dataGridView1.Columns.Add("FebWin", "Win");
            this.dataGridView1.Columns.Add("FebLoss", "Loss");
            this.dataGridView1.Columns.Add("MarWin", "Win");
            this.dataGridView1.Columns.Add("MarLoss", "Loss");
            this.dataGridView1.Columns.Add("AprWin", "Win");
            this.dataGridView1.Columns.Add("AprLoss", "Loss");
            this.dataGridView1.Columns.Add("MayWin", "Win");
            this.dataGridView1.Columns.Add("MayLoss", "Loss");

            for (int j = 0; j < this.dataGridView1.ColumnCount; j++)
            {
                this.dataGridView1.Columns[j].Width = 45;
            }

            this.dataGridView1.ColumnHeadersHeightSizeMode = DataGridViewColumnHeadersHeightSizeMode.EnableResizing;

            this.dataGridView1.ColumnHeadersHeight = this.dataGridView1.ColumnHeadersHeight * 2;

            this.dataGridView1.ColumnHeadersDefaultCellStyle.Alignment = DataGridViewContentAlignment.BottomCenter;

            this.dataGridView1.CellPainting += new DataGridViewCellPaintingEventHandler(dataGridView1_CellPainting);

            this.dataGridView1.Paint += new PaintEventHandler(dataGridView1_Paint);

             this.dataGridView1.Scroll += new ScrollEventHandler(dataGridView1_Scroll);

            this.dataGridView1.ColumnWidthChanged += new DataGridViewColumnEventHandler(dataGridView1_ColumnWidthChanged);

        }

        void dataGridView1_ColumnWidthChanged(object sender, DataGridViewColumnEventArgs e)
        {
            Rectangle rtHeader = this.dataGridView1.DisplayRectangle;
            rtHeader.Height = this.dataGridView1.ColumnHeadersHeight / 2;
            this.dataGridView1.Invalidate(rtHeader);
        }

        void dataGridView1_Scroll(object sender, ScrollEventArgs e)
        {
            Rectangle rtHeader = this.dataGridView1.DisplayRectangle;
            rtHeader.Height = this.dataGridView1.ColumnHeadersHeight / 2;
            this.dataGridView1.Invalidate(rtHeader);
        }

        void dataGridView1_Paint(object sender, PaintEventArgs e)
        {

            string[] monthes = { "January", "February", "March","April" ,"May"};
            for (int j = 0; j < 10;)
            {
                Rectangle r1 = this.dataGridView1.GetCellDisplayRectangle(j, -1,true);
                int w2 = this.dataGridView1.GetCellDisplayRectangle(j + 1, -1, true).Width;
                r1.X += 1;
                r1.Y += 1;
                r1.Width = r1.Width + w2 - 2;
                r1.Height = r1.Height / 2 - 2;
                e.Graphics.FillRectangle(new SolidBrush(this.dataGridView1.ColumnHeadersDefaultCellStyle.BackColor), r1);

                StringFormat format = new StringFormat();
                format.Alignment = StringAlignment.Center;
                format.LineAlignment = StringAlignment.Center;
                e.Graphics.DrawString(monthes[j/2],
                    this.dataGridView1.ColumnHeadersDefaultCellStyle.Font,
                    new SolidBrush(this.dataGridView1.ColumnHeadersDefaultCellStyle.ForeColor),
                    r1,
                    format);

                j += 2;
            }
        }

        void dataGridView1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e)
        {
            if (e.RowIndex == -1 && e.ColumnIndex > -1)
            {
                Rectangle r2 = e.CellBounds;
                r2.Y += e.CellBounds.Height / 2;
                r2.Height = e.CellBounds.Height / 2;
                e.PaintBackground(r2, true);
                e.PaintContent(r2);
                e.Handled = true;
            }

        }

    }

}

[Svett]

Hello Jason Maronge,

Thank you for supplied code snippet.

You can use View Definitions feature of the grid and especially Column Groups View. You can read more about it in this documentation article. Also you can see Grid Views sample in the supplied examples. You can find it under Columns menu of the grid example.

Do not hesitate to write us back if you need assistance.

Greetings,
Svett
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.

[Jason Maronge]

I have gotten the grid to look right, but by doing this it stops all the GridViewDateTimeColumns editing from working.  Does this only support GridViewDataColumn's?

Jason

[Jason Maronge]

I figured it out.  Had one of those special moments :)

Jason

[David Simmonds]

I have done as the documentation article suggested but the text is not wrapping. The WrapText property is set to true but still it is flat. Everything works fine if I do not set the ViewDefinition. That is, I do not use column grouping. Please advise.

ViewInfo[] views = new ViewInfo[]
{
    new ViewInfo("", new String[] { "CONTROL_TYPE", "TAGNUMBER", "SUPPLYVOLTAGE",
                                    "PHASES", "TOTALAMPS" }),
    new ViewInfo("Power Coordinates", new String[] { "EAST", "NORTH", "ELEVATION" }),
    new ViewInfo("", new String[] { "AREA", "BUILDING", "SKID_TAG", "WRAPPER",
                                    "HEAT_TRACE_CONTROLLER_NO", "SKID_TYPE", "ZONENUMBER",
                                    "PHASE", "CIRCUIT_BREAKER", "DISTANCE" }),
};
ColumnGroupsViewDefinition view = new ColumnGroupsViewDefinition();
int nGroup = 0;
foreach (ViewInfo vi in views)
{
    view.ColumnGroups.Add(new GridViewColumnGroup(vi.GroupHeader));
    view.ColumnGroups[nGroup].Rows.Add(new GridViewColumnGroupRow());
    foreach (String strColumnHeader in vi.ColumnHeaders)
    {
        GridViewDataColumn column = this.radGridView1.Columns[strColumnHeader];
        view.ColumnGroups[nGroup].Rows[0].Columns.Add(column);
    }
    nGroup++;
}
radGridView1.ViewDefinition = view;

[Svett]

Hi David,

We know about this limitation. It will be addressed in one of the next releases. In the meantime, I cannot offer you any alternative due to complexity of the layout when this view definition is used.

All the best,
Svett
the Telerik team

[Doug]

I am having the same problem. The WrapText in combination with the AutoSizeRows property works perfectly when the grid is not using a ViewDefinition to group columns. However, once a view definition is applied, these properties seem to be ignored.

I am using v.2012.1.12.215. Are there any estimates on when a resolution for this will be released?

[Svett]

Hello Doug, 

I am not able to give you an exact time frame for this case. If many customers require it, we will increase its priority in our task list. You can vote for this feature here.

All the best,
Svett
the Telerik team