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 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