AUTHOR: Dimitar Karamfilov
DATE POSTED: June 24, 2014
PROBLEM A common question regarding RadGridView is whether it supports merging cells. This article aims to answer this question in detail. SOLUTION There are three ways to merge cells in RadGridView: 1. Use HtmlView definition – merging will be applied to both data cells and header cells. 2. Use ColumnGroupView definition – merging will be applied like in the html view. Also you can visually separate your data by adding custom groups. 3. Use the styling capabilities of the grid to hide the borders between the cells in order to visually display the cells as merged. 1. The HtmlView definition gives you the opportunity to merge the cells like in html tables. You can just set the Colspan and RowSpan properties. For example, you can create a simple view as follows: [C#]
HtmlViewDefinition view =
new
HtmlViewDefinition();
view.RowTemplate.Rows.Add(
RowDefinition());
view.RowTemplate.Rows[0].Cells.Add(
CellDefinition(
"ProductName"
));
view.RowTemplate.Rows[2].Cells.Add(
"ProductID"
"UnitPrice"
view.RowTemplate.Rows[1].Cells.Add(
"UnitsOnOrder"
"UnitsInStock"
view.RowTemplate.Rows[3].Cells.Add(
"QuantityPerUnit"
view.RowTemplate.Rows[0].Cells[0].RowSpan = 2;
view.RowTemplate.Rows[3].Cells[0].ColSpan = 2;
this
.radGridView1.ViewDefinition = view;
Dim
view
As
New
HtmlViewDefinition()
RowDefinition())
view.RowTemplate.Rows(0).Cells.Add(
))
view.RowTemplate.Rows(2).Cells.Add(
view.RowTemplate.Rows(1).Cells.Add(
view.RowTemplate.Rows(3).Cells.Add(
view.RowTemplate.Rows(0).Cells(0).RowSpan = 2
view.RowTemplate.Rows(3).Cells(0).ColSpan = 2
Me
.radGridView1.ViewDefinition = view
ColumnGroupsViewDefinition view =
ColumnGroupsViewDefinition();
view.ColumnGroups.Add(
GridViewColumnGroup(
"Unit Information"
view.ColumnGroups[0].Rows.Add(
GridViewColumnGroupRow());
view.ColumnGroups[0].Rows[0].Columns.Add(
.radGridView1.Columns[
]);
view.ColumnGroups[0].Rows[1].Columns.Add(
"Price"
view.ColumnGroups[1].Rows.Add(
view.ColumnGroups[1].Rows[0].Columns.Add(
view.ColumnGroups[1].ShowHeader =
false
;
radGridView1.ViewDefinition = view;
ColumnGroupsViewDefinition()
view.ColumnGroups(0).Rows.Add(
GridViewColumnGroupRow())
view.ColumnGroups(0).Rows(0).Columns.Add(
.radGridView1.Columns(
view.ColumnGroups(0).Rows(1).Columns.Add(
view.ColumnGroups(1).Rows.Add(
view.ColumnGroups(1).Rows(0).Columns.Add(
view.ColumnGroups(1).ShowHeader =
False
radGridView1.ViewDefinition = view
private
void
MergeHorizontally(RadGridView radGridView,
int
startColumnIndex,
endColumnIndex)
{
foreach
(GridViewRowInfo item
in
radGridView.Rows)
for
(
i = startColumnIndex; i < endColumnIndex; i++)
GridViewCellInfo firstCell = item.Cells[i];
GridViewCellInfo secondCell = item.Cells[i + 1];
string
firstCellText = (firstCell !=
null
&& firstCell.Value !=
? firstCell.Value.ToString() :
.Empty);
secondCellText = (secondCell !=
&& secondCell.Value !=
? secondCell.Value.ToString() :
.Empt
setCellBorders(firstCell, Color.FromArgb(209, 225, 245));
setCellBorders(secondCell, Color.FromArgb(209, 225, 245));
if
(firstCellText == secondCellText)
firstCell.Style.BorderRightColor = Color.Transparent;
secondCell.Style.BorderLeftColor = Color.Transparent;
secondCell.Style.ForeColor = Color.Transparent;
}
else
secondCell.Style.ForeColor = Color.Black;
MergeVertically(RadGridView radGridView,
[] columnIndexes)
GridViewRowInfo Prev =
(Prev !=
)
firstCellText =
.Empty;
secondCellText =
i
columnIndexes)
GridViewCellInfo firstCell = Prev.Cells[i];
GridViewCellInfo secondCell = item.Cells[i];
firstCell.Style.BorderBottomColor = Color.Transparent;
secondCell.Style.BorderTopColor = Color.Transparent;
Prev = item;
break
Private
Sub
MergeHorizontally(radGridView
RadGridView, startColumnIndex
Integer
, endColumnIndex
For
Each
item
GridViewRowInfo
In
radGridView.Rows
= startColumnIndex
To
endColumnIndex - 1
firstCell
GridViewCellInfo = item.Cells(i)
secondCell
GridViewCellInfo = item.Cells(i + 1)
firstCellText
String
= (
If
(firstCell IsNot
Nothing
AndAlso
firstCell.Value IsNot
, firstCell.Value.ToString(),
.Em
secondCellText
(secondCell IsNot
secondCell.Value IsNot
, secondCell.Value.ToString(), Strin
setCellBorders(firstCell, Color.FromArgb(209, 225, 245))
setCellBorders(secondCell, Color.FromArgb(209, 225, 245))
firstCellText = secondCellText
Then
firstCell.Style.BorderRightColor = Color.Transparent
secondCell.Style.BorderLeftColor = Color.Transparent
secondCell.Style.ForeColor = Color.Transparent
Else
secondCell.Style.ForeColor = Color.Black
End
Next
MergeVertically(radGridView
RadGridView, columnIndexes
())
Prev
GridViewRowInfo =
Prev IsNot
=
.Empty
columnIndexes
GridViewCellInfo = Prev.Cells(i)
firstCellText = (
.Empty))
secondCellText = (
, secondCell.Value.ToString(),
firstCell.Style.BorderBottomColor = Color.Transparent
secondCell.Style.BorderTopColor = Color.Transparent
Prev = item
Exit
Also we can add a support for printing. And this can be achieved by painting a white lines on top of the borders and white space in the cells that have duplicate values. [C#]
radGridView1_PrintCellPaint(
object
sender, PrintCellPaintEventArgs e)
(e.Row.Index >= 0)
GridViewCellInfo cell =
.radGridView1.Rows[e.Row.Index].Cells[e.Column.Index];
(cell.Style.BorderTopColor == Color.Transparent)
e.Graphics.DrawLine(
Pens.White,
Point(e.CellRect.Left + 1, e.CellRect.Top),
Point(e.CellRect.Right - 1, e.CellRect.Top));
(cell.Style.BorderLeftColor == Color.Transparent)
Point(e.CellRect.Left, e.CellRect.Top),
Point(e.CellRect.Left - 1, e.CellRect.Bottom));
(cell.Style.ForeColor == Color.Transparent)
Rectangle r =
Rectangle(e.CellRect.X + 1,e.CellRect.Y + 1,e.CellRect.Width - 2,e.CellRect.Height - 2);
e.Graphics.FillRectangle(Brushes.White, r);
radGridView1_PrintCellPaint(sender
Object
, e
PrintCellPaintEventArgs)
e.Row.Index >= 0
cell
GridViewCellInfo =
.radGridView1.Rows(e.Row.Index).Cells(e.Column.Index)
cell.Style.BorderTopColor = Color.Transparent
e.Graphics.DrawLine(Pens.White,
Point(e.CellRect.Right - 1, e.CellRect.Top))
cell.Style.BorderLeftColor = Color.Transparent
Point(e.CellRect.Left - 1, e.CellRect.Bottom))
cell.Style.ForeColor = Color.Transparent
r
Rectangle(e.CellRect.X + 1, e.CellRect.Y + 1, e.CellRect.Width - 2, e.CellRect.Height - 2)
e.Graphics.FillRectangle(Brushes.White, r)
Resources Buy Try