All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

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