JavaScript/jQuery TreeList - Hide a Column Using the API
A column is considered hidden when its visible property is false. You can change this property programmatically using the columnOption(id, optionName, optionValue) method. For example, the following code hides an "Email" column:
jQuery
JavaScript
$("#treeListContainer").dxTreeList("columnOption", "Email", "visible", false);Angular
app.component.html
app.component.ts
app.module.ts
<dx-tree-list ... >
<dxi-column
dataField="Email"
[(visible)]="isEmailVisible"
></dxi-column>
</dx-tree-list>
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 { DxTreeListModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxTreeListModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
App.vue
<template>
<DxTreeList ... >
<DxColumn
data-field="Email"
v-model:visible="isEmailVisible"
/>
</DxTreeList>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxTreeList, {
DxColumn
} from 'devextreme-vue/tree-list';
export default {
components: {
DxTreeList,
DxColumn
},
data() {
return() {
isEmailVisible: true
}
},
methods: {
hideEmails() {
this.isEmailVisible = false;
}
}
}
</script>React
App.js
import React, { useState, useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';
import TreeList, {
Column
} from 'devextreme-react/tree-list';
export default function App() {
const [isEmailVisible, setIsEmailVisible] = useState(true);
const handleOptionChange = useCallback((e) => {
if(e.fullName === 'columns[0].visible') {
setIsEmailVisible(e.value);
}
}, []);
const hideEmails = useCallback(() => {
setIsEmailVisible(false);
}, []);
return (
<TreeList ...
onOptionChanged={handleOptionChange}>
<Column
dataField="Email"
visible={isEmailVisible}
/>
</TreeList>
);
}See Also
Feedback