locked
aligning headers with content in gridview RRS feed

  • Question

  • User351619809 posted

     I have a very simple gridview like so:

    enter image description here

    I want to align header with the content so shirts should come underneath header Item. Description needs to moved to the left and price 336 should be moved to the right. I want it something like this:

    enter image description here

    Below is my code:

    <asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" GridLines="None">
                <Columns>
                    <asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-Width="35%"  />
                    <asp:TemplateField HeaderText="Description" HeaderStyle-Font-Bold="true" ItemStyle-Width="35%"  >
                        <ItemTemplate>
                            <asp:Label ID="lblDesc" runat="server" Text='<%# Eval("desc") %>' /><br />
                            &nbsp;Requested By: &nbsp;<asp:Label ID="lblDesc1" runat="server" Text='<%# Eval("RequestedBy") %>' />
                        </ItemTemplate>
    
                    </asp:TemplateField>
                       <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="10%" >
                        <ItemTemplate>
                                <input type="number" id="txtQuantity" value='<%# Eval("Quantity") %>'   style="text-align:right;" data-mini="true" min="1" max="100" runat="server"/>
                        </ItemTemplate>
                    </asp:TemplateField>
                       <asp:TemplateField HeaderText="Price" ItemStyle-Width="100%" HeaderStyle-HorizontalAlign="Right">
                        <ItemTemplate>
                                <asp:Label  ID="lblPrice" runat="server" Text= '<%# Int32.Parse(Eval("Quantity").ToString()) * 28 %>' />
                        </ItemTemplate>
                      </asp:TemplateField>
    
                </Columns>
    
    
    
     </asp:GridView>
    

    any help will be appreciated.

    Sunday, December 6, 2020 2:34 AM

Answers

  • User-939850651 posted

    Hi anjaliagarwal5,

    According to your description, if you need to align the cell content with the header, please use the HeaderStyle-HorizontalAlign and ItemStyle-HorizontalAlign properties at the same time and set the same value.

    I create a simple demo use code you provided:

    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" GridLines="None">
                    <Columns>
                        <asp:BoundField DataField="item" HeaderText="Item" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Font-Bold="true" ItemStyle-Width="200px" />
                        <asp:TemplateField HeaderText="Description" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Font-Bold="true" ItemStyle-Width="300px">
                            <ItemTemplate>
                                <asp:Label ID="lblDesc" runat="server" Text='<%# Eval("desc") %>' /><br />
                                &nbsp;Requested By: &nbsp;<asp:Label ID="lblDesc1" runat="server" Text='<%# Eval("RequestedBy") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="200px" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                            <ItemTemplate>
                                <input type="number" id="txtQuantity" value='<%# Eval("Quantity") %>' data-mini="true" min="1" max="100" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Price" ItemStyle-Width="200px" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                            <ItemTemplate>
                                <asp:Label ID="lblPrice" runat="server" Text='<%# Int32.Parse(Eval("Quantity").ToString()) * 28 %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>

    Result:

    I set all align properties value to Left and columns fixed width for testing. If you need, you could also change their value for your requirement.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 7, 2020 2:42 AM

All replies

  • User-939850651 posted

    Hi anjaliagarwal5,

    According to your description, if you need to align the cell content with the header, please use the HeaderStyle-HorizontalAlign and ItemStyle-HorizontalAlign properties at the same time and set the same value.

    I create a simple demo use code you provided:

    <head runat="server">
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" GridLines="None">
                    <Columns>
                        <asp:BoundField DataField="item" HeaderText="Item" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" HeaderStyle-Font-Bold="true" ItemStyle-Width="200px" />
                        <asp:TemplateField HeaderText="Description" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Font-Bold="true" ItemStyle-Width="300px">
                            <ItemTemplate>
                                <asp:Label ID="lblDesc" runat="server" Text='<%# Eval("desc") %>' /><br />
                                &nbsp;Requested By: &nbsp;<asp:Label ID="lblDesc1" runat="server" Text='<%# Eval("RequestedBy") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="200px" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                            <ItemTemplate>
                                <input type="number" id="txtQuantity" value='<%# Eval("Quantity") %>' data-mini="true" min="1" max="100" runat="server" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Price" ItemStyle-Width="200px" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">
                            <ItemTemplate>
                                <asp:Label ID="lblPrice" runat="server" Text='<%# Int32.Parse(Eval("Quantity").ToString()) * 28 %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>

    Result:

    I set all align properties value to Left and columns fixed width for testing. If you need, you could also change their value for your requirement.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 7, 2020 2:42 AM
  • User351619809 posted

    somehow price is still very close to quantity. I even changed your code for the last column to this, but still price is way too lose to quantity

     <asp:TemplateField HeaderText="Price" HeaderStyle-HorizontalAlign="right" ItemStyle-HorizontalAlign="Right">
                            <ItemTemplate>
                                    <asp:Label  ID="lblPrice" runat="server" Text= '<%# Int32.Parse(Eval("Quantity").ToString()) * 28 %>' />
                            </ItemTemplate>
                          </asp:TemplateField> 

    below is the screen shot:

    enter image description here

    <label for="tageditor-replacing-tagnames--input" class="s-label mb4 d-block grid--cell fl1">Tags</label>
    Monday, December 7, 2020 10:09 PM
  • User-939850651 posted

    Hi anjaliagarwal5,

    If the above-mentioned property setting does not work, I think there may be some other styles that affect it. In this case, please use the HeaderStyle-CssClass and ItemStyle-CssClass attributes.

    Something like :

    <asp:TemplateField HeaderText="Price" ItemStyle-Width="20%" HeaderStyle-CssClass="text-right" ItemStyle-CssClass="text-right">
                            <ItemTemplate>
                                <asp:Label ID="lblPrice" runat="server" Text='<%# Int32.Parse(Eval("Quantity").ToString()) * 28 %>' />
                            </ItemTemplate>
                        </asp:TemplateField>

    You could also refer to this case:

    Headerstyle-horizontalalign is not working

    Best regards,

    Xudong Peng

    Tuesday, December 8, 2020 2:49 AM