Hi Princy,
Could please check the below code, I have created a small website project where the problem exist, but when in this case the the grid header is not much misalligned compare to the previuos question I have attached a screen shot which was a SharePoint project.
///////////////////////////////// Default.aspx page code ////////////////////////////////
<%@ Page Title="Home Page" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="BuildGrid._Default" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2011.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<table id="tblEngagements" style="width: 100%; table-layout: fixed;">
<tr>
<td>
</td>
</tr>
<tr>
<td>
<form runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnableHandlerDetection="false">
</telerik:RadScriptManager>
<div class="myClass">
<telerik:RadGrid ID="grdEngagements" runat="server" AllowPaging="false" GridLines="Both"
GroupingEnabled="true" ShowStatusBar="true" AutoGenerateColumns="false" OnItemDataBound="grdEngagements_ItemDataBound">
</telerik:RadGrid>
</div>
</td>
</form>
</tr>
</table>
///////////////////////////////// Default.aspx page code ends ////////////////////////////////
///////////////////////////////// Default.aspx.cs page code ////////////////////////////////
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Data;
using System.Collections;
namespace BuildGrid
{
public partial class _Default : System.Web.UI.Page
{
private MergedColumnsInfo info = new MergedColumnsInfo();
protected void Page_Load(object sender, EventArgs e)
{
try
{
DataTable dtDummy = new DataTable();
dtDummy.Columns.Add("GroupCol");
dtDummy.Columns.Add("MainCol3");
dtDummy.Columns.Add("SubCol11");
dtDummy.Columns.Add("SubCol12");
dtDummy.Columns.Add("SubCol21");
dtDummy.Columns.Add("SubCol22");
dtDummy.Columns.Add("SubCol23");
for (int i = 0; i < 10; i++)
{
DataRow drNew = dtDummy.NewRow();
if (i == 0 || i == 1 || i == 2)
drNew[0] = 1;
else if (i == 3 || i == 4 || i == 5)
drNew[0] = 2;
else if (i == 7 || i == 8 || i == 9 || i == 6)
drNew[0] = 3;
drNew[1] = i.ToString() + "1";
drNew[2] = i.ToString() + "2";
drNew[3] = i.ToString() + "3";
drNew[4] = i.ToString() + "4";
drNew[5] = i.ToString() + "5";
drNew[6] = i.ToString() + "6";
dtDummy.Rows.Add(drNew);
}
string[,] fieldNames = new string[1, 2];
foreach (DataColumn drPref in dtDummy.Columns)
{
switch (drPref.ColumnName)
{
case "SubCol11":
fieldNames = new string[2, 2];
fieldNames[0, 0] = "SubCol11";
fieldNames[0, 1] = "SubCol11";
fieldNames[1, 0] = "SubCol12";
fieldNames[1, 1] = "SubCol12";
CreateBoundField(ref fieldNames, "tbl_alg_right", "", 100, true);
break;
case "SubCol21":
fieldNames = new string[3, 2];
fieldNames[0, 0] = "SubCol21";
fieldNames[0, 1] = "SubCol21";
fieldNames[1, 0] = "SubCol22";
fieldNames[1, 1] = "SubCol22";
fieldNames[2, 0] = "SubCol23";
fieldNames[2, 1] = "SubCol23";
CreateBoundField(ref fieldNames, "tbl_alg_right", "", 100, true);
break;
case "MainCol3":
fieldNames = new string[1, 2];
fieldNames[0, 0] = "MainCol3";
fieldNames[0, 1] = "MainCol3";
CreateBoundField(ref fieldNames, "tbl_alg_right", "", 0, true);
break;
}
}
// Registering the grid view columns to merge.
for (int rowIndex = 0; rowIndex < grdEngagements.Columns.Count; rowIndex++)
{
switch (grdEngagements.Columns[rowIndex].HeaderText)
{
case "SubCol11":
info.AddMergedColumns(new int[] { rowIndex + 3, ++rowIndex + 3 }, "MainCol1");
break;
case "SubCol21":
info.AddMergedColumns(new int[] { rowIndex + 3, ++rowIndex + 3, ++rowIndex + 3 }, "MainCol2");
break;
}
}
// Binding the grid.
grdEngagements.GridLines = GridLines.Vertical;
grdEngagements.ClientSettings.Scrolling.AllowScroll = true;
grdEngagements.ClientSettings.Scrolling.UseStaticHeaders = true;
grdEngagements.ClientSettings.Scrolling.SaveScrollPosition = true;
grdEngagements.MasterTableView.Width = Unit.Percentage(100);
grdEngagements.MasterTableView.TableLayout = GridTableLayout.Auto;
grdEngagements.AllowPaging = false;
grdEngagements.AutoGenerateColumns = false;
grdEngagements.GroupingEnabled = true;
grdEngagements.ShowGroupPanel = false;
grdEngagements.ShowStatusBar = true;
grdEngagements.Skin = "Office2007";
GridGroupByField field = new GridGroupByField();
field.FieldName = "GroupCol";
field.HeaderText = "GroupCol";
GridGroupByExpression ex = new GridGroupByExpression();
ex.GroupByFields.Add(field);
ex.SelectFields.Add(field);
grdEngagements.MasterTableView.GroupByExpressions.Add(ex);
grdEngagements.ClientSettings.AllowGroupExpandCollapse = true;
grdEngagements.MasterTableView.GroupLoadMode = GridGroupLoadMode.Client;
grdEngagements.MasterTableView.DataSource = dtDummy;
grdEngagements.DataBind();
}
catch (Exception ex)
{
ex.Message.ToString();
}
}
protected void grdEngagements_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item.ItemType == GridItemType.Header)
e.Item.SetRenderMethodDelegate(RenderHeader);
}
#region RenderHeader
/// <summary>
/// Method to render the grid header.
/// </summary>
/// <param name="output"> HtmlTextWriter output. </param>
/// <param name="container"> Control. </param>
private void RenderHeader(HtmlTextWriter output, Control container)
{
try
{
for (int i = 0; i < container.Controls.Count; i++)
{
TableCell cell = (TableCell)container.Controls[i];
// Stretch non merged columns for two rows.
if (!info.MergedColumns.Contains(i))
{
cell.Attributes["rowspan"] = "2";
cell.RenderControl(output);
}
else if (info.StartColumns.Contains(i)) // Render merged columns common title.
{
output.Write(string.Format("<th colspan='{0}'>{1}</th>", info.StartColumns[i], info.Titles[i]));
}
}
// Close the first row.
output.RenderEndTag();
// Set attributes for the second row.
grdEngagements.HeaderStyle.AddAttributesToRender(output);
// Start the second row.
output.AddStyleAttribute("text-align", "center");
output.RenderBeginTag("tr");
// Render the second row (only the merged columns).
for (int i = 0; i < info.MergedColumns.Count; i++)
{
TableCell cell = (TableCell)container.Controls[info.MergedColumns[i]];
cell.RenderControl(output);
}
}
catch (Exception ex)
{
ex.Message.ToString();
}
}
#endregion
#region CreateBoundField
/// <summary>
/// Method to create bound fields for the grid view and applying style for each column.
/// </summary>
/// <param name="fieldNames"> Rad grid column data field and header text. </param>
/// <param name="itemStyleCss"> Css class name of the rad grid coloumn item. </param>
/// <param name="headerStyleCss"> Cssclass name of the rad grid coloumn header. </param>
/// <param name="colWidth"> Rad grid coloumn width. </param>
/// <param name="isDigit"> Is the rad grid coloumn is of integer type (this is to format the values). </param>
private void CreateBoundField(ref string[,] fieldNames, string itemStyleCss, string headerStyleCss, int colWidth, bool isDigit)
{
try
{
for (int indx = 0; indx < (fieldNames.Length / 2); indx++)
{
GridBoundColumn bfield = new GridBoundColumn();
bfield.DataField = fieldNames[indx, 0];
bfield.HeaderText = fieldNames[indx, 1];
if (colWidth != 0)
{
bfield.HeaderStyle.Width = colWidth;
}
bfield.HtmlEncode = false;
// Formatting if the coloumn is of int type.
if (isDigit)
bfield.DataFormatString = "{0:#,##0.##;(#,##0.##)}";
grdEngagements.MasterTableView.Columns.Add(bfield);
}
}
catch (Exception ex)
{
ex.Message.ToString();
}
}
#endregion
}
#region MergedColumnsInfo
/// <summary>
/// Class to register the merge coloumns in grid view.
/// </summary>
public class MergedColumnsInfo
{
#region Fields
// Indexes of merged columns.
public List<int> MergedColumns = new List<int>();
// Key-value pairs: key = the first column index, value = number of the merged columns.
public Hashtable StartColumns = new Hashtable();
// Key-value pairs: key = the first column index, value = common title of the merged columns.
public Hashtable Titles = new Hashtable();
#endregion
#region AddMergedColumns
/// <summary>
/// Method to register the merge coloumns in grid view.
/// </summary>
/// <param name="columnsIndexes"> The merged columns indexes. </param>
/// <param name="title"> Common title of the merged columns. </param>
public void AddMergedColumns(int[] columnsIndexes, string title)
{
try
{
MergedColumns.AddRange(columnsIndexes);
StartColumns.Add(columnsIndexes[0], columnsIndexes.Length);
Titles.Add(columnsIndexes[0], title);
}
catch (Exception ex)
{
ex.Message.ToString();
}
}
#endregion
}
#endregion
}
///////////////////////////////// Default.aspx page code ends ////////////////////////////////
Thanks,
Anoop