How to show/hide fields with ASP.net gridview?

I inherited an ASP.net web application that displays data from a SQL database using the ASP.net GridView control.

The problem is that there are more than 20 fields in the table. It is unlikely that the user would want to see all 20 fields at once, but it is equally implausible that any of the fields could be excluded from the display.

It seems like the solution would be to allow the开发者_如何学运维 user to select what fields to show and hide client-side.

Is there a good way to display and hide individual columns of an ASP.net GridView client-side? If not, what kind of solution should I seek out?

I'm no javascript guru so I won't even attempt to answer that part of the question. But I have had a similar problem to yours, that being too many columns for the screen width you're working with.

I would suggest grouping columns from your DB together into multi-field columns in the GridView using TemplateField. A lot of many-field data can be visually compressed this way. I'll give you an example from a lookup tool I designed to work with our ManageEngine ServiceDesk installation:

        <asp:GridView ID="gridResults" runat="server" BorderColor="#223366" BorderWidth="0px"
            CellPadding="5" DataSourceID="dsResults" AutoGenerateColumns="False" DataKeyNames="ResID">
            <HeaderStyle BackColor="#223366" ForeColor="#F0F0F0" BorderColor="#223366" Font-Bold="true" />
            <RowStyle BackColor="#E0E0E0" ForeColor="#223366" BorderColor="#223366" HorizontalAlign="Left"
                VerticalAlign="Top" />
            <AlternatingRowStyle BackColor="#D0D0D0" ForeColor="#223366" BorderColor="#223366"
                HorizontalAlign="Left" VerticalAlign="Top" />
            <Columns>
                <asp:TemplateField HeaderText="Host Name">
                    <ItemTemplate>
                        <asp:Literal ID="Literal1" runat="server" Text='<%# "<a class=""BlueLink"" href=""https://mgmt-servicedesk.co.wood.wi.us/ViewWSDetails.do?wsId=" & Eval("ResID") & """>" & Eval("ResourceName") & "</a><br/>Serial #: " & Eval("SerialNo") & "<br/>Asset: " & Eval("AssetTag") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Status">
                    <ItemTemplate>
                        <asp:Literal ID="Literal1" runat="server" Text='<%# "Status: " & Eval("State") & "<br/>" & Eval("Manufacturer") & "<br/>" & Eval("Model") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Owner/Location">
                    <ItemTemplate>
                        <asp:Literal ID="Literal1" runat="server" Text='<%# "User: " & Eval("UserName") & "<br/>Dept: " & Eval("Department") & "<br/>" & Eval("Location")   %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <%# RenderDameWareLinks(Eval("ResourceName"))%>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <EmptyDataTemplate>
                No Results
            </EmptyDataTemplate>
        </asp:GridView>

When rendered, this is the what the gridview looks like (sorry for so much blurring, can't risk posting our internal records):

I have several advanced search pages in my company's intranet site, and I provide checkboxes for every column. The default's are selected at pageLoad, but the user can change the ones they want before running the search. Then the sql is generated dynamically in code-behind, and the sqlDataSource is updated. The grid should be set to automatically generate columns, then your good to go.

EDIT: Sorry, I didn't see the client-side requirement at first. Although with an asp.net Update Panel, my solution looks like quick client-side code to the user. You can even update the grid each time a column is checked or unchecked.

If my solution is of interest, let me know and I can post code examples.