From 93e7fbb54e344a39e1fef01cf0f924cd6bf18c75 Mon Sep 17 00:00:00 2001 From: Svetlana Mikheeva Date: Thu, 3 Feb 2022 16:08:34 +0300 Subject: [PATCH 1/4] first changes --- Readme.md | 74 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 65 insertions(+), 9 deletions(-) diff --git a/Readme.md b/Readme.md index 89f5926..a20b325 100644 --- a/Readme.md +++ b/Readme.md @@ -3,21 +3,77 @@ [![](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 at 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 [column](https://docs.devexpress.com/AspNet/3691/components/grid-view/concepts/data-representation-basics/columns) at the client without making a round-trip to the server. + +## 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 at the client. + +### 1 Apply a custom 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 custom CSS style 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 custom CSS class + +The CSS class's [display](http://www.w3schools.com/cssref/pr_class_display.asp) property specifies the display behavior of an element. Set this property to `none` to hide the column or set it to `table-cell` to display the column. + +In this example, we use a jQuerry CSS selector to change the [display](http://www.w3schools.com/cssref/pr_class_display.asp) property value. + +```js + +``` + -*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 the 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 From d40478114e4a8973bd1baa7a1e122bca7b34b044 Mon Sep 17 00:00:00 2001 From: Svetlana Mikheeva Date: Fri, 4 Feb 2022 11:23:18 +0300 Subject: [PATCH 2/4] some fixes --- Readme.md | 20 +++++++++++--------- hide-a-column.png | Bin 0 -> 40327 bytes 2 files changed, 11 insertions(+), 9 deletions(-) create mode 100644 hide-a-column.png diff --git a/Readme.md b/Readme.md index a20b325..2136345 100644 --- a/Readme.md +++ b/Readme.md @@ -3,18 +3,20 @@ [![](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 at the client +# 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 [column](https://docs.devexpress.com/AspNet/3691/components/grid-view/concepts/data-representation-basics/columns) at the client without making a round-trip to the server. +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 at the client. +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 custom CSS class to all cells of a column +### 1 Apply a CSS class to all cells of a column A column can include the following cells: @@ -25,7 +27,7 @@ A column can include the following cells: * [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 custom CSS style 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: +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 @@ -43,13 +45,13 @@ Apply your custom CSS style to the [CssClass](https://docs.microsoft.com/en-us/d ``` -### 2 Specify the display property of the custom CSS class +### 2 Specify the display property of the CSS class -The CSS class's [display](http://www.w3schools.com/cssref/pr_class_display.asp) property specifies the display behavior of an element. Set this property to `none` to hide the column or set it to `table-cell` to display the column. +The CSS class's [display](http://www.w3schools.com/cssref/pr_class_display.asp) property 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. -In this example, we use a jQuerry CSS selector to change the [display](http://www.w3schools.com/cssref/pr_class_display.asp) property value. +This example uses a jQuerry CSS selector to change the [display](http://www.w3schools.com/cssref/pr_class_display.asp) property value. -```js +```javascript