Question

I have a standard grid view, which contains a number of bounded fields and template fields, out of these I would like to make 4 columns invisible.

I know the css for this is visibility:hidden; but I do not know how to apply it to just these 4 columns, I have tried using the ControlStyle-CssClass property but it seems to apply the css to the whole table.

Is there a way to apply this css only to these 4 columns, also the plan is after I manage this is to write some Javascript for a button to switch the visibility on and off, so if you could please use some CSS/tags etc which can be easily changed client side it would be a huge plus.

A example:

<asp:GridView ID="gwFoo" runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
                        Width="631px" OnRowDataBound="gwFoo_RowDataBound"
                        CssClass="customerDataTable" AllowSorting="True">
                        <Columns>
                            <asp:BoundField DataField="type" HeaderText="Type" SortExpression="type" />
                            <asp:TemplateField HeaderText="Number" SortExpression="id">
                                <ItemTemplate>
                                    <asp:HyperLink ID="hlNumber" runat="server">[hlNumber]</asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="product" HeaderText="Product" SortExpression="product" />
                            <asp:BoundField DataField="startDate" HeaderText="Start Date" SortExpression="startDate" />
                            <asp:BoundField DataField="endDate" HeaderText="End Date" SortExpression="endDate" />
                            <asp:BoundField DataField="isActive" HeaderText="Is Active ?" SortExpression="isActive" />
                            <asp:BoundField DataField="markedForActivation" HeaderText="Marked for Activation ?" SortExpression="markedForActivation" />
                            <asp:BoundField DataField="status" HeaderText="Status" SortExpression="status" />


                            <asp:TemplateField HeaderText="Parent Order" SortExpression="Foo">
                                <ItemTemplate>
                                    <asp:HyperLink ID="hlFoo" runat="server">[hlFoo]</asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateField>

                            <asp:TemplateField HeaderText="Parent Document" SortExpression="Foo">
                                <ItemTemplate>
                                    <asp:HyperLink ID="hlFoo" runat="server">[hlFoo]</asp:HyperLink>
                                </ItemTemplate>
                            </asp:TemplateField>

                            <asp:BoundField DataField="createdDate" HeaderText="Created Date" <itemstyle  Visible="false"></itemstyle> SortExpression="createdDate" />
                            <asp:BoundField DataField="createdBy" HeaderText="Created By"  SortExpression="createdBy" />
                            <asp:BoundField DataField="lastUpdated" HeaderText="Last Updated"  SortExpression="lastUpdated" />
                            <asp:BoundField DataField="lastUpdatedBy" HeaderText="Last Updated By" SortExpression="lastUpdatedBy" />                



                        </Columns>
                    </asp:GridView>

Answer 1

I solved the problem, in a way in which I can also switch the invissibility on and off from a button.

First I refactored the bounded fields I wanted to hide in this manner:

<asp:BoundField DataField="createdBy" HeaderText="Created By"  SortExpression="createdBy" >
  <ItemStyle CssClass="fooClass"></ItemStyle>
</asp:BoundField>

The class fooClass is a empty css class, I used it only so that all the <td> </td> elements which are generated by the bounded field share a common class, thus allowing the jquery script I wrote bellow to hide or show them.

<script> $(".fooClass").hide(); </script>
// or 
<script> $(".fooClass").show(); </script>