CODEWITHSUNDEEP
c#asp.netgridview
Null
Null

Reputation: 511

Misplaced columns headers

I have a Gridview that has a 3 columns , one of them(ObjectiveID) is invisible using the CSS:

<style type="text/css">
    .hidden {
        display: none;
    }
</style>

But, when i use this style, i got misplaced columns headers as shown in the picture below :

enter image description here

My Aspx code:

    <div class="form-group col-md-8">
        <asp:GridView runat="server" ID="grdPlanObjectivesStandardWeights" AutoGenerateColumns="False"
            CssClass="table table-hover table-bordered table-responsive table-striped"
            HeaderStyle-CssClass="tableHeader"
            DataKeyNames="ObjectiveID"
            EmptyDataText="<%$Resources:DCAACommon, NoDataMessage%>"
            EmptyDataRowStyle-CssClass="alert alert-warning"
            EmptyDataRowStyle-HorizontalAlign="Center">
            <Columns>
                <asp:BoundField DataField="ObjectiveID">
                    <ItemStyle CssClass="hidden" />
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="<%$ Resources:DCAAStrategicManagement, Initiative_ObjectiveName  %>" />
                <asp:TemplateField HeaderText="<%$ Resources:DCAAStrategicManagement, obj_lblStandardWeight  %>" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="txtStandardWeight" onkeypress="return onlyNumbers();" Text='<%# Eval("StandardWeight") %>'></asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <PagerStyle CssClass="pagination-gridView" />
            <PagerSettings Mode="NumericFirstLast" FirstPageText="First" LastPageText="Last" />
        </asp:GridView>
    </div>

Note: i need to keep the ObjectiveID invisible, and i must not use Visible="False" to the BoundField.

Any help would be appreaciate.

Upvotes: 0

Views: 73

Answers (2)

Null
Null

Reputation: 511

I was trying to hide only the items , all i needed is to also hide the Header.

So, i have changed this : 

<asp:BoundField DataField="ObjectiveID">
     <ItemStyle CssClass="hidden" />
</asp:BoundField>

To this:

<asp:BoundField DataField="ObjectiveID" ItemStyle-CssClass="hidden" HeaderStyle-CssClass="hidden"/>

And it worked just fine.

Upvotes: 1

VDWWD
VDWWD

Reputation: 35554

You are hiding a <td> item, not it's content. This will lead to weird behaviour.

A solution is to change the BoundField to a TemplateField. You'll have more control that way.

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:TemplateField ItemStyle-CssClass="hidden">
            <ItemTemplate>
                <span><%# Eval("ObjectiveID") %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<style type="text/css">
    .hidden span {
        display: none;
    }
</style>

Upvotes: 1

Related Questions