asked on

How to Set padding-left and padding-right in GridView Cells

Greetings,

I am developing a site in ASP.NET / VB.NET using themes and skins. I would like to specify padding-left and padding-right values for cells in a GridView. I have been able to do it by specifying the CssClass in <ItemStyle> tags for each column in each GridView, but I want to be able to do it globally for all GridViews on the entire site, without having to put the <ItemStyle> tags on every GridView column on every page. The GridView.skin file doesn't accept an <ItemStyle> tag, and I cannot figure out another easy way to apply that style to every column in every GridView on the site.

How can I set padding-left and padding-right for each column in every GridView on the site?

Thanks in advance,

Jim Fennell

divyeshhdoshi

there is a CellPadding and CellSpacing Property for Gridview in Asp.net
It will set CellSpacing and CellPadding property of gridview Cells

Regards,
Divyesh Doshi

lakshmidurga

This is how you can set cellpadding and cellspacing to your gridview.

<asp:GridView Width="100%" CellPadding="0"
CellSpacing="0" BorderStyle="none" ID="gvApps" runat="server"
AllowPaging="false" PageSize="1">

lakshmidurga

Refer this article, for breif description

http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.cellspacing.aspx

jfennell

ASKER

Hi, Thanks for the quick response. The problem with using CellPadding or CellSpacing is that it applies the spacing to both the horizontal AND the vertical. I want to apply additional padding only on the left and right sides of each cell in the gridview. If I set the CellPadding to 5, that gives me good spacing on the sides but there is too much space between the lines. I'm looking for a way add padding just to the left and right without adding any padding to the top and bottom.

Thanks again,

~ Jim Fennell

lakshmidurga

Refer this site for more info on Paddingleft and paddingright
http://www.dotnetbips.com/articles/f1baaf4e-ae5a-46d6-b409-03e203ea98d9.aspx

jfennell

ASKER

Thanks lakshmidurga, that will accomplish what I want to do with the padding, but I still have to set the CssClas in the ItemStyle on every Gridview column on every page on the site. I was hoping to find a solution that could be implemented in one place, the way the the combination of .skin file and style sheet works for setting other styles. Attached is a copy of the GridView.skin file I use in the App_Themes folder that applies those CssClass settings to every GridView throughout the site.

If there isn't a way to set the CssClass globally for ItemStyles on every GridView, it's definitely something that should be added to the .NET Framework.

~ Jim Fennell

<asp:GridView runat="server" CssClass="DataWebControlStyle">
	<AlternatingRowStyle CssClass="AlternatingRowStyle" />
	<RowStyle CssClass="RowStyle" />
	<HeaderStyle CssClass="HeaderStyle" />
	<FooterStyle CssClass="FooterStyle" />
	<SelectedRowStyle CssClass="SelectedRowStyle" />
	<EditRowStyle CssClass="EditRowStyle" />
	<PagerStyle CssClass="PagerRowStyle" />
	<PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

Open in new window

ASKER CERTIFIED SOLUTION

lakshmidurga

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lakshmidurga

Refer this,
http://discuss.joelonsoftware.com/default.asp?dotnet.12.323600.2

Please observe this code,in the gridview_rowdatabound,
using codebehind they have set the itemsyle.So u need to go to each row and mention the css clas repeat through each row
and then each column
set ur properties

Protected Sub GridView1_RowDataBound(ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
    Dim drv As System.Data.DataRowView
    drv = CType(e.Row.DataItem, System.Data.DataRowView)
    If e.Row.RowType = DataControlRowType.DataRow Then
      If drv IsNot Nothing Then
        Dim catName As String = drv(1).ToString()
        Dim catNameLen As Integer = catName.Length
        If catNameLen > widestData Then
          widestData = catNameLen
          GridView1.Columns(2).ItemStyle.Width = _
              widestData * 30
          GridView1.Columns(2).ItemStyle.Wrap = False
        End If
      End If
    End If
End Sub

Open in new window

jfennell

ASKER

Thank you so much. I hadn't thought about a compound class definition in the CSS. Specifying

.RowStyle TD { padding: 1px 5px 1px 5px; }
.AlternatingRowStyle TD { padding: 1px 5px 1px 5px; |

in the style sheet did the trick.

Peace,

~ Jim Fennell