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

Margin, Localization and Itemtemplate problems

3 Answers 376 Views

Grid

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

Bader asked on 26 Nov 2010, 12:54 PM

radgrid.JPG

Hello,

I have a problems with my radgrid control,(Plaese view the attached image and refer to the numbers).

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Vista" AllowPaging="True" PagerStyle-AlwaysVisible="true" PagerStyle-Position="TopAndBottom"

AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"

GridLines="None">

<MasterTableView DataKeyNames="PsPostID" ShowHeader="false"

TableLayout="Fixed"

DataSourceID="SqlDataSource1" Width="840px">

<NoRecordsTemplate></NoRecordsTemplate>

<Columns>

<telerik:GridTemplateColumn ItemStyle-Width="100%" ItemStyle-Height="100%" UniqueName="TemplateColumn" InitializeTemplatesFirst="false">

<ItemTemplate>

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

<tr style="height:50px; background-image:url('../../Design/BackGrounds/PostHeader.jpg');">

<td colspan="2">

<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" style="margin-left:-10px; vertical-align:top;">

<table cellpadding="0" cellspacing="0" style="height:100%;" width="100%">

<tr>

<td id="Td4" runat="server" align="right" style="height:10%;">

<asp:Label ID="Label6" runat="server" Text="<%$ Resources:Resource, ForumsPagesPostsTableSubjectLabel %>" ></asp:Label>

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

<a name='<%# Eval("PsPostID", "{0}") %>'> </a><br />

<asp:Label ID="Label10" runat="server" Text="<%$ Resources:Resource, ForumsPagesPostsTablePostedOnLabel %>" ></asp:Label>

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

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr valign="top">

<td style="width:20%;">

<br />

<asp:Image ID="Image2" ImageUrl="~/registration-login/avatars/Default.JPG" runat="server" />

<br /><br />

<asp:HyperLink ID="HyperLink2"

Text='<%# Eval("UUserName", "{0}") %>' NavigateUrl='<%# "~/registration-login/SPages/UserDetails.aspx?userId=" + Eval("UUserID", "{0}") %>' runat="server"></

asp:HyperLink>

<br />

<asp:Label ID="Label4" runat="server" Text="<%$ Resources:Resource, ForumsPagesPostsFirstColumnPostsLabel %>" ></asp:Label><asp:HyperLink ID="HyperLink1"

Text='<%# Eval("UPostCount", "{0}") %>' NavigateUrl='<%# "~/Forums/Pages/UserPosts.aspx?userId=" + Eval("UUserID", "{0}") %>' runat="server"></

asp:HyperLink>

</td>

<td style="width:80%;">

<asp:Panel ID="ContentPanel" runat="server" Width="100%" Height="100%" style="margin-left:-10px; vertical-align:top;">

<table cellpadding="0" cellspacing="0" style="height:100%;" width="100%">

<tr style="vertical-align:top;" >

<td id="Td2" runat="server" align="right" style="height:90%;">

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

<br /><br /><br /><br /><br /><br /><br /><br />

<table width="100%">

<tr>

<td id="Td3" style="width:100%;" runat="server" align="left" >

<asp:Label ID="PsPostIDSessionLabel" runat="server" Text='<%# Eval("PsPostID").ToString() %>' Visible="false"></asp:Label>

<asp:LinkButton ID="EditLinkButton" runat="server" Font-Size="12pt" Font-Bold="true" Font-Italic="true" onClick="EditLinkButtonClickHandler"

Text="<%$ Resources:Resource, ForumsPagesPostsSecondColumnEditHyperlink %>" Visible='<%# Convert.ToInt32(LoggedOnUserID) == Convert.ToInt32(Eval("UUserID", "{0}")) %>' ></

asp:LinkButton>

<asp:LinkButton ID="ReplyLinkButton" runat="server" Font-Size="12pt" Font-Bold="true" Font-Italic="true" onClick="ReplyLinkButtonClickHandler" Text="<%$ Resources:Resource, ForumsPagesPostsSecondColumnReplyHyperlink %>" ></asp:LinkButton>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right">

<hr />

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

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

</ItemTemplate>

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

<ItemStyle VerticalAlign="Top" />

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<PagerStyle Mode="NumericPages" ></PagerStyle>

</telerik:RadGrid>

1) How can change the localization of this sentence to arabic (Page 1 of 1,Items 1 to 2 of 2)
2) This rad has only one column (GridTemplateColumn column) which generates white margins (top, left, right and bottom), how can I remove them (I need margin = 0)?
3) As you can see in the left hand of the attached image there is a black vertical line which was generated by the GridTemplateColumn column. how can I remove it?

Please, I need your help,
It is appreciated to send me the modified code.

Regards,
Bader

3 Answers, 1 is accepted

answered on 01 Dec 2010, 01:27 PM

Hello Bader,

1. You can use PagerTextFormat - it will work in your case.

http://www.telerik.com/help/aspnet-ajax/grdusingpagettextformat.html

2. The problem is caused by the <table> inside the ItemTemplate, which inherits styles from the RadGrid skin. Use this CSS rule to remove the paddings of the inner cells:

.RadGrid_SkinName .rgRow td td,
.RadGrid_SkinName .rgAltRow td td
{
padding:0;
}

3. This problem should not occur in the latest RadControls versions. Use this CSS rule to prevent it in your case:

.RadGrid_SkinName .rgHeader:first-child,
.RadGrid_SkinName .rgRow>td:first-child,
.RadGrid_SkinName .rgAltRow>td:first-child
{
border-left-width:0 !important;
}

Kind regards,
Dimo
the Telerik team

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 16 Dec 2010, 04:23 PM

RadGridMargins.JPG

Hello,

Thank you for your reply,
I still have two problems. Please view the attached image.
1) As you can see there is a margins in the rad grid (selected with red color).
2) White border (selected with green color).

Here is my code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="PostsMasterPage.master.cs" Inherits="Forums_MasterPages_PostsMasterPage" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register src="~/Common/UserControls/GlobalizationUserControl.ascx" tagname="GlobalizationUserControl" tagprefix="uc3" %>

<%@ Register src="~/Common/UserControls/FooterMenuUserControl.ascx" tagname="FooterMenuUserControl" tagprefix="uc1" %>

<%@ Register src="~/Common/UserControls/HeaderWebUserControl.ascx" tagname="HeaderWebUserControl" tagprefix="uc2" %>

<%@ Register src="~/Common/Advr/HeaderWebUserControl.ascx" tagname="HeaderWebUserControl" tagprefix="uc4" %>

<%@ Register src="~/Common/Advr/MiddleAdvrWebUserControl.ascx" tagname="MiddleAdvrWebUserControl" tagprefix="uc5" %>

<%@ Register src="~/Common/Advr/RightSideAdvrsWebUserControl.ascx" tagname="RightSideAdvrsWebUserControl" tagprefix="uc6" %>

<%@ Register src="~/Common/Advr/FooterAdvrWebUserControl.ascx" tagname="FooterAdvrWebUserControl" tagprefix="uc7" %>

<%@ Register src="~/Common/UserControls/SingleMediaPlayerWebUserControl.ascx" tagname="SingleMediaPlayerWebUserControl" tagprefix="uc8" %>

<%@ Register src="~/Common/UserControls/PoetsPhotos/PoetsPhotosRotatorWebUserControl.ascx" tagname="PoetsPhotosRotatorWebUserControl" tagprefix="uc9" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" runat="server" dir="<%$ Resources:Resource, PageDirection %>" >

<head runat="server">

<title>Untitled Page</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

<style type="text/css">

.RadGrid_Vista .rgRow td td,

.RadGrid_Vista .rgAltRow td td

{

padding:0;

}

.RadGrid_Vista .rgHeader:first-child,

.RadGrid_Vista .rgRow>td:first-child,

.RadGrid_Vista .rgAltRow>td:first-child

{

border-left-width:0 !important;

}

</style>

</head>

<body id="body" style="margin-left:5; margin-top:5;">

<form id="form1" runat="server">

<div>

<a name="Top"></a>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<table align="center" border="0" cellspacing="1" cellpadding="1" style="background-color:White; width:952px;">

<tr>

<td align="center" valign="top" colspan="2">

<uc4:HeaderWebUserControl ID="HeaderWebUserControl2" runat="server" />

</td>

</tr>

<tr>

<td>

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

<tr>

<td align="right" valign="top" style="width:650px;">

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

<tr>

<td>

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

<tr>

<td style="border-left-style:solid; border-left-color:White; width:254px;">

<asp:ImageButton ID="ImageButton4" ImageUrl="~/Common/Img/Headers/HeaderImage.jpg" Width="254px" Height="180px" runat="server" />

</td>

<td style="width:394px;">

<uc9:PoetsPhotosRotatorWebUserControl ID="PoetsPhotosRotatorWebUserControl1"

runat="server" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td style="background-color:Red;">

<uc2:HeaderWebUserControl style="background-color:Red; position: static;" ID="HeaderWebUserControl3" runat="server" />

</td>

</tr>

</table>

</td>

<td align="right" valign="top" style="width:4px;">

</td>

<td align="left" valign="top" style="width:298px;">

<uc8:SingleMediaPlayerWebUserControl ID="SingleMediaPlayerWebUserControl1"

runat="server" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="center" valign="top" class="style1" colspan="2">

<uc5:MiddleAdvrWebUserControl ID="MiddleAdvrWebUserControl1" runat="server" />

</td>

</tr>

<tr>

<td>

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

<tr>

<td align="right" valign="top" style="width:106px;">

<uc6:RightSideAdvrsWebUserControl ID="RightSideAdvrsWebUserControl1"

runat="server" />

</td>

<td align="right" valign="top" style="width:846px;">

<asp:Panel ID="PostPanel" runat="server" style="margin:10px;">

<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">

</asp:ContentPlaceHolder>

<telerik:RadTreeView ID="PostsRadTreeView" Skin="Vista" runat="server">

<Nodes>

<telerik:RadTreeNode Font-Size="11pt" Expanded="true"

Text="<%$ Resources:Resource, ForumsMasterPagesPostsMasterPagePostsRadTreeViewFirstNode %>" NavigateUrl="../Pages/Threads.aspx">

<Nodes>

<telerik:RadTreeNode Font-Size="11pt" Expanded="true" ></telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeNode>

</Nodes>

</telerik:RadTreeView>

<br /><br /><br />

<script type="text/javascript">

function SetHandleDock(dock, args) {

dock.set_handle(document.getElementById("Handle_" + dock.get_id()));

}

</script>

<telerik:RadDockZone ID="UsersPostsRadDockZone" BorderColor="White" Style="margin-right:-10px;" runat="server" Width="820px">

<telerik:RadDock ID="RadDock1" Skin="Vista" Style="margin-right:5px;" runat="server" Width="100%" OnClientInitialize="SetHandleDock" DockMode="Docked" DockHandle="Grip" BorderColor="#9cb6c5" BorderWidth="1px" EnableRoundedCorners="false">

<Commands/>

<ContentTemplate>

<asp:Panel ID="PostsHeaderPanel" style="margin-top:10px; height:auto;" runat="server">

<br />

<asp:Label ID="MetaTitleLabel" Font-Size="14pt" Font-Bold="true" runat="server" ></asp:Label>

<br/><br />

<asp:Label ID="SortLabel" runat="server" Visible="false" Text="<%$ Resources:Resource, ForumsMasterPagesPostsMasterPagePostsSortLabel %>"></asp:Label>

<telerik:RadComboBox ID="DateSortRadComboBox" Visible="false" Runat="server"

Width="180px" AutoPostBack="true" OnSelectedIndexChanged="DateSortRadComboBox_SelectedIndexChanged" >

<Items>

<telerik:RadComboBoxItem

Text="<%$ Resources:Resource, ForumsMasterPagesPostsMasterPageDateSortRadComboBoxOldestToNewest %>" Value="OldestToNewest" runat="server" />

<telerik:RadComboBoxItem

Text="<%$ Resources:Resource, ForumsMasterPagesPostsMasterPageDateSortRadComboBoxNewestToOldest %>" Value="NewestToOldest" runat="server" />

</Items>

</telerik:RadComboBox>

</asp:Panel>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

<asp:Label ID="ThreadIDLabel" Visible="false" runat="server" ></asp:Label>

<asp:SqlDataSource ID="SqlDataSource1"

ConnectionString="<%$ ConnectionStrings:ZajalCenterConnectionString %>"

SelectCommand="F_AllPosts_GetPosts" SelectCommandType="StoredProcedure" runat="server">

<SelectParameters>

<asp:ControlParameter Type="Int64" Name="ThThreadID" ControlID="ThreadIDLabel" />

</SelectParameters>

</asp:SqlDataSource>

<telerik:RadGrid ID="PostsRadGrid" runat="server" Skin="Vista" CssClass="RadGrid_Vista" AllowPaging="True" PagerStyle-AlwaysVisible="true" PagerStyle-Position="TopAndBottom"

AllowSorting="True" Width="820px" AutoGenerateColumns="False" DataSourceID="SqlDataSource1"

GridLines="None">

<MasterTableView DataKeyNames="PsPostID" ShowHeader="false"

TableLayout="Fixed" CssClass="RadGrid_Vista"

DataSourceID="SqlDataSource1" Width="820px">

<NoRecordsTemplate></NoRecordsTemplate>

<Columns>

<telerik:GridTemplateColumn ItemStyle-Width="100%" ItemStyle-Height="100%" UniqueName="TemplateColumn" InitializeTemplatesFirst="false">

<ItemTemplate>

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

<tr style="height:50px; background-image:url('../../Design/BackGrounds/PostHeader.jpg');">

<td colspan="2">

<asp:Panel ID="Panel1" runat="server" Width="100%" Height="100%" style="margin-left:-10px; vertical-align:top;">

<table cellpadding="0" cellspacing="0" style="height:100%;" width="100%">

<tr>

<td id="Td4" runat="server" align="right" style="height:10%;">

<asp:Label ID="Label6" runat="server" Text="<%$ Resources:Resource, ForumsPagesPostsTableSubjectLabel %>" ></asp:Label>

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

<a name='<%# Eval("PsPostID", "{0}") %>'> </a><br />

<asp:Label ID="Label10" runat="server" Text="<%$ Resources:Resource, ForumsPagesPostsTablePostedOnLabel %>" ></asp:Label>

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

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr valign="top">

<td style="width:20%;">

<br />

<asp:Image ID="Image2" ImageUrl="~/registration-login/avatars/Default.JPG" runat="server" />

<br /><br />

<asp:HyperLink ID="HyperLink2"

Text='<%# Eval("UUserName", "{0}") %>' NavigateUrl='<%# "~/registration-login/SPages/UserDetails.aspx?userId=" + Eval("UUserID", "{0}") %>' runat="server"></

asp:HyperLink>

<br />

<asp:Label ID="Label4" runat="server" Text="<%$ Resources:Resource, ForumsPagesPostsFirstColumnPostsLabel %>" ></asp:Label><asp:HyperLink ID="HyperLink1"

Text='<%# Eval("UPostCount", "{0}") %>' NavigateUrl='<%# "~/Forums/Pages/UserPosts.aspx?userId=" + Eval("UUserID", "{0}") %>' runat="server"></

asp:HyperLink>

</td>

<td style="width:80%;">

<asp:Panel ID="ContentPanel" runat="server" Width="100%" Height="100%" style="margin-left:-10px; vertical-align:top;">

<table cellpadding="0" cellspacing="0" style="height:100%;" width="100%">

<tr style="vertical-align:top;" >

<td id="Td2" runat="server" align="right" style="height:90%;">

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

<br /><br /><br /><br /><br /><br /><br /><br />

<table width="100%">

<tr>

<td id="Td3" style="width:100%;" runat="server" align="left" >

<asp:Label ID="PsPostIDSessionLabel" runat="server" Text='<%# Eval("PsPostID").ToString() %>' Visible="false"></asp:Label>

<asp:LinkButton ID="EditLinkButton" runat="server" Font-Size="12pt" Font-Bold="true" Font-Italic="true" onClick="EditLinkButtonClickHandler"

Text="<%$ Resources:Resource, ForumsPagesPostsSecondColumnEditHyperlink %>" Visible='<%# Convert.ToInt32(RegistrationLoginDB.GetLoggedOnUser(Page.User.Identity.Name)) == Convert.ToInt32(Eval("UUserID", "{0}")) %>' ></

asp:LinkButton>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right">

<hr />

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

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

</ItemTemplate>

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

<ItemStyle VerticalAlign="Top" />

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</asp:Panel>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td align="right" valign="top" class="style2" colspan="2">

<uc1:FooterMenuUserControl ID="FooterMenuUserControl1" runat="server" />

</td>

</tr>

<tr>

<td align="center" valign="top" class="style2" colspan="2">

<uc7:FooterAdvrWebUserControl ID="FooterAdvrWebUserControl1" runat="server" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Please, What I should add in oeder to remove the margins and the white border?
It is appreciated to send me the modified code.

Regards,
Bader

answered on 21 Dec 2010, 05:28 PM

Hello Bader,

This CSS code should work with your scenario and if I understand you correctly, should lead to the desired result:

.RadGrid_Vista table.rgMasterTable td.PostImageGradient

{

padding:0;

}

.RadGrid_Vista .rgRow td td,

.RadGrid_Vista .rgAltRow td td

{

padding:0;

border:0;

}

.RadGrid_Vista .rgHeader:first-child,

.RadGrid_Vista .rgRow>td:first-child,

.RadGrid_Vista .rgAltRow>td:first-child

{

border-left-width:0 !important;

}

In addition, please inspect the following demo, which shows how to remove cell borders and cell paddings from the RadGrid template column and apply custom paddings and borders to the cells inside the template.

The white border comes from the RadGrid styles and can be removed with the CSS code above, or by applying a zero border-width with an inline style to the corresponding cell.

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

    {

        DataTable dt = new DataTable();

        DataRow dr;

        int colsNum = 2;

        int rowsNum = 20;

        string colName = "Column";

        for (int j = 1; j <= colsNum; j++)

        {

            dt.Columns.Add(String.Format("{0}{1}", colName, j));

        }

        for (int i = 1; i <= rowsNum; i++)

        {

            dr = dt.NewRow();

            for (int k = 1; k <= colsNum; k++)

            {

                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

            }

            dt.Rows.Add(dr);

        }

        (sender as RadGrid).DataSource = dt;

    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

.RadGrid table.rgMasterTable td.noPad

{

    padding:0;

    border-width:0;

}

.RadGrid .rgMasterTable .myTable

{

    width:100%;

}

.RadGrid .rgMasterTable .myTable td

{

    padding:4px 7px;

    border:1px solid red;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<p>The red-bordered cells belong to the table inside the template column cells.

The template columns cells have no padding. The inner table cells have padding.</p>

<telerik:RadGrid

    ID="RadGrid1"

    runat="server"

    AutoGenerateColumns="false"

    Skin="Vista"

    AllowPaging="true"

    OnNeedDataSource="RadGrid_NeedDataSource">

    <MasterTableView>

        <Columns>

            <telerik:GridTemplateColumn HeaderText="my template column">

                <ItemStyle CssClass="noPad" />

                <ItemTemplate>



                    <table class="myTable" cellspacing="0">

                        <tr>

                            <td><%# Eval("Column1") %></td>

                            <td><%# Eval("Column2") %></td>

                        </tr>

                    </table>



                </ItemTemplate>

            </telerik:GridTemplateColumn>

        </Columns>

    </MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

Best wishes,
Dimo
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.