All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery DataGrid - Hide a Column Using the API

jQuery

A column is considered hidden when its visible property is false. You can change this property using the columnOption(id, optionName, optionValue) method. For example, the following code hides an "Email" column:

JavaScript
$("#dataGridContainer").dxDataGrid("columnOption", "Email", "visible", false);
Angular

A column is considered hidden when its visible property is false. You can bind this property to a component property and change the latter property. For example, the following code hides an "Email" column:

app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
    <dxi-column
        dataField="Email"
        [(visible)]="isEmailVisible"
    ></dxi-column>
</dx-data-grid>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    isEmailVisible: boolean = true;
    hideEmails() {
        this.isEmailVisible = false;
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue

A column is considered hidden when its visible property is false. You can bind this property to a component property and change the latter property. For example, the following code hides an "Email" column:

App.vue
<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Email"
            v-model:visible="isEmailVisible"
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumn
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return() {
            isEmailVisible: true
        }
    },
    methods: {
        hideEmails() {
            this.isEmailVisible = false;
        }
    }
}
</script>
React

A column is considered hidden when its visible property is false. You can bind this property to a state property and change the latter property. For example, the following code hides an "Email" column:

App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Column
} from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isEmailVisible: true
        };

        this.handleOptionChange = this.handleOptionChange.bind(this);
        this.hideEmails = this.hideEmails.bind(this);
    }

    handleOptionChange(e) {
        if(e.fullName === 'columns[0].visible') {
            this.setState({
                isEmailVisible: e.value
            });
        }
    }

    hideEmails() {
        this.setState({
            isEmailVisible: false
        });
    }

    render() {
        return (
            <DataGrid ...
                onOptionChanged={this.handleOptionChange}>
                <Column 
                    dataField="Email"
                    visible={this.state.isEmailVisible}
                />
            </DataGrid>
        );
    }
}
export default App;
See Also