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->headerText value.
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.