Add Padding To One Column Only Of ASP:GridView

Question

User974100899 posted

I am generating an asp:gridview with syntax like below.  For my DataField="One", I want to add in 9pt leading space.  How would this one column be modified to add in the spacing?

 <div id="dgvOne" >

    <asp:GridView ID="GridView2" style="width:100%;overflow:scroll;" runat="server" CssClass="Grid" Font-Names="Tahoma" Font-Size="9px" AutoGenerateColumns="false" Font-Bold="True" >

        <HeaderStyle BackColor="#ffbf00" />

        <Columns>

            <asp:BoundField DataField="One" HeaderText="One"> <ItemStyle HorizontalAlign="Center"/></asp:BoundField>

            <asp:BoundField DataField="Two" HeaderText="Two"> <ItemStyle HorizontalAlign="Center"/></asp:BoundField>

            <asp:BoundField DataField="Three" HeaderText="Three"> <ItemStyle HorizontalAlign="Center"/></asp:BoundField>

            <asp:BoundField DataField="Four" HeaderText="Four"> <ItemStyle HorizontalAlign="Center"/></asp:BoundField>

            <asp:BoundField DataField="Five" HeaderText="Five"> <ItemStyle HorizontalAlign="Center"/></asp:BoundField>

            <asp:BoundField DataField="Six" HeaderText="Six"> <ItemStyle HorizontalAlign="Center"/></asp:BoundField>

        </Columns>

    </asp:GridView>

</div>

Answer 1

User2103319870 posted

For my DataField="One", I want to add in 9pt leading space.  How would this one column be modified to add in the spacing

You can use RowDatabound to add padding space to cell in gridview like below

protected void GridView5_RowDataBound(object sender, GridViewRowEventArgs e)
        {

            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Cells[0].Style.Add("padding-left", "9pt");
            }
        }

You might need to change the Horizontal-Align="Center"  to make it look like padding has been applied . 

 <asp:BoundField DataField="One" HeaderText="One" HeaderStyle-CssClass="hidden-field" HeaderStyle-Width="16%">
                        <ItemStyle  Width="16%" />
                    </asp:BoundField>

Answer 2

User974100899 posted

@a2h - If possible I need to do such in css.  I can remove the align-center from the asp code to make it easier.

Answer 3

User2103319870 posted

If possible I need to do such in css. 

Oh sorry I missed it. Yes you can ofcourse do that with css

Add a css style like this

 <style>
                .cellOneCellPadding {
                    padding-left: 9pt !important;
                }
            </style>

THen apply css style like below

 <asp:BoundField DataField="One" HeaderText="One" HeaderStyle-CssClass="hidden-field" HeaderStyle-Width="16%">
                        <ItemStyle Width="16%" CssClass="cellOneCellPadding" />
                    </asp:BoundField>

By this way you dont need to use RowDatabound event logic

Answer 4

User974100899 posted

LiarLiarPantsOnFire

If possible I need to do such in css. 

Oh sorry I missed it. Yes you can ofcourse do that with css

Add a css style like this

 <style>
                .cellOneCellPadding {
                    padding-left: 9pt !important;
                }
            </style>

THen apply css style like below

 <asp:BoundField DataField="One" HeaderText="One" HeaderStyle-CssClass="hidden-field" HeaderStyle-Width="16%">
                        <ItemStyle Width="16%" CssClass="cellOneCellPadding" />
                    </asp:BoundField>

By this way you dont need to use RowDatabound event logic

This is not adding the padding in my case?

Answer 5

User2103319870 posted

LiarLiarPantsOnFire

This is not adding the padding in my case?

Can you press CTRL + F5 to clear the cache of browser. 

I tested the code before posting and it working fine with our any problem

see the demo below