or
<telerik:GridTemplateColumn HeaderText="Date" UniqueName="Date"> <ItemTemplate> <telerik:RadDatePicker ID="rdpDate" runat="server" DatePopupButton-Visible="true" Width="100px"> <DateInput ID="DateInputDate" runat="server" InvalidStyleDuration="100"> <ClientEvents OnError="OnRadDatePickerError" /> </DateInput> <DatePopupButton ToolTip="Select date" /> </telerik:RadDatePicker> <asp:CustomValidator ID="cvDate" runat="server" ErrorMessage="<br />Invalid date" ValidationGroup="Gameplan" SetFocusOnError="true" Display="Dynamic" ControlToValidate="rdpDate" ClientValidationFunction="ValidateRadDatePickers"></asp:CustomValidator> <asp:RequiredFieldValidator ID="rfvDate" runat="server" ControlToValidate="rdpDate" Display="Dynamic" ErrorMessage="<br />Mandatory" ValidationGroup="Gameplan" SetFocusOnError="true"></asp:RequiredFieldValidator> <asp:Label ID="lblMatchDate" runat="server" ForeColor="Red" Visible="False"><br />Date error</asp:Label><asp:Label ID="lblLastDateError" runat="server" ForeColor="Red" Visible="False"><br />Last date error</asp:Label> </ItemTemplate> </telerik:GridTemplateColumn> <telerik:GridTemplateColumn HeaderText="Tidspunkt" UniqueName="Time"> <ItemTemplate> <telerik:RadTimePicker ID="rtpTime" runat="server" TimePopupButton-Visible="true" Width="65px"> <DateInput ID="DateInputTime" runat="server" InvalidStyleDuration="100"> <ClientEvents OnError="OnRadTimePickerError" /> </DateInput> </telerik:RadTimePicker> <asp:CustomValidator ID="cvTime" runat="server" ErrorMessage="<br />Wrong format" ValidationGroup="Gameplan" ControlToValidate="rtpTime" ClientValidationFunction="ValidateRadTimePickers" SetFocusOnError="true" Display="Dynamic"></asp:CustomValidator> </ItemTemplate> </telerik:GridTemplateColumn>I am using the gridTemplateColumn to solve the Multiple header row issue. While can accomplish the multiple Header rows, I am not able to get the Header and Item rows to align. Below is the markup of the aspx page.
_________________________________________________________________________________________________________
<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="APSFrameWork.test" %> <%@ MasterType VirtualPath="~/Default.Master" %> <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %> <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <%--<meta http-equiv="X-UA-Compatible" content="IE=8" /> --%> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <style type="text/css" > .MasterTable_Office2007 th { padding: 0 4px 0 4px; } .MasterTable_Office2007 td { padding: 0 4px 0 4px; } </style> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True"> </telerik:RadScriptManager> <p> </p> <p> </p> <p> </p> <p> <br /> </p> <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> var popUp; function PopUpShowing(sender, eventArgs) { popUp = eventArgs.get_popUp(); var gridWidth = sender.get_element().offsetWidth; var gridHeight = sender.get_element().offsetHeight; var popUpWidth = popUp.style.width.substr(0,popUp.style.width.indexOf("px")); var popUpHeight = popUp.style.height.substr(0,popUp.style.height.indexOf("px")); popUp.style.left = ((gridWidth - popUpWidth)/2 + sender.get_element().offsetLeft).toString() + "px"; popUp.style.top = ((gridHeight - popUpHeight)/2 + sender.get_element().offsetTop).toString() + "px"; } </script> </telerik:RadCodeBlock> <telerik:RadGrid ID="gvForecast" runat="server" AutoGenerateEditColumn="True" oneditcommand="gvForecast_EditCommand" oncancelcommand="gvForecast_CancelCommand" onitemdatabound="gvForecast_ItemDataBound" Width="100%" HorizontalAlign="Center" onneeddatasource="gvForecast_NeedDataSource" Skin="Office2007" GridLines="Both" > <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu> <ClientSettings EnableRowHoverStyle="true"> <Scrolling AllowScroll="True" UseStaticHeaders="True" /> <ClientEvents OnPopUpShowing="PopUpShowing" /> <Selecting AllowRowSelect="true" /> </ClientSettings> <MasterTableView autogeneratecolumns="false" ItemStyle-VerticalAlign="Top" CommandItemDisplay="Top" EditMode="PopUp" Width="100%"> <ItemStyle VerticalAlign="Top"></ItemStyle> <CommandItemTemplate> </CommandItemTemplate> <NoRecordsTemplate> No Line items Exit for this Unit </NoRecordsTemplate> <CommandItemSettings ShowExportToPdfButton="true" ExportToPdfText="Export to Pdf"></CommandItemSettings> <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn> <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn> <Columns> <telerik:GridTemplateColumn UniqueName="venu"> <HeaderTemplate> <table id="tbVenu" width="100%" border="0"> <col width="100px" /><col width="200px" /><col width="40px" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="80px"/> <tr> <td colspan="3" align="center" bgcolor="#ccccff">WBS Details</td> <td colspan="1" align="center" bgcolor="#ffff99">Act</td> <td colspan ="11" align="center" bgcolor="#00cc00">Forecast</td> <td colspan="3" align="center" bgcolor="#ccffff">Other Details</td> </tr> <tr> <td>WBS</td><td>Description</td><td>Cost Element</td> <td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td> <td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td> <td>YTD</td><td>To Go Forecast</td><td>Total Forecast</td> </tr> </table> </HeaderTemplate> <ItemTemplate> <table id="tdItem" width="100%" border="0"> <col width="100px" /><col width="200px" /><col width="40px" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" /> <col width="40px" align="center" /><col width="40px" align="center" /><col width="80px"/> <tr> <td><%# DataBinder.Eval(Container.DataItem, "WBS") %></td> <TD><%# DataBinder.Eval(Container.DataItem, "Description") %></TD> <TD><%# DataBinder.Eval(Container.DataItem, "CE") %></TD> <TD align="center"><%# FormatAmount(Eval("Jan").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Feb").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Mar").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Apr").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("May").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Jun").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Jul").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Aug").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Sep").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Oct").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Nov").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("Dec").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("YTD").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("ToGoForecast").ToString()) %></TD> <TD align="center"><%# FormatAmount(Eval("TotalForecast").ToString()) %></TD> </tr> </table> </ItemTemplate> </telerik:GridTemplateColumn> </Columns> <%--<EditFormSettings> <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn> </EditFormSettings>--%> <EditFormSettings CaptionFormatString="Edit WBS: {0}" EditFormType="Template" CaptionDataField="Description" PopUpSettings-Height="200px" PopUpSettings-Width="1300px" PopUpSettings-Modal="true"> <FormTemplate> <table id="table1" width="1200px" border="0" align="center" style="table-layout:fixed" > <col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"> <col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"> <tr><td colspan="12"> </td></tr> <tr><td align="right">Cost Element</td><td> <asp:Label ID="Label1" runat="server" Text='<%# Bind("CE") %>'></asp:Label></td><td align="right">WBS Description</td><td colspan="9"> <telerik:RadTextBox ID="WBSDesc" runat="server" Text='<%# Bind("Description") %>' Width="80%" ReadOnly="true"> </telerik:RadTextBox></td></tr> <tr><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr> <tr> <td><telerik:RadNumericTextBox Type="Number" ReadOnly="true" BackColor="LightGray" ID="txtJan" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jan") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtFeb" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Feb") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtMar" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Mar") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtApr" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Apr") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtMay" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("May") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtJun" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jun") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtJul" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jul") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtAug" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Aug") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtSep" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Sep") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtOct" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Oct") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtNov" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Nov") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> <td><telerik:RadNumericTextBox Type="Number" ID="txtDec" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Dec") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td> </tr> <tr><td colspan="12"><font color="red" ><b>*</b> Greyed out textboxes are reflecting the actuals. </font></td></tr> <tr><td colspan="5" align="right"> <telerik:RadButton ID="btnUpdate" runat="server" Text="Update Forecast" OnClick="btnUpdate_Click" /> </td> <td colspan="2"> </td> <td colspan="5"><telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" CausesValidation="False" OnClick="btnCancel_Click" /> </td></tr> </table> </FormTemplate> <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn> <PopUpSettings Modal="True" Height="200px" Width="1300px"></PopUpSettings> </EditFormSettings> </MasterTableView> <FilterMenu EnableImageSprites="False"></FilterMenu> </telerik:RadGrid><p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </asp:Content>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css" >
.adjustedZIndex { z-index: 2500; }
</style>
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Maestra.master.cs" Inherits="sicoge.Maestra.Maestra" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Página sin tÃtulo</title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <link rel="Stylesheet" type="text/css" href="../common/master.css"/> <style type="text/css"> .style1 { width: 100%; } </style></head><body> <form id="form1" runat="server"> <div> <asp:LoginStatus ID="LoginStatus1" runat="server" LogoutPageUrl="~/webForms/login.aspx" LogoutAction="RedirectToLoginPage" onloggingout="LoginStatus1_LoggingOut" LoginText="Iniciar sesión." LogoutText="Cerrar sesión."/> <asp:LoginStatus ID="LoginStatus2" runat="server" LoginImageUrl="~/images/log_in.png" LoginText="" LogoutAction="RedirectToLoginPage" LogoutImageUrl="~/images/logout.png" LogoutPageUrl="~/webForms/login.aspx" LogoutText="" onloggingout="LoginStatus2_LoggingOut" /> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> </telerik:RadAjaxManager> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Default"> </telerik:RadSkinManager> <telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" Skin="Default" /></div> </form><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MisSolicitudes.aspx.cs" MasterPageFile="~/Maestra/Maestra.Master" Inherits="sicoge.webForms.MisSolicitudes" Title="Mis Solicitudes" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <link rel="Stylesheet" type="text/css" href="../common/Forms.css" /></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="GrdSolicitudes"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManagerProxy> <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> <telerik:RadGrid ID="GrdSolicitudes" runat="server" AllowFilteringByColumn="True" AllowPaging="True" DataSourceID="SqlDataSource1" GridLines="None" ShowGroupPanel="True" Culture="Spanish (Mexico)" Width="906px"><HeaderContextMenu EnableImageSprites="True" CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu> <GroupPanel Text="Arrastre y suelte aqui una columna para agrupar."> </GroupPanel><MasterTableView AutoGenerateColumns="False" DataKeyNames="IdSolicitud" DataSourceID="SqlDataSource1" NoMasterRecordsText="No hay registros para mostrar."><CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings><RowIndicatorColumn><HeaderStyle Width="20px"></HeaderStyle></RowIndicatorColumn><ExpandCollapseColumn><HeaderStyle Width="20px"></HeaderStyle></ExpandCollapseColumn> <Columns> <telerik:GridBoundColumn DataField="IdSolicitud" DataType="System.Int32" HeaderText="IdSolicitud" ReadOnly="True" SortExpression="IdSolicitud" UniqueName="IdSolicitud" Visible="False"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="Folio" HeaderText="Folio" SortExpression="Folio" UniqueName="Folio"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="IdSeccion" DataType="System.Int32" HeaderText="IdSeccion" SortExpression="IdSeccion" UniqueName="IdSeccion"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="IdEstadoSolicitud" DataType="System.Int32" HeaderText="IdEstadoSolicitud" SortExpression="IdEstadoSolicitud" UniqueName="IdEstadoSolicitud"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="FechaSolicitud" DataType="System.DateTime" HeaderText="FechaSolicitud" SortExpression="FechaSolicitud" UniqueName="FechaSolicitud"> </telerik:GridBoundColumn> <telerik:GridBoundColumn DataField="Observaciones" HeaderText="Observaciones" SortExpression="Observaciones" UniqueName="Observaciones"> </telerik:GridBoundColumn> </Columns></MasterTableView> <GroupingSettings GroupContinuedFormatString="... continuación de la pág anterior. " GroupContinuesFormatString=" Continua en la siguiente pág." GroupSplitDisplayFormat="Mostrando {0} de {1} elementos." /> <ClientSettings AllowDragToGroup="True"> <Selecting AllowRowSelect="True" /> <Scrolling AllowScroll="True" UseStaticHeaders="True" /> <Resizing AllowColumnResize="True" /> </ClientSettings> </telerik:RadGrid> </telerik:RadAjaxPanel>using System;using System.Collections;using System.Configuration;using System.Data;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.HtmlControls;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Xml.Linq;using Telerik.Web.UI;namespace sicoge.webForms{ public partial class MisSolicitudes : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { RadAjaxManager ajm = this.Master.FindControl("RadAjaxManager1") as RadAjaxManager; ajm.AjaxSettings.AddAjaxSetting(GrdSolicitudes, RadAjaxPanel1); } }}LÃnea 20: {LÃnea 21: RadAjaxManager ajm = this.Master.FindControl("RadAjaxManager1") as RadAjaxManager;LÃnea 22: ajm.AjaxSettings.AddAjaxSetting(GrdSolicitudes, RadAjaxPanel1);LÃnea 23: }LÃnea 24:<AppointmentTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Title") %>'></asp:Label> <asp:Label ID="Label4" runat="server" Text="Location:"></asp:Label> <asp:Label ID="Label2" runat="server" Text='<%# Eval("Location") %>'></asp:Label> <asp:Label ID="Label3" runat="server" Text="Time"></asp:Label> <asp:Label ID="Label5" runat="server" Text='<%# PDConvert.ToDateTime(Eval("Start")).ToString("t") + ((PDConvert.ToDateTimeN(Eval("Start"))==null) ? "" : " - " + PDConvert.ToDateTime(Eval("End")).ToString("t") )%>'></asp:Label></AppointmentTemplate>