GridView css Clashing with BoundField css

Question

In my GridView I am using w3schools css. Inside the grid view, I want to hide one column (BoundField) but not by setting the "Visible = false" as I want to access that columns data.

For the BoundField (The column I want to hide) I am using css to hide it by giving "" and the HeaderStyle-cssClass="hidden".

When I apply the w3schools css in the grid view it overrides the css in the BoundField.

If I remove the w3schools css then the BoundField css works fine but I have lost the GridView design.

How can I make both the css work together? If not possible then how can i hide that column without using "Visible = false".

Giving the code below. In the head section: <script type="text/css"> .hiddenGV { display:none; } </script>

In the body section

`<asp:GridView ID="GridView1" runat="server" class="w3-table w3-striped w3-bordered w3-card-4 gridtop"  OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AutoGenerateColumns="False" DataKeyNames="Project_ID,Instance_ID" DataSourceID="SqlDataSource1">
        <Columns>
            <asp:BoundField DataField="Project_ID" HeaderText="Project_ID" ReadOnly="True" SortExpression="Project_ID" HeaderStyle-CssClass="hiddenGV" ><ItemStyle CssClass="hiddenGV"/></asp:BoundField>

`

score 1 · Answer 1 · answered Apr 06 '16 at 08:24

A couple of thing wrong here. Your css class in the head is incorrect in that it should be in a style tag. In the BoundField you do not need to add an ItemStyle tag because ItemStyle is a property of BoundField. To hide the column and still be able to access the value, use this css in the head

   <style type="text/css">
      .hiddenGV
      {
        visibility :hidden;
      }
    </style>

Then in the BoundField set the css for the header and data rows like this:

  <asp:BoundField DataField="Project_ID" HeaderText="Project_ID" ReadOnly="True" SortExpression="Project_ID" ItemStyle-CssClass="hiddenGV"  HeaderStyle-CssClass="hiddenGV"/></asp:BoundField>

Hi, I used your solution and it is working. Thank you for pointing out the — user2211486, Apr 06 '16 at 08:52

score 0 · Answer 2 · answered Apr 06 '16 at 09:30

I solved the issue by writing the code behind instead of css.

I used the OnRowCreated property function of the GridView and selected the row by using

e.Row.Cells[0].Visible = false;

With this the column is also hidden and I can still access it in the code behind.

GridView css Clashing with BoundField css

2 Answers2