diff --git a/Readme.md b/Readme.md index 89f5926..07b90cb 100644 --- a/Readme.md +++ b/Readme.md @@ -3,21 +3,79 @@ [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/E4580) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) +# Grid View for ASP.NET Web Forms - How to hide a grid column on the client + +**[[Run Online]](https://codecentral.devexpress.com/e4580/)** + + +This example demonstrates how to change the visibility of the [Grid View](https://docs.devexpress.com/AspNet/5823/components/grid-view)'s [columns](https://docs.devexpress.com/AspNet/3691/components/grid-view/concepts/data-representation-basics/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. + +![Hide a grid column on the client](hide-a-column.png) + +## Overview + +Follow the steps below to change a [column](https://docs.devexpress.com/AspNet/3691/components/grid-view/concepts/data-representation-basics/columns)'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](https://docs.devexpress.com/AspNet/3669/components/grid-view/visual-elements/column-header) +* [Edit Cell](https://docs.devexpress.com/AspNet/3680/components/grid-view/visual-elements/edit-form) +* [Data Cell](https://docs.devexpress.com/AspNet/3670/components/grid-view/visual-elements/data-cell) +* [Filter Row Cell](https://docs.devexpress.com/AspNet/3684/components/grid-view/visual-elements/filter-row) +* [Footer Cell](https://docs.devexpress.com/AspNet/3683/components/grid-view/visual-elements/footer-cell) +* [Group Footer Cell](https://docs.devexpress.com/AspNet/3815/components/grid-view/visual-elements/group-footer) + +Apply your CSS class to the [CssClass](https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.style.cssclass?view=netframework-4.8#System_Web_UI_WebControls_Style_CssClass) property of every cell in a column: + +```aspx + + + + + + + + + + + + + +``` + +### 2 Specify the display property of the CSS class + +The [display](http://www.w3schools.com/cssref/pr_class_display.asp) 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](http://www.w3schools.com/cssref/pr_class_display.asp) property value. + +```javascript + +``` + -*Files to look at*: + +## Files to Look At * [Default.aspx](./CS/WebSite/Default.aspx) (VB: [Default.aspx](./VB/WebSite/Default.aspx)) * [Default.aspx.cs](./CS/WebSite/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/WebSite/Default.aspx.vb)) - -# ASPxGridView - How to hide a grid column on the client side without making a round-trip to the server - -**[[Run Online]](https://codecentral.devexpress.com/e4580/)** - + -

This example demonstrates how to hide a grid column on the client side without making a round-trip to the server.


-

To accomplish this task, apply a dummy CSS class ('unitPriceColumn') to all column cells (header, data, edit, footer, group footer, and filter cells) in markup. Then, to show/hide these cells, just specify their 'display' style. Set it to the 'none' value to hide cells and to the 'table-cell' value to show cells. To specify a cell display style, I used a jQuerry CSS selector (using the 'unitPriceColumn' CSS class).

+## Documentation -
+* [Access Columns](https://docs.devexpress.com/AspNet/3697/components/grid-view/concepts/data-representation-basics/columns/accessing-columns) +* [Grid View Examples](https://docs.devexpress.com/AspNet/3768/components/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)](https://github.com/DevExpress-Examples/grid-in-full-screen-mode-in-aspnet-web-applications) +- [Grid View for ASP.NET Web Forms - How to Delete Selected Rows in a Grid](https://github.com/DevExpress-Examples/aspxgridview-delete-selected-rows) \ No newline at end of file diff --git a/config.json b/config.json index fb843f4..e2d8020 100644 --- a/config.json +++ b/config.json @@ -1,4 +1,4 @@ { "runOnWeb": true, - "autoGenerateVb": true + "autoGenerateVb": false } \ No newline at end of file diff --git a/hide-a-column.png b/hide-a-column.png new file mode 100644 index 0000000..51eb339 Binary files /dev/null and b/hide-a-column.png differ