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

GridTemplateColumn - unwanted border

3 Answers 151 Views

Grid

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

Voss Grose asked on 11 Feb 2009, 06:52 PM

I've seen a few similar posts, but not this exact issue:

I'm getting some un-wanted vertical borders when using a GridTemplateColumn. I'm not sure if I just have some setting wrong or maybe just missing an a type.

I have a screen shot, but I'm unsure of how to insert that into the thread.

Here is my RadGrid code:

<telerik:RadGrid ID="RadGrid1" Skin="Forest" Width="97%" AllowSorting="True" EnableAJAX="True"

AllowPaging="True" PageSize="25" runat="server" OnSortCommand="RadGrid1_SortCommand" OnPageIndexChanged="RadGrid1_PageIndexChanged"

AllowFilteringByColumn="false" GridLines="None" >

<telerik:GridTemplateColumn UniqueName="TemplateColumn1">

<tr><td align="center"><b>Test Template</b></td></tr>

table>

</HeaderTemplate>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

3 Answers, 1 is accepted

answered on 12 Feb 2009, 10:30 AM

Hi Voss,

I guess that is caused due to the default vertical border of the skin(Forest). Give a try with the following css style and see if it helps.

Css:

    
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css" > 
        
                  .GridRow_Forest td, 
        
                  .GridAltRow_Forest td, 
        
                   { 
        
                    border-width:0px !important; 
        
                  } 
        
                </style> 
        
            </head>

Thanks
Shinu

answered on 27 Feb 2012, 10:10 AM

TableBorder.png

Hi,

I have a similar problem. The table border is displayed only by clicking Edit (By loaded the the webpage, the border in not displayed).

An attached screen-shot is displayed.

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<style type="text/css">

.GridRow_Default td,

.GridAltRow_Default td,

{

border-width:0 !important;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<telerik:RadAjaxPanel runat="server" ID="MngRadAjaxPanel" >

<telerik:RadGrid ID="MngRadGrid" runat="server" GridLines="None" AllowPaging="True" CssClass="RadGrid" Skin="Default"

AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true" OnPreRender="MngRadGrid_PreRender" Width="780px"

OnNeedDataSource="MngRadGrid_NeedDataSource" OnUpdateCommand="MngRadGrid_UpdateCommand"

OnDeleteCommand="MngRadGrid_DeleteCommand">

<MasterTableView Width="780px" CommandItemDisplay="None" Dir="LTR" DataKeyNames="CID">

<AlternatingItemStyle HorizontalAlign="Left" VerticalAlign="Top" />

<ItemStyle VerticalAlign="Top" HorizontalAlign="Left" />

<HeaderStyle HorizontalAlign="Left" />

<Columns>

<telerik:GridEditCommandColumn

EditText="<%$ Resources:TelerikResource, RadGridEditColumnText %>" ItemStyle-Width="7%" UniqueName="EditCommandColumn1" >

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn UniqueName="CID" HeaderText="ID" ItemStyle-Width="7%" DataField="CID">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="General" HeaderText="" ItemStyle-Width="86%" >

<ItemTemplate>

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

<tr style="height:55px;" >

<td colspan="4" width="*" align="right">

<table border="0" cellpadding="0" cellspacing="0" width="350px">

<tr valign="top">

<td width="25" align="right">

<asp:Label ID="ByLabel" runat="server" SkinID="FieldNameLabel" Text="By:"></asp:Label>

</td>

<td width="150" align="right">

<asp:Label ID="LastEditedByNameDataLabel" SkinID="NormalText" runat="server" Text='<%# Eval("LastEditedByName") %>'></asp:Label>

</td>

<td width="25" align="right">

<asp:Label ID="DateLabel" runat="server" SkinID="FieldNameLabel" Text="Date:"></asp:Label>

</td>

<td width="150" align="right">

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

</td>

</tr>

</table>

</td>

</tr>

<tr style="height:30px;">

<td width="120">

<asp:Label ID="ATypeLabel" runat="server" SkinID="FieldNameLabel" Text="Cycle Type:"></asp:Label>

</td>

<td width="230">

<asp:Label ID="ATypeDataLabel" runat="server" SkinID="NormalText" Text='<%# Eval("Type") %>' ></asp:Label>

</td>

<td width="100">

<asp:Label ID="DateTimeLabel" runat="server" SkinID="FieldNameLabel" Text="Date and Time:"></asp:Label>

</td>

<td width="*">

<asp:Label ID="DateTimeDataLabel" runat="server" SkinID="NormalText" Text='<%# Eval("CDateTime") %>' ></asp:Label>

</td>

</tr>

<tr style="height:30px;">

<td width="120">

<asp:Label ID="EnvLabel" runat="server" SkinID="FieldNameLabel" Text="Env:"></asp:Label>

</td>

<td width="230">

<asp:Label ID="EnvDataLabel" runat="server" SkinID="NormalText" Text='<%# Eval("Env") %>' ></asp:Label>

</td>

<td width="100">

<asp:Label ID="BLabel" runat="server" SkinID="FieldNameLabel" Text="Br:"></asp:Label>

</td>

<td width="*">

<asp:Label ID="BDataLabel" runat="server" SkinID="NormalText" Text='<%# Eval("Br") %>' ></asp:Label>

</td>

</tr>

<tr style="height:30px;">

<td width="120">

<asp:Label ID="ClLabel" runat="server" SkinID="FieldNameLabel" Text="Cl:"></asp:Label>

</td>

<td width="230">

<asp:Label ID="ClDataLabel" runat="server" SkinID="NormalText" Text='<%# Eval("Cl") %>' ></asp:Label>

</td>

<td width="100">

<asp:Label ID="StatusLabel" runat="server" SkinID="FieldNameLabel" Text="Status:"></asp:Label>

</td>

<td width="*">

<asp:Label ID="StatusDataLabel" runat="server" SkinID="NormalText" Text='<%# Eval("Status") %>' ></asp:Label>

</td>

</tr>

<tr style="height:55px;" >

<td valign="top" width="120">

<div style="margin-top:9px;" >

<asp:Label ID="CmntLabel" runat="server" SkinID="FieldNameLabel" Text="Comment:"></asp:Label>

</div>

</td>

<td colspan="3" width="*">

<asp:Label ID="CmntDataLabel" runat="server" SkinID="NormalText" Text='<%# Eval("Comment") %>' ></asp:Label>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn

ConfirmText="<%$ Resources:TelerikResource, RadGridDeleteColumnConfirmText %>" ConfirmDialogType="RadWindow" ItemStyle-Width="7%"

ConfirmTitle="<%$ Resources:TelerikResource, RadGridDeleteColumnConfirmTitle %>" ButtonType="ImageButton" CommandName="Delete" Text="<%$ Resources:TelerikResource, RadGridDeleteColumnText %>"

UniqueName="DeleteColumn">

<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings UserControlName="SubUserControl.ascx" EditFormType="WebUserControl">

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

</asp:Content>

Can you please, explain to me how can I hide that borders?

Regards,
Bader

answered on 01 Mar 2012, 01:04 PM

Hello Bader,

The CSS rule provided by Shinu in invalid. There is a comma only between selectors, but you should remove the last one.

Also, I guess these borders come from your custom layout and CSS, which you have not provided. However, usually the edit template is inside <div class="rgEditForm" />, therefore you should use similar to the following CSS rule

div.RadGrid .rgEditForm td

{

border: 0 none;

}

I highly recommend you to use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them is very easy to inspect the elements and to see the styles that they have. After researching the styles of elements you can add or edit their rules.

Please refer to this blog post for more information.

I hope this helps.

Regards,
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.