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

Header and Item columns not aligning.

3 Answers 203 Views

Grid

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

Venu asked on 01 Mar 2011, 01:27 PM

3-1-2011-5-34-13-AM.png

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="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="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">

<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>

3 Answers, 1 is accepted

Accepted

answered on 07 Mar 2011, 01:23 PM

Demo1.rar

Hello Venu,

Please test the attached demo and let me know if you need further assistance.

Best regards,
Daniel
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!

answered on 11 Mar 2011, 11:49 AM

Hello Venu,

I'm afraid that there is no straightforward way to customize the multi-header columns in such a complex scenario. A possible approach for implementing this functionality would be to create the template columns (and the whole RadGrid) programmatically and dynamically build the desired output with server-side code.
Creating the grid entirely in the code behind
Creating template columns programmatically
Programmatic creation on PageInit

Regards,
Daniel
the Telerik team