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

HTML table formatting in GridTemplateColumn

1 Answer 251 Views

Grid

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

aks asked on 08 Nov 2011, 09:58 PM

Screenshot1.JPG

I have a customized gridtemplatecolumn. I would like the table to take up the 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.

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

1 Answer, 1 is accepted

answered on 11 Nov 2011, 03:45 PM

SupportPage.zip

Hi Aks,

This space above the borders become from the padding of table cells in grid. You can easy override this style by setting custom class and use the following CSS rule:

div.RadGrid td.templateCell

{

padding: 0;

}

div.RadGrid td.templateCell table

{

height: 40px;

}

Also you can find a sample web site in the attached file.

All the best,
Galin
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now