All docs
V21.1
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.
A newer version of this page is available. Switch to the current version.

jQuery DataGrid - Hide a Column Using the API

A column is considered hidden when its visible property is false. In Angular, Vue, and React, you can bind this property to a component or state property and change that property. In jQuery, you can change this property using the columnOption(id, optionName, optionValue) method. For example, the following code hides an "Email" column:

jQuery
JavaScript
$("#dataGridContainer").dxDataGrid("columnOption", "Email", "visible", false);
Angular
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
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
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