This sample demonstrates dynamic show hide columns feature of Grid. Click column name from the toolbar to toggle visibility.
Order ID | Customer Name | Order Date | Freight | Shipped Date | Ship Country |
|---|---|---|---|---|---|
| 10248 | Maria | 7/4/1996 | $32.38 | 7/16/1996 | France |
| 10249 | Ana Trujillo | 7/5/1996 | $11.61 | 7/10/1996 | Germany |
| 10250 | Antonio Moreno | 7/8/1996 | $65.83 | 7/12/1996 | Brazil |
| 10251 | Thomas Hardy | 7/8/1996 | $41.34 | 7/15/1996 | France |
| 10252 | Christina Berglund | 7/9/1996 | $51.30 | 7/11/1996 | Belgium |
| 10253 | Hanna Moos | 7/10/1996 | $58.17 | 7/16/1996 | Brazil |
| 10254 | Frédérique Citeaux | 7/11/1996 | $22.98 | 7/23/1996 | Switzerland |
| 10255 | Martín Sommer | 7/12/1996 | $148.33 | 7/15/1996 | Switzerland |
| 10256 | Laurence Lebihan | 7/15/1996 | $13.97 | 7/17/1996 | Brazil |
| 10257 | Elizabeth Lincoln | 7/16/1996 | $81.91 | 7/22/1996 | Venezuela |
| 10258 | Victoria Ashworth | 7/17/1996 | $140.51 | 7/23/1996 | Austria |
| 10259 | Patricio Simpson | 7/18/1996 | $3.25 | 7/25/1996 | Mexico |
The Grid column can be showed/hidden dynamically using
ShowColumns and
hideColumns method of the Grid.
In this demo, the columns can be showed and hidden by clicking the column name in the toolbar. And the column`s visibility is toggled based on the
columns->headerTextvalue.
The columns->visible property specifies the visibility of a column. To hide a column at the initial rendering, set the columns->visible property to false.