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.common.css';
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.common.css';
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
Feedback