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

Showing columns one under another in RadGridView

4 Answers 121 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 23 Feb 2011, 04:42 PM
HI all,

Is it possible to arrange columns so that they will look like this:
----------------------------------------------------------------------------
                                               |   c o l u m n   h e a d e r 2
                                               --------------------------------------
c o l u m n   h e a d e r 1   |   c o l u m n   h e a d e r 3
                                               --------------------------------------
                                               |   c o l u m n   h e a d e r 4
----------------------------------------------------------------------------
                                               |   column 2 data
                                               --------------------------------------
column 1 data                       |   column 3 data
                                               --------------------------------------
                                               |   column 4 data
----------------------------------------------------------------------------

I've tried this with HTMLViewDefinition, but it doesn't help a lot. Using HTMLViewDefinition I faced issues with setting correct widths for the columns (every time it either auto fills if AutoSizeColumnsMode is set to 'Fill', or shrinks if it set to 'None').

Setting a view.RowTemplate.Rows[0].Cells[0].Width to any value doesn't help as well.

I've read this discussion about using one column header for two columns, located here:
http://www.telerik.com/community/forums/winforms/gridview/span-multiple-columns-with-gridview-header.aspx
But not sure that it could be used in my case.

Also, I've took a look at these two articles:
http://www.telerik.com/help/winforms/overview2.html
and
http://www.telerik.com/help/winforms/columngroupsview.html

Could you please advise on how to arrange columns the way I need?

Cheers,
P

4 Answers, 1 is accepted

Sort by
0
Richard Slade
Top achievements
Rank 2
answered on 23 Feb 2011, 06:20 PM
Hello Paul,

The closest I've been able to get it at the moment is indeed using HTMLViewDefinition which is the prescribed way to create this type of layout. However, there seems to be an issue with spanning 3 rows and I've had to change the ViewDefinition to span 4 rows to make it work at the moment.

Please take a look at the following sample

Designer File
namespace RadControlsWinFormsApp1
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components;
  
        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }
  
        #region Windows Form Designer generated code
  
        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.radGridView1 = new Telerik.WinControls.UI.RadGridView();
            ((System.ComponentModel.ISupportInitialize)(this.radGridView1)).BeginInit();
            this.SuspendLayout();
            // 
            // radGridView1
            // 
            this.radGridView1.Dock = System.Windows.Forms.DockStyle.Fill;
            this.radGridView1.Location = new System.Drawing.Point(0, 0);
            this.radGridView1.Name = "radGridView1";
            this.radGridView1.Size = new System.Drawing.Size(343, 272);
            this.radGridView1.TabIndex = 0;
            this.radGridView1.Text = "radGridView1";
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(343, 272);
            this.Controls.Add(this.radGridView1);
            this.Name = "Form1";
            this.Text = "Form1";
            this.Load += new System.EventHandler(this.Form1_Load);
            ((System.ComponentModel.ISupportInitialize)(this.radGridView1)).EndInit();
            this.ResumeLayout(false);
  
        }
  
        #endregion
  
        private Telerik.WinControls.UI.RadGridView radGridView1;
  
  
  
  
    }
}

Form1.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Telerik.WinControls.UI;
  
namespace RadControlsWinFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
  
        private void Form1_Load(object sender, EventArgs e) 
        {
            this.radGridView1.AllowAddNewRow = false;
            this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.None;
            List<Person> people = new List<Person>();
            people.Add(new Person("Richard", "1 The Mews", "Bournemouth", "Dorset"));
            people.Add(new Person("Chris", "2 Bucking Road", "Lymington", "Hampshire"));
  
            this.radGridView1.DataSource = people;
            HtmlViewDefinition viewDefinition = new HtmlViewDefinition();
            viewDefinition.RowTemplate.ReadXml(@"C:\Users\Richard\Documents\View.txt");
            this.radGridView1.ViewDefinition = viewDefinition;
  
            foreach (GridViewDataColumn column in this.radGridView1.Columns)
            {
                column.BestFit();
            }
        }
  
    
    }
  
    public class Person
    {
        public Person(string name, string address1, string address2, string address3)
        {
            this.Name = name;
            this.Address1 = address1;
            this.Address2 = address2;
            this.Address3 = address3;
        }
  
        public string Name
        { get; set; }
  
        public string Address1
        { get; set; }
  
        public string Address2
        { get; set; }
  
        public string Address3
        { get; set; }
    }
}

View Definition
<table>
    <tr><td rowspan="4">Name</td></tr>
    <tr><td>Address1</td></tr>
    <tr><td>Address2</td></tr>
    <tr><td>Address3</td></tr>
</table>

(you will need to rename the path to the View Definition to the place on your local machine)
Hope that helps
Richard
0
Paul
Top achievements
Rank 1
answered on 23 Feb 2011, 06:56 PM
Hi Richard,

What I've been able to find out during digging into custom views is that it is possible to achieve what I need using ColumnGroupViewDefinition:

ColumnGroupsViewDefinition view1 = new ColumnGroupsViewDefinition();
view1.ColumnGroups.Add(new GridViewColumnGroup("Fields Group"));
view1.ColumnGroups.Add(new GridViewColumnGroup("Photo Group"));
 
view1.ColumnGroups[0].ShowHeader = false;
view1.ColumnGroups[1].ShowHeader = false;
 
view1.ColumnGroups[1].Rows.Add(new GridViewColumnGroupRow());
view1.ColumnGroups[1].Rows[0].Columns.Add(radGridViewResults.Columns["column1"]);
 
view1.ColumnGroups[0].Rows.Add(new GridViewColumnGroupRow());
view1.ColumnGroups[0].Rows[0].Columns.Add(radGridViewResults.Columns["column2"]);
view1.ColumnGroups[0].Rows.Add(new GridViewColumnGroupRow());
view1.ColumnGroups[0].Rows[1].Columns.Add(radGridViewResults.Columns["column3"]);
view1.ColumnGroups[0].Rows.Add(new GridViewColumnGroupRow());
view1.ColumnGroups[0].Rows[2].Columns.Add(radGridViewResults.Columns["column4"]);
view1.ColumnGroups[0].Rows.Add(new GridViewColumnGroupRow());
view1.ColumnGroups[0].Rows[3].Columns.Add(radGridViewResults.Columns["column5"]);
 
radGridViewResults.ViewDefinition = view1;

But than I've found another problem. When I use the following lines of code (I need to hide group headers)

view1.ColumnGroups[0].ShowHeader = false;
view1.ColumnGroups[1].ShowHeader = false;

Grid headers gets corrupted a little bit. In fact, the very first column header (for 'column2' column) occupies two rows. Please see attached screen for this.

Do you have any thought how this could be fixed?
0
Richard Slade
Top achievements
Rank 2
answered on 23 Feb 2011, 09:37 PM
Hello,

Currently I don't know of any way of changing this so that it behaves in the way that you would like. I'll continue to look and let you know if I can find out.
Regards,
Richard
0
Martin Vasilev
Telerik team
answered on 28 Feb 2011, 05:47 PM
Hi Paul,

Actually, I think you can achieve the desired layout with HTML view. However, you have to keep in mind that currently HTML view does not support AutoSizeColumnsMode = Fill. You can specify the column width through Columns collection. Please consider the following code as an example. In addition, take a look at the attached image which shows the result.
this.htmlView = new HtmlViewDefinition();
this.htmlView.RowTemplate.Rows.Add(new RowDefinition());
this.htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("OrderID"));
this.htmlView.RowTemplate.Rows[0].Cells[0].RowSpan = 3;
this.htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("ShipName"));
this.htmlView.RowTemplate.Rows.Add(new RowDefinition());
this.htmlView.RowTemplate.Rows[1].Cells.Add(new CellDefinition("OrderDate"));
this.htmlView.RowTemplate.Rows.Add(new RowDefinition());
this.htmlView.RowTemplate.Rows[2].Cells.Add(new CellDefinition("ShipVia"));
this.radGridView1.ViewDefinition = this.htmlView;
this.radGridView1.Columns["OrderID"].Width = 120;
this.radGridView1.Columns["ShipName"].Width = 250;
this.radGridView1.Columns["OrderDate"].Width = 250;
this.radGridView1.Columns["ShipVia"].Width = 250;

I hope this helps. Let me know if you have any additional questions.

Regards,
Martin Vasilev
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Tags
GridView
Asked by
Paul
Top achievements
Rank 1
Answers by
Richard Slade
Top achievements
Rank 2
Paul
Top achievements
Rank 1
Martin Vasilev
Telerik team
Share this question
or