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

HTML table formatting in GridTemplateColumn

2 Answers 295 Views

Grid

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

aks asked on 09 Nov 2011, 08:09 PM

Screenshot1.JPG

I have a customized gridtemplatecolumn. I have an HTML table in the gridtemplatecolumn. I would like the table to fill the entire grid cell so that the lines touch the lining of the grid cell. Please see screenshot to see what it currently looks like. The "Open Items by Age" column contains the table. I am also attaching the aspx code. Thanks in advance.

<telerik:RadGrid ID="grdCurrentandPrior" runat="server" AllowRowResize="True" AllowSorting="True" AutoGenerateColumns="False"

GridLines="Horizontal" Skin="Web20" Style="margin-right: 0px" Width="897px" Height="252px"

OnNeedDataSource="grdCurrentandPrior_NeedDataSource" OnExcelMLExportRowCreated="grdCurrentandPrior_ExcelMLExportRowCreated"

OnSortCommand="grdCurrentandPrior_SortCommand">

<exportsettings filename="OpenItemsCurrentInventory" ignorepaging="True" openinnewwindow="True"

exportonlydata="true" excel-format="ExcelML">

</exportsettings>

<mastertableview commanditemdisplay="Bottom" allownaturalsort="false" usealldatafields="true">

<CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false"

ShowRefreshButton="false" />

<Columns>

<telerik:GridTemplateColumn DataField="Assignee" HeaderText="Assignee" UniqueName="Assignee"

SortExpression="Assignee">

<HeaderStyle Font-Bold="True" Width="150px" HorizontalAlign="Center" Font-Names="Arial" />

<ItemTemplate>

<asp:Label ID="lbAssignee" runat="server" Text='<%# Eval("Assignee") %>'></asp:Label>

</ItemTemplate>

<FooterStyle HorizontalAlign="Right" Font-Bold="true" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="State" HeaderText="State" UniqueName="State"

SortExpression="State" Visible="false">

<HeaderStyle Font-Bold="True" Width="150px" HorizontalAlign="Center" Font-Names="Arial" />

<ItemTemplate>

<asp:Label ID="lbState" runat="server" Text='<%# Eval("State") %>'></asp:Label>

</ItemTemplate>

<FooterStyle HorizontalAlign="Right" Font-Bold="true" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="JurisdictionCount" HeaderText="Jurisdictions"

UniqueName="JurisdictionCount" SortExpression="JurisdictionCount">

<HeaderStyle Font-Bold="True" Width="80px" HorizontalAlign="Center" Font-Names="Arial" />

<ItemTemplate>

<asp:Label ID="lbJurisdiction" runat="server" Text='<%# Eval("JurisdictionCount", "{0:N0}")%>'></asp:Label>

</ItemTemplate>

<ItemStyle HorizontalAlign="Right" ForeColor="Black" />

<FooterStyle HorizontalAlign="Right" Font-Bold="true" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="OpenItemsByAge" >

<HeaderTemplate>

<table id="Table1" cellspacing="0" cellpadding="0" width="100%" border="0" >

<tr>

<td colspan="3" align="center">

<b>Open Items by Age</b>

</td>

</tr>

<tr>

<td align="center" style="width: 33%">

<asp:LinkButton CssClass="Button" ID="btnPrioOpen" Text="Prior"

CommandName='Sort' CommandArgument='OpenItemsCountPrior' runat="server" /></td>

<td align="center" style="width: 33%">

<asp:LinkButton CssClass="Button" ID="btnLastMonth" Text="Last Month"

CommandName='Sort' CommandArgument='OpenItemsCountLastMonth' runat="server" /></td>

<td align="center" style="width: 34%">

<asp:LinkButton CssClass="Button" ID="btnCurrentOpen" Text="Current"

CommandName='Sort' CommandArgument='OpenItemsCountCurrent' runat="server" /></td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate >

<table id="Table2" cellspacing="0" cellpadding="0" width="100%" border="0" style="margin: 0px 0px 0px 0px;" >

<tr>

<td align="right" width="33%" style="border-bottom-color:White; border-left-color:White">

<%# Eval("OpenItemsCountPrior", "{0:N0}") %>

</td>

<td align="right" width="33%" style="border-bottom-color:White">

<%# Eval("OpenItemsCountLastMonth", "{0:N0}")%>

</td>

<td align="right" width="34%" style="border-bottom-color:White">

<%# Eval("OpenItemsCountCurrent", "{0:N0}") %>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="TotalRemainingItems" HeaderText="Items Left to Pay"

UniqueName="TotalRemainingItems" SortExpression="TotalRemainingItems">

<HeaderStyle Font-Bold="True" Width="95px" HorizontalAlign="Center" Font-Names="Arial" />

<ItemTemplate>

<asp:Label ID="lblTotalRemain" runat="server" Text='<%# Eval("TotalRemainingItems", "{0:N0}") %>'></asp:Label>

</ItemTemplate>

<ItemStyle HorizontalAlign="Right" ForeColor="Black" />

<FooterStyle HorizontalAlign="Right" Font-Bold="true" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="CompleteCount" HeaderText="Complete"

UniqueName="CompleteCount" SortExpression="CompleteCount">

<HeaderStyle Font-Bold="True" Width="80px" HorizontalAlign="Center" Font-Names="Arial" />

<ItemTemplate>

<asp:Label ID="lblCompleteCount" runat="server" Text='<%# Eval("CompleteCount", "{0:N0}") %>'></asp:Label>

</ItemTemplate>

<ItemStyle HorizontalAlign="Right" ForeColor="Black" />

<FooterStyle HorizontalAlign="Right" Font-Bold="true" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="PercentComplete" HeaderText="% Complete" UniqueName="clmPctComplete"

SortExpression="PercentComplete">

<HeaderStyle Font-Bold="True" Width="85px" HorizontalAlign="Center" Font-Names="Arial" />

<ItemTemplate>

<asp:Label ID="lblPctComplete" runat="server" Text='<%# Eval("PercentComplete", "{0:N2}%")%>'></asp:Label>

</ItemTemplate>

<ItemStyle HorizontalAlign="Right" ForeColor="Black" />

<FooterStyle HorizontalAlign="Right" Font-Bold="true" />

</telerik:GridTemplateColumn>

</Columns>

</mastertableview>

<headerstyle borderstyle="Solid" />

<clientsettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</clientsettings>

</telerik:RadGrid>

2 Answers, 1 is accepted

Accepted

answered on 10 Nov 2011, 06:22 AM

result.png

Hello aks,

<style type="text/css">

.templatecolumnStyle

{

padding:0px !important;

}

</style>

<telerik:GridTemplateColumn Visible="true">

<ItemTemplate>

<table id="Table2" cellspacing="0" cellpadding="0" width="100%" border="0" style="margin: 0px 0px 0px 0px;">

<tr>

<td align="right" width="33%" style="border-bottom-color: White; border-left-color: White;">

123

</td>

<td align="right" width="33%" style="border-bottom-color: White">

456

</td>

<td align="right" width="34%" style="border-bottom-color: White">

789

</td>

</tr>

</table>

</ItemTemplate>

<ItemStyle CssClass="templatecolumnStyle" />

</telerik:GridTemplateColumn>

Thanks,
Jayesh Goyani