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" >
<MasterTableView Width="100%" AutoGenerateColumns="false">
<Columns>
<telerik:GridTemplateColumn UniqueName="TemplateColumn1">
<HeaderTemplate>
<table id="Table1" cellspacing="0" cellpadding="0" width="300" border="0">
<tr><td align="center"><b>Test Template</b></td></tr>
</
table>
</HeaderTemplate>
<ItemTemplate>
<table id="Table2" cellspacing="0" cellpadding="0" width="300" border="0">
<tr><td ><%# DataBinder.Eval(Container.DataItem, "FirstName") %></td></tr>
<tr><td ><%# DataBinder.Eval(Container.DataItem, "LastName") %></td></tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
<PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>
3 Answers, 1 is accepted
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
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
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