# Visible Columns

The Grid allows you to programmatically hide some of its columns.

In this article:

* [Basics](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#basics)
* [Notes](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#notes)
* [Examples](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#examples)
  * [Toggle The Visibility Of A Column On Button Click](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#toggle-the-visibility-of-a-column-on-button-click)
  * [Hidden Grid Column With Template](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#hidden-grid-column-with-template)
  * [Hide A Grid Column Based On A Condition](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#hide-a-grid-column-based-on-a-condition)

## Basics

To hide a Grid column set its `Visible` parameter to `false`. To hide a column based on a certain condition you can pass, for example, a ternary operator or a method that returns `bool` - the app can provide an expression according to its logic (like screen size).

> caption Hide a column from the Grid. Basic example.

<demo metaUrl="client/grid/columns-visible/" height="450"></demo>

## Notes

Non-visible columns (`Visible="false"`) will have the following behavior:

* Will not be [editable](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview).
* Will not be exported in [excel export](https://www.telerik.com/blazor-ui/documentation/components/grid/export/excel).
* Will not be visible when the data is [grouped](https://www.telerik.com/blazor-ui/documentation/components/grid/grouping/overview).
* [Templates](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/overview) will not be rendered.
  * When using [Row Template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/row) the visiblity of the column should be implemented by the application in the row template itself - the grid can only toggle the visibility of the header.
* You can control the visibility of the column through the [Grid State](https://www.telerik.com/blazor-ui/documentation/components/grid/state).

## Examples

In this section you will find the following examples:

* [Toggle The Visibility Of A Column On Button Click](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#toggle-the-visibility-of-a-column-on-button-click)
* [Hidden Grid Column With Template](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#hidden-grid-column-with-template)
* [Hide A Grid Column Based On A Condition](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/visible#hide-a-grid-column-based-on-a-condition)

### Toggle The Visibility Of A Column On Button Click

The application can later the value of the `Visible` parameter and that will toggle the column.

<demo metaUrl="client/grid/columns-visible-toggle/" height="500"></demo>

### Hidden Grid Column With Template

When cell-specific templates are used, they are not rendered at all. If you are using the RowTemplate, however, make sure to handle the column visiblity there as well.

<demo metaUrl="client/grid/columns-visible-template/" height="500"></demo>

### Hide A Grid Column Based On A Condition

This example shows hiding a column based on a simple condition in its data. You can change it to use other view-model data - such as screen dimensions, user preferences you have stored, or any other logic.

<demo metaUrl="client/grid/columns-visible-condition/" height="500"></demo>

## See Also

* [Live Demo: Visible Columns](https://demos.telerik.com/blazor-ui/grid/columns)
* [Blazor Grid](https://www.telerik.com/blazor-ui/documentation/components/grid/overview)