Grid View for ASP.NET Web Forms - How to hide a grid column on the client

This example demonstrates how to change the visibility of the Grid View's columns on the client without making a round trip to the server. Check or uncheck the Unit Price Column check box to show or hide the Unit Price column.

Overview

Follow the steps below to change a column's visibility on the client.

1 Apply a CSS class to all cells of a column

A column can include the following cells:

• Column Header
• Edit Cell
• Data Cell
• Filter Row Cell
• Footer Cell
• Group Footer Cell

Apply your CSS class to the CssClass property of every cell in a column:

<dx:ASPxGridView ID="gvProducts" runat="server" AutoGenerateColumns="False" DataSourceID="dsProducts" KeyFieldName="ProductID">
    <Columns>
        <!-- ... -->
        <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="4">
            <HeaderStyle CssClass="unitPriceColumn" />
            <EditCellStyle CssClass="unitPriceColumn" />
            <CellStyle CssClass="unitPriceColumn" />
            <FilterCellStyle CssClass="unitPriceColumn" />
            <FooterCellStyle CssClass="unitPriceColumn" />
            <GroupFooterCellStyle CssClass="unitPriceColumn" />
        </dx:GridViewDataTextColumn>
    </Columns>
</dx:ASPxGridView>

2 Specify the display property of the CSS class

The display property of the CSS class specifies the display behavior of an element. Set this property to none to hide the column or set it to table-cell to show the column.

This example uses a jQuery CSS selector to change the display property value.

<script type="text/javascript">
    function SetUnitPriceColumnVisibility(visible) {
        unitPriceColumnVisible = visible;
        var disp = visible ? 'table-cell' : 'none';
        $('td.unitPriceColumn').css('display', disp);
    }
</script>

Files to Look At

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Access Columns
• Grid View Examples

More Examples

• Grid View for ASP.NET Web Forms - How to Display the Grid View in Full Screen Mode (100% Width and Height)
• Grid View for ASP.NET Web Forms - How to Delete Selected Rows in a Grid

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)