React TreeList - columns

Default Value: undefined

Accepted Values: undefined | 'center' | 'left' | 'right'

The default alignment of the content depends on the type of data.

dataType	alignment
'number'	'right'
'boolean'	'center'
'string'	'left'
'date'	'left'
'datetime'	'left'

Use the HorizontalAlignment enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Center, and Right.

allowEditing

Specifies whether a user can edit values in the column at runtime. By default, inherits the value of the editing.allowUpdating option.

Type:

Default Value: true

NOTE

If values in the column are calculated customarily using the calculateCellValue option, they cannot be edited at runtime.

allowFiltering

Specifies whether data can be filtered by this column. Applies only if filterRow.visible is true.

Type:

Default Value: true

allowFixing

Specifies whether a user can fix the column at runtime. Applies only if columnFixing.enabled is true.

Type:

Default Value: true

allowHeaderFiltering

Specifies whether the header filter can be used to filter data by this column. Applies only if headerFilter.visible is true. By default, inherits the value of the allowFiltering option.

Type:

Default Value: true

allowHiding

Specifies whether a user can hide the column using the column chooser at runtime. Applies only if columnChooser.enabled is true.

Type:

Default Value: true

NOTE

Fixed columns ignore the hidingPriority and allowHiding options.

allowReordering

Specifies whether this column can be used in column reordering at runtime. Applies only if allowColumnReordering is true.

Type:

Default Value: true

allowResizing

Specifies whether a user can resize the column at runtime. Applies only if allowColumnResizing is true.

Type:

Default Value: true

allowSearch

Specifies whether this column can be searched. Applies only if searchPanel.visible is true. Inherits the value of the allowFiltering option by default.

Type:

Default Value: true

allowSorting

Specifies whether a user can sort rows by this column at runtime. Applies only if sorting.mode differs from "none".

Type:

Default Value: true

NOTE

In a column with calculated values, this option is set to false by default.

buttons[]

Allows you to customize buttons in the editing column or create a custom command column. Applies only if the column's type is "buttons".

Type:

Array<String | Column Button>

calculateCellValue

Calculates custom cell values. Use this function to create an unbound data column.

Type:

Function parameters:

rowData:

The data of the row to which the cell belongs.

Return Value: any

A cell's custom value.

Unlike data columns bound to a data field, unbound columns display custom values returned from the calculateCellValue function. It is called each time a new row is rendered.

In the following code, the calculateCellValue function is used to create an unbound column that displays a calculated sales amount. Data objects contain the Price and UnitsSold fields used in the calculation:

jQuery

index.js

var products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: products,
        columns: [{
            caption: "Sales Amount",
            calculateCellValue: function(rowData) {
                return rowData.Price * rowData.UnitsSold;
            }
        },
        // ...
        ]
    });
});

Angular

app.component.html

app.component.ts

app.service.ts

app.module.ts

<dx-tree-list
    [dataSource]="products">
    <dxi-column
        caption="Sales Amount"
        [calculateCellValue]="calculateSalesAmount">
    </dxi-column>
</dx-tree-list>

import { Component } from '@angular/core';
import { Product, Service } from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    products: Product[];
    constructor(service: Service) {
        this.products = service.getProducts();
    }

    calculateSalesAmount(rowData) {
        return rowData.Price * rowData.UnitsSold;
    }
}

import { Injectable } from '@angular/core';

export class Product {
    ProductID: number,
    ProductName: string,
    Price: number,
    UnitsSold: number
}

let products: Product[] = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

@Injectable()
export class Service {
    getProducts(): Product[] {
        return products;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxTreeListModule } from 'devextreme-angular';
import { Service } from './app.service';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxTreeListModule
    ],
    providers: [
        Service
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

data.js

<template>
    <DxTreeList
        :data-source="products">
        <DxColumn
            caption="Sales Amount"
            :calculate-cell-value="calculateSalesAmount">
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn
} from 'devextreme-vue/tree-list';

import service from './data.js';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    data() {
        const products = service.getProducts();
        return {
            products
        }
    },
    methods: {
        calculateSalesAmount(rowData) {
            return rowData.Price * rowData.UnitsSold;
        }
    }
}
</script>

const products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

export default {
    getProducts() {
        return products;
    }
};

React

App.js

data.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column 
} from 'devextreme-react/tree-list';

import service from './data.js';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.products = service.getProducts();
    }

    calculateSalesAmount(rowData) {
        return rowData.Price * rowData.UnitsSold;
    }

    render() {
        return (
            <TreeList
                dataSource={this.products}>
                <Column
                    caption="Sales Amount"
                    calculateCellValue={this.calculateSalesAmount}
                />
            </TreeList>
        );
    }
}
export default App;

const products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

export default {
    getProducts() {
        return products;
    }
};

The following features are disabled in an unbound column, but you can enable them as described in this table:

Feature	Action that enables it
Editing	Implement the setCellValue function.
Sorting	Set the allowSorting option to true.
Filtering	Set the allowFiltering option to true.
Searching	Set the allowSearch option to true.
Grouping (DataGrid only)	Set the allowGrouping option to true.

NOTE

To invoke the default behavior, call the this.defaultCalculateCellValue(rowData) function and return its result.

jQuery

index.js

$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            calculateCellValue: function(rowData) {
                // ...
                return this.defaultCalculateCellValue(rowData);
            }
        }]
    });
});

Angular

app.component.ts

app.component.html

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    calculateCellValue(rowData) {
        // ...
        let column = this as any;
        return column.defaultCalculateCellValue(rowData);
    }
}

<dx-tree-list ... >
    <dxi-column ...
        [calculateCellValue]="calculateCellValue">
    </dxi-column>
</dx-tree-list>

Vue

App.vue

<template>
    <DxTreeList ... >
        <DxColumn ...
            :calculate-cell-value="calculateCellValue">
        </DxColumn>
    </DxTreeList>
</template>

<script>
// ...
export default {
    // ...
    methods: {
        calculateCellValue(rowData) {
            // ...
            let column = this as any;
            return column.defaultCalculateCellValue(rowData);
        }
    }
}
</script>

React

App.js

// ...
class App extends React.Component {
    calculateCellValue(rowData) {
        // ...
        let column = this as any;
        return column.defaultCalculateCellValue(rowData);
    }

    render() {
        return (
            <TreeList ... >
                <Column ...
                    calculateCellValue={this.calculateCellValue}
                />
            </TreeList>
        );
    }
}
export default App;

NOTE

The this keyword refers to the column's configuration.

calculateDisplayValue

Calculates custom display values for column cells. Requires specifying the dataField or calculateCellValue option. Used in lookup optimization.

Type:

|

Function parameters:

rowData:

The data of the row to which the cell belongs.

Return Value: any

The value for the cell to display.

This option accepts the name of the data source field that provides display values...

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            dataField: "countryID", // provides values for editing
            calculateDisplayValue: "country" // provides display values
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column
        dataField="countryID" <!-- provides values for editing -->
        calculateDisplayValue="country"> <!-- provides display values -->
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxTreeList>
        <DxColumn          
            data-field="countryID" <!-- provides values for editing -->
            calculate-display-value="country"> <!-- provides display values -->  
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn 
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn 
    },
    // ...
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

class App extends React.Component {
    // ...

    render() {
        return (
            <TreeList>
                <Column 
                    dataField="countryID"  <!-- provides values for editing -->
                    calculateDisplayValue="country"  <!-- provides display values -->  
                />
            </TreeList>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

Razor VB

@(Html.DevExtreme().TreeList()
    .Columns(columns => columns.Add()
        .DataField("CountryID")
        .CalculateDisplayValue("Country")
    )
)

@(Html.DevExtreme().TreeList() _
    .Columns(Sub(columns)
        columns.Add() _
            .DataField("CountryID") _
            .CalculateDisplayValue("Country")
    End Sub)        
)

... or a function that combines display values. Specify this function only if all data processing operations are executed on the client.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            dataField: "countryID", // provides values for editing
            calculateDisplayValue: function (rowData) { // combines display values
                return rowData.capital + " (" + rowData.country + ")";
            }
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column
        dataField="countryID" <!-- provides values for editing -->
        [calculateDisplayValue]="getCountryWithCapital"> <!-- combines display values -->
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxTreeList>
        <DxColumn       
            data-field="countryID" <!-- provides values for editing -->
            :calculate-display-value="getCountryWithCapital" <!-- combines display values -->
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn 
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn 
    },
    methods: {
        getCountryWithCapital(rowData) {
            return rowData.capital + " (" + rowData.country + ")";
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column
} from 'devextreme-react/tree-list';

class App extends React.Component {
    // ...

    render() {
        return (
            <TreeList>
                <Column
                    dataField="countryID" <!-- provides values for editing -->                 
                    calculateDisplayValue={this.getCountryWithCapital} <!-- combines display values -->
                />
            </TreeList>
        );
    }

    getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

Razor VB

@(Html.DevExtreme().TreeList()
    .Columns(columns => columns.Add()
        .DataField("CountryID")
        .CalculateDisplayValue(new JS("getCountryWithCapital"))
    )
)

<script>
    function getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }        
</script>

@(Html.DevExtreme().TreeList() _
    .Columns(Sub(columns)
        columns.Add() _
            .DataField("CountryID") _
            .CalculateDisplayValue(New JS("getCountryWithCapital"))
    End Sub)        
)

<script>
    function getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }        
</script>

The widget uses the specified display values in sorting, searching, and grouping (in case of DataGrid).

NOTE

The this keyword refers to the column's configuration.

Do not use this option to format text in cells. Instead, use the format, customizeText, or cellTemplate option.

calculateFilterExpression

Specifies the column's custom filtering rules.

Type:

Function parameters:

filterValue: any

A user input value.

selectedFilterOperation:

The selected filter operation.

target:

The UI element where the filter expression was set.
Possible values: "filterRow", "headerFilter", "filterBuilder", and *"search".

Return Value:

Filter Expression

A filter expression. If you are using remoteOperations, it should not contain functions.

This function must return a filter expression. The simplest filter expression has the following format:

[selector, selectedFilterOperation, filterValue]

selector
A data source field or a function providing actual column values. Pass this.calculateCellValue if your column contains calculated values.
selectedFilterOperation
A comparison operator. One of the following: "=", "<>", ">", ">=", "<", "<=", "between", "startswith", "endswith", "contains", "notcontains".

NOTE

For the "between" operator, the returned filter expression has a slightly different format: [[selector, ">=", startValue], "and", [selector, "<=", endValue]].
filterValue
A user input value. Values the selector provides are compared to this value.

In the following code, the calculateFilterExpression function implements an exclusive between operation. This is done by overriding the default inclusive implementation.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            calculateFilterExpression: function (filterValue, selectedFilterOperation) {
                // Implementation for the "between" comparison operator
                if (selectedFilterOperation === "between" && $.isArray(filterValue)) {
                    var filterExpression = [
                        [this.dataField, ">", filterValue[0]], 
                        "and", 
                        [this.dataField, "<", filterValue[1]]
                    ];
                    return filterExpression;
                }
                // Invokes the default filtering behavior
                return this.defaultCalculateFilterExpression.apply(this, arguments);
            },
            // ...
        }]
    });
});

Angular

TypeScript

HTML

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    calculateFilterExpression (filterValue, selectedFilterOperation) {
        let column = this as any;
        // Implementation for the "between" comparison operator
        if (selectedFilterOperation === "between" && Array.isArray(filterValue)) {
            var filterExpression = [
                [column.dataField, ">", filterValue[0]], 
                "and", 
                [column.dataField, "<", filterValue[1]]
            ];
            return filterExpression;
        }
        // Invokes the default filtering behavior
        return column.defaultCalculateFilterExpression(arguments);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ... >
    <dxi-column [calculateFilterExpression]="calculateFilterExpression" ... ></dxi-column>
</dx-tree-list>

In the previous code, the defaultCalculateFilterExpression function invokes default behavior. You can omit this function call if you so choose.

NOTE

The this keyword refers to the column's configuration.

calculateSortValue

Calculates custom values to be used in sorting.

Type:

|

Function parameters:

rowData:

The data of the row to which the cell belongs.

Return Value: any

The value to be used in sorting.

This option accepts the name of the data source field that provides values to be used in sorting...

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            dataField: "Position", // provides values for the column
            calculateSortValue: "isOnVacation" // provides values to be used in sorting 
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column
        dataField="Position" <!--provides values for the column -->
        calculateSortValue="isOnVacation"> <!-- provides values to be used in sorting -->
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

... or a function that returns such a value.

jQuery

JavaScript

$(function() {
    var treeList = $("#treeListContainer").dxTreeList({
        columns: [{
            dataField: "Position",
            sortOrder: "asc",
            calculateSortValue: function (rowData) {
                if (rowData.Position == "CEO")
                    return treeList.columnOption("Position", "sortOrder") == "asc" ? "aaa" : "zzz"; // CEOs are always displayed at the top
                else
                    return rowData.Position; // Others are sorted as usual
            }
        }]
    }).dxTreeList("instance");
});

Angular

TypeScript

HTML

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    customSortingFunction (rowData) {
        let column = this as any;
        if (rowData.Position == "CEO")
            return column.sortOrder == "asc" ? "aaa" : "zzz"; // CEOs are always displayed at the top
        else
            return rowData.Position; // Others are sorted as usual
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ... >
    <dxi-column
        dataField="Position"
        sortOrder="asc"
        [calculateSortValue]="customSortingFunction">
    </dxi-column>
</dx-tree-list>

NOTE

Please review the following notes about the calculateSortValue option.

The this keyword refers to the column's configuration.
When the DataGrid is grouped by the column, this option is ignored. Use the calculateGroupValue option instead or additionally.

caption

Specifies a caption for the column.

Type:

Default Value: undefined

Use this option to display a descriptive or friendly name for the column. If this option is not set, the caption will be generated from the name of the dataField.

cellComponent

An alias for the cellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

cellRender

An alias for the cellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

cellTemplate

Specifies a custom template for column cells.

Type:

template

Template Data:

HTMLElement | jQuery

The current cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

The cellInfo object has the following fields:

data: Object
The data of the row to which the cell belongs.
component: Object
The widget's instance.
value: Any
The cell's raw value.
oldValue: Any
The cell's previous raw value.
displayValue: Any
The cell's display value. Differs from the value field only when the column uses lookup or calculateDisplayValue.
text: String
displayValue after applying format and customizeText.
columnIndex: Number
The index of the cell's column.
rowIndex: Number
The index of the cell's row. Begins with 0 on each page. Refer to Column and Row Indexes for more information.
column: Object
The column's properties.
watch: Function
Allows tracking a variable and performing actions when it changes. Applies when repaintChangesOnly is true.
This function has the following parameters:
- getter(data): Function
  A function that returns the variable that should be tracked.
- handler(newValue): Function
  A function called when this variable changes.

NOTE

If you implement two-way data binding in your template, make sure that you have switched off the built-in implementation of this feature by setting the twoWayBindingEnabled option to false.

columns

Configures columns.

Type:

Array<TreeList Column | String>

Default Value: undefined

Unlike normal columns, band columns do not hold data. Instead, they collect two or more columns under one column header. To set up this layout, declare the band column using a hierarchical structure. For this, assign the nested columns to the columns field of the band column. For example, the following code declares the "Address" band column and nests three columns within it.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Address",
            columns: ["City", "Street", "Apartment"]
        }, {
            // ...
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column caption="Address">
        <dxi-column dataField="City"></dxi-column>
        <dxi-column dataField="Street"></dxi-column>
        <dxi-column dataField="Apartment"></dxi-column>
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

A nested column has almost every option a regular column has. These options are described in the columns section of the Reference.

NOTE

There is an exception though: nested columns cannot be fixed alone, therefore specifying the fixed and fixedPosition options for them is useless. However, the whole band column can be fixed as usual.

For example, the following code specifies the width and sortOrder options of the "Street" column nested within the fixed "Address" band column.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Address",
            fixed: true,
            fixedPosition: "right",
            columns: [
                "City", {
                    dataField: "Street",
                    width: 100,
                    sortOrder: "asc"
                },
                "Apartment"
            ]
        }, {
            // ...
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column
        caption="Address"
        [fixed]="true"
        fixedPosition="right">
        <dxi-column dataField="City"></dxi-column>
        <dxi-column dataField="Street" [width]="100" sortOrder="asc"></dxi-column>
        <dxi-column dataField="Apartment"></dxi-column>
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Band columns support hierarchies of any nesting level. It means that the following structure is acceptable.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "A",
            columns: [ "A1", "A2", {
                caption: "A3",
                columns: ["A31", "A32", {
                    caption: "A33",
                    columns: ["A331", "A332", "A333"]
                }]
            }]
        }, {
            caption: "B",
            columns: // ...
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column caption="A">
        <dxi-column dataField="A1"></dxi-column>
        <dxi-column dataField="A2"></dxi-column>
        <dxi-column caption="A3">
            <dxi-column dataField="A31"></dxi-column>
            <dxi-column dataField="A32"></dxi-column>
            <dxi-column caption="A33">
                <dxi-column dataField="A331"></dxi-column>
                <dxi-column dataField="A332"></dxi-column>
                <dxi-column dataField="A333"></dxi-column>
            </dxi-column>
        </dxi-column>
    </dxi-column>
    <dxi-column caption="B">
        ...
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

Band columns have the isBand flag. Banded columns have the ownerBand option set. Use these options to distinguish band and banded columns from regular ones in code.

cssClass

Specifies a CSS class to be applied to the column.

Type:

Default Value: undefined

In the following code, this option is assigned a cell-highlighted CSS class that customizes the position column's cell and header styles:

jQuery

index.js

styles.css

$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: [{
            ID: 1,
            position: "CTO"
        }, // ...
        ],
        columns: [ "ID", {
            dataField: "position",
            cssClass: "cell-highlighted"
        } ],
    });
})

.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}

Angular

app.component.html

app.component.ts

app.module.ts

app.component.css

<dx-tree-list ...
    [dataSource]="employees">
    <dxi-column dataField="ID"></dxi-column>
    <dxi-column dataField="position" cssClass="cell-highlighted"></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 {
    employees = [{
        ID: 1,
        position: "CTO"
    }, // ...
    ];
}

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

::ng-deep .dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

::ng-deep .dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}

Vue

App.vue

<template>
    <DxTreeList ...
        :data-source="employees">
        <DxColumn data-field="ID" />
        <DxColumn data-field="position" css-class="cell-highlighted" />
    </DxTreeList>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';

const employees = [{
    ID: 1,
    position: "CTO"
}, // ...
];

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    data() {
        employees
    }
};
</script>
<style>
.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}
</style>

React

App.js

styles.css

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TreeList, Column } from 'devextreme-react/tree-list';

const employees = [{
    ID: 1,
    position: "CTO"
}, // ...
];

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <TreeList ...
                dataSource={employees}>
                <Column dataField="ID" />
                <Column dataField="position" cssClass="cell-highlighted" />
            </TreeList>
        );
    }
}
export default App;

.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}

ASP.NET MVC Controls

Razor C#

styles.css

@(Html.DevExtreme().TreeList()
    .DataSource(new JS("employees"))
    .Columns(c => {
        c.Add().DataField("ID");
        c.Add().DataField("position").CssClass("cell-highlighted");
    })
)
<script type="text/javascript">
    var employees = [{
        ID: 1,
        position: "CTO"
    }, // ...
    ];
</script>

.dx-data-row .cell-highlighted {
    background-color: #e6e6e6;
}

.dx-header-row .cell-highlighted {
    color: gray;
    font-style: italic;
}

customizeText

Customizes the text displayed in column cells.

Type:

Function parameters:

cellInfo:

Information on the current cell.

Object structure:

Name	Type	Description
groupInterval	String \| Number	Indicates how header filter values were combined into groups. Available if target is "headerFilter". See the headerFilter.groupInterval option's description for possible values.
target	String	The UI element where the customizeText function was called: "row", "filterRow", "headerFilter", "search", "filterPanel", or "filterBuilder".
value	String \| Number \| Date	The cell's raw value.
valueText	String	The fomatted value converted to a string.

Return Value:

The text the cell should display.

jQuery

index.js

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Temperature",
            customizeText: function(cellInfo) {
                return cellInfo.value + " &deg;C";
            }
        }]
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-tree-list ... >
   <dxi-column
       dataField="Temperature"
       [customizeText]="customizeText"
   ></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 {
    customizeText(cellInfo) {
        return cellInfo.value + " &deg;C";
    }
}

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="Temperature" 
            :customize-text="customizeText"
        />
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTreeList, DxColumn } from "devextreme-vue/tree-list";

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    methods: {
        customizeText(cellInfo) {
            return cellInfo.value + " &deg;C";
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList, { Column } from "devextreme-react/tree-list";

class App extends React.Component {
    customizeText = (cellInfo) => {
        return cellInfo.value + " &deg;C";
    }
    render() {
        return (
            <TreeList ... >
                <Column dataField="Temperature" customizeText={this.customizeText} />
            </TreeList>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().TreeList()
    //...
    .Columns(columns => {
        columns.Add().DataField("Temperature")
            .CustomizeText("customizeText");
    })
)

<script type="text/javascript">
    function customizeText(cellInfo) {
        return cellInfo.value + " &deg;C";
    }
</script>

NOTE

The specified text is not used to sort, filter, and group data or calculate summaries. If it should be, specify the calculateCellValue function instead.

The customizeText function can be called to highlight the matching text correctly when the data displayed in the column matches the search condition.

NOTE

The this keyword refers to the column's configuration.

dataField

Binds the column to a field of the dataSource.

Type:

Default Value: undefined

The columns array can contain only the names of data source fields, which is sufficient if you do not need to specify any other column options. But if you do, then this array should contain objects that configure columns. To bind the columns to data source fields, use the dataField option. Note that you can combine both declarations in a single array as shown in the following code.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [
            "CustomerID",
            { dataField: "EmployeeID", width: 200 },
            "OrderDate",
            { dataField: "Freight", format: "fixedPoint" },
            "ShipName",
            "ShipCity"
        ]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column dataField="CustomerID"></dxi-column>
    <dxi-column dataField="EmployeeID" [width]="200"></dxi-column>
    <dxi-column dataField="OrderDate"></dxi-column>
    <dxi-column dataField="Freight" format="fixedPoint"></dxi-column>
    <dxi-column dataField="ShipName"></dxi-column>
    <dxi-column dataField="ShipCity"></dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

dataType

Casts column values to a specific data type.

Type:

Default Value: undefined

If a data field provides values of one data type, but the widget should cast them to another, specify the proper type in this option. In the following code, values of the ID and hireDate fields are cast to numeric and date data types, respectively.

jQuery

JavaScript

$(function() {
    $("#treeList").dxTreeList({
        // ...
        dataSource: [{
            ID: "1",
            hireDate: 1491821760000
        }, // ...
        ],
        columns: [{
            dataField: "ID",
            dataType: "number"
        }, {
            dataField: "hireDate",
            dataType: "date"
        }]
    });
})

Angular

HTML

TypeScript

<dx-tree-list ...
    [dataSource]="employees">
    <dxi-column
        dataField="ID"
        dataType="number">
    </dxi-column>
    <dxi-column 
        dataField="hireDate"
        dataType="date">
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    employees = [{
        ID: "1",
        hireDate: 1491821760000
    }, // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule 
    ],
    // ...
})

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().TreeList()
    .DataSource(new JS("employees"))
    .Columns(c => {
        c.Add()
            .DataField("ID")
            .DataType(GridColumnDataType.Number);
        c.Add()
            .DataField("hireDate")
            .DataType(GridColumnDataType.Date);
    })
)
<script>
    var employees = [{
        ID: "1",
        hireDate: 1491821760000
    }, // ...
    ];
</script>

Vue

<template>
    <DxTreeList ...
        :data-source="employees">
        <DxColumn
            data-field="ID"
            data-type="number"
        />
        <DxColumn
            data-field="hireDate"
            data-type="date"
        />
    </DxTreeList>
</template>
<script>
import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';

const employees = [{
    ID: '1',
    hireDate: 1491821760000
}, // ...
];

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    data() {
        employees
    }
};
</script>

React

import React from 'react';
import { TreeList, Column } from 'devextreme-react/tree-list';

const employees = [{
    ID: '1',
    hireDate: 1491821760000
}, // ...
];

class App extends React.Component {
    render() {
        return (
            <TreeList ...
                dataSource={employees}>
                <Column dataField="ID" dataType="number" />
                <Column dataField="hireDate" dataType="date" />
            </TreeList>
        );
    }
}
export default App;

NOTE

Date-time values stored as strings should have one of the following formats: "yyyy/MM/dd", "yyyy/MM/dd HH:mm:ss", "yyyy-MM-ddTHH:mm:ssx" or "yyyy-MM-ddTHH:mm:ss".

Use the GridColumnDataType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: String, Number, Date, DateTime, Boolean, and Object.

editCellComponent

An alias for the editCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

editCellRender

An alias for the editCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

editCellTemplate

Specifies a custom template for column cells in the editing state.

Type:

template

Template Data:

HTMLElement | jQuery

The current cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

Use the editCellTemplate to replace the default editor. In the template, specify the replacement editor's appearance and behavior.

The cellInfo object has the following fields:

setValue(newValue, newText): Method
A method that you should call to change the cell value and, optionally, the displayed value after the editor's value is changed.

NOTE

In batch editing mode, check that the value changed before calling this method. This ensures the cells are highlighted correctly.
data: Object
The data of the row the cell belongs to.
component: Object
The widget's instance.
value: Any
The cell value as it is specified in the data source.
displayValue: Any
The displayed cell value. Differs from the value field only when the column uses lookup or calculateDisplayValue.
text: String
displayValue after applying format and customizeText.
columnIndex: Number
The index of the column the cell belongs to.
rowIndex: Number
The index of the row the cell belongs to. Begins with 0 on each page. Refer to Column and Row Indexes for more information.
column: Object
The settings of the column the cell belongs to.

Other options that allow editor customization include:

columns[].editorOptions
Use it to specify the default editor's options (except onValueChanged).
onEditorPreparing
Use it to:
- Change the editor type.
- Override the default editor's onValueChanged handler.
- Dynamically change editor options in the editing state.
- Implement other customization cases.

NOTE

If you implement two-way data binding in your template, set twoWayBindingEnabled to false to disable this feature's built-in implementation.

editorOptions

Configures the default widget used for editing and filtering in the filter row.

Type:

The default editor widget depends on the column configuration. The following table illustrates the dependency:

Column Configuration		Default Editor
dataType:	"date" "datetime"	DateBox
	"number"	NumberBox
	"boolean"	CheckBox
	"string" "object"	TextBox
lookup is defined		SelectBox

In the editorOptions object, you can specify the default widget's options (except onValueChanged, see below). Refer to the widget's API reference for a list of available options.

Other options that allow editor customization include:

columns[].editCellTemplate
Use it to replace the default editor.
onEditorPreparing
Use it to:
- Change the editor type.
- Override the default editor's onValueChanged handler.
- Dynamically change editor options in the editing state.
- Implement other customization cases.

encodeHtml

Specifies whether HTML tags are displayed as plain text or applied to the values of the column.

Type:

Default Value: true

When true, HTML tags are displayed as plain text; when false, they are applied to the values of the column.

falseText

In a boolean column, replaces all false items with a specified text. Applies only if showEditorAlways option is false.

Type:

Default Value: 'false'

filterOperations

Specifies a set of available filter operations. Applies only if filterRow.visible and allowFiltering are true.

Type:

Array<String>

Default Value: undefined

Accepted Values: '=' | '<>' | '<' | '<=' | '>' | '>=' | 'notcontains' | 'contains' | 'startswith' | 'endswith' | 'between'

The following table lists available filters by data types. The same filters are assigned to columns of a specific data type by default.

dataType	filterOperations
"string"	[ "contains", "notcontains", "startswith", "endswith", "=", "<>" ]
"numeric"	[ "=", "<>", "<", ">", "<=", ">=", "between" ]
"date"	[ "=", "<>", "<", ">", "<=", ">=", "between" ]

The filterOperations option can also accept an empty array. In this case, the selected filter operation is "=" for all data types, and a user cannot change it.

Use the FilterOperations enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual, NotContains, Contains, StartsWith, EndsWith, and Between.

filterType

Specifies whether a user changes the current filter by including (selecting) or excluding (clearing the selection of) values. Applies only if headerFilter.visible and allowHeaderFiltering are true.

Type:

Default Value: 'include'

Accepted Values: 'exclude' | 'include'

This option accepts the following values.

include
Values in the header filter are unselected initially, and a user can select values to apply a filter.
exclude
All values in the header filter are selected initially. A user can deselect values to change the filter.

This option changes when the user clicks the Select All checkbox in the header filter:

Select All	filterType / filterValues
	`filterType: "include"` `filterValues: null`
	`filterType: "exclude"` `filterValues: null`

Use the FilterType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Include and Exclude.

filterValue

Specifies the column's filter value displayed in the filter row.

Type: any

Default Value: undefined

Raised Events: onOptionChanged

This value is applied using the selectedFilterOperation.

NOTE

The filter row and header filter can work simultaneously. If you specify the filterValue option to set up the filter row, it limits the filter values for the header filter and vice versa: if you specify the filterValues option to set up the header filter, it limits the filter row's filter values.

filterValues

Specifies values selected in the column's header filter.

Type:

Array<any>

Default Value: undefined

Raised Events: onOptionChanged

If the headerFilter.groupInterval option is set, each value in the filterValues array specifies the beginning of an interval instead of an exact value:

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "ID",
            dataType: "number",
            headerFilter: { groupInterval: 100 },
            filterValues: [500, 700], // Filter intervals are 500-600 and 700-800
        },
        // ...
        ]
    })
});

Angular

TypeScript

HTML

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    columns = [{
        dataField: "ID",
        dataType: "number",
        headerFilter: { groupInterval: 100 },
        filterValues: [500, 700], // Filter intervals are 500-600 and 700-800
    },
    // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ...
    [columns]="columns">
</dx-tree-list>

NOTE

The filter row and header filter can work simultaneously. If you specify the filterValue option to set up the filter row, it limits the filter values for the header filter and vice versa: if you specify the filterValues option to set up the header filter, it limits the filter row's filter values.

fixed

Fixes the column.

Type:

Default Value: false

fixedPosition

Specifies the widget's edge to which the column is fixed. Applies only if columns[].fixed is true.

Type:

Default Value: undefined

Accepted Values: 'left' | 'right'

Use the HorizontalEdge enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left and Right.

format

Formats a value before it is displayed in a column cell.

Type:

Format

Default Value: ''

See the format section for details on accepted values.

In the following code, the "fixedPoint" format type with a precision of 2 decimal places is applied to column values:

jQuery

index.js

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            // ...
            format: {
                type: "fixedPoint",
                precision: 2
            }
        }]
    });
});

Angular

app.component.html

app.module.ts

<dx-tree-list ... >
    <dxi-column ... >
        <dxo-format
            type="fixedPoint"
            [precision]="2">
        </dxo-format>
    </dxi-column>
</dx-tree-list>

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 ... >
            <DxFormat
                type="fixedPoint"
                :precision="2"
            />
        </DxColumn>
    </DxTreeList>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxTreeList, {
    DxColumn,
    DxFormat
} from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn,
        DxFormat
    },
    data() {
        // ...
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import TreeList, {
    Column,
    Format
} from 'devextreme-react/tree-list';

class App extends React.Component {
    // ...
    render() {
        return (
            <TreeList>
                <Column ... >
                    <Format
                        type="fixedPoint"
                        precision={2}
                    />
                </Column>
            </TreeList>
        );
    }
}
export default App;

The format option also controls the user input in cells that use the DateBox widget for editing. For cells that use other widgets, you can specify the editorOptions.format option, as shown in the following demo:

formItem

Configures the form item that the column produces in the editing state. Applies only if editing.mode is "form" or "popup".

Type:

Simple Form Item

In the following code, the Full_Name grid column in the editing state produces a form item that spans two form columns. The item's label is on top of the editor:

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        editing: {
            allowUpdating: true,
            mode: "form"
        },
        columns: [{
            dataField: "Full_Name",
            formItem: {
                colSpan: 2,
                label: {
                    location: "top"
                }
            }
        },
        // ...
        ]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxo-editing
        [allowUpdating]="true"
        mode="form">
    </dxo-editing>
    <dxi-column dataField="Full_Name">
        <dxo-form-item [colSpan]="2">
            <dxo-label location="top"></dxo-label>
        </dxo-form-item>
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().TreeList()
    // ...
    .Editing(e => e
        .AllowUpdating(true)
        .Mode(GridEditMode.Form)
    )
    .Columns(cols => {
        // ...
        cols.Add().DataField("Full_Name")
            .FormItem(item => item
                .ColSpan(2)
                .Label(l => l.Location(FormLabelLocation.Top)
            )
        );
    })
)

NOTE

The formItem object does not allow you to specify a template. Use the column's editCellTemplate instead.

headerCellComponent

An alias for the headerCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

headerCellRender

An alias for the headerCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

headerCellTemplate

Specifies a custom template for column headers.

Type:

template

Template Data:

HTMLElement | jQuery

The current header's container. It is an HTML Element or a jQuery Element when you use jQuery.

The headerInfo object has the following fields:

component: Object
The widget's instance.
columnIndex: Number
The index of the column to which the header belongs.
column: Object
The settings of the column to which the header belongs.

headerFilter

Specifies data settings for the header filter.

Type:

Default Value: undefined

hidingPriority

Specifies the order in which columns are hidden when the widget adapts to the screen or container size. Ignored if allowColumnResizing is true and columnResizingMode is "widget".

Type:

Default Value: undefined

The hidingPriority is a unique positive integer that ascends from right to left beginning with 0 by default. Columns with low hidingPriority are hidden first.

NOTE

Specifying hidingPriority for at least one column enables the column hiding feature and cancels the default hiding priorities.

NOTE

Fixed columns ignore the hidingPriority and allowHiding options.

isBand

Specifies whether the column bands other columns or not.

Type:

Default Value: undefined

Unlike normal columns, band columns do not hold data. Instead, they collect two or more columns under one column header. In most cases, to set up this layout, you can declare the band column using a hierarchical structure. For example, the following code bands three columns under the "Address" header.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Address",
            columns: ["City", "Street", "Apartment"]
        }, {
            // ...
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column caption="Address">
        <dxi-column dataField="City"></dxi-column>
        <dxi-column dataField="Street"></dxi-column>
        <dxi-column dataField="Apartment"></dxi-column>
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

If you use the customizeColumns option to configure columns, the hierarchical structure cannot be implemented. To band columns in this case, use the isBand and ownerBand options.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        customizeColumns: function(columns) {
            columns.push({ // Pushes the "Address" band column into the "columns" array
                caption: "Address",
                isBand: true
            });

            var addressFields = ["City", "Street", "Apartment"];
            for (var i = 0; i < columns.length-1; i++) {
                if (addressFields.indexOf(columns[i].dataField) > -1) // If the column belongs to "Address",
                    columns[i].ownerBand = columns.length-1; // assigns "Address" as the owner band column
            }
        }
    });
});

Angular

TypeScript

HTML

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeColumns (columns) {
        columns.push({ // Pushes the "Address" band column into the "columns" array
            caption: "Address",
            isBand: true
        });

        let addressFields = ["City", "Street", "Apartment"];
        for (let i = 0; i < columns.length - 1; i++) {
            if (addressFields.indexOf(columns[i].dataField) > -1) // If the column belongs to "Address",
                columns[i].ownerBand = columns.length - 1; // assigns "Address" as the owner band column
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ...
    [customizeColumns]="customizeColumns">
</dx-tree-list>

Band columns can have the following properties only:

NOTE

Band columns cannot nest command columns.

lookup

Specifies options of a lookup column.

Type:

Default Value: undefined

A lookup column restricts the set of values that can be chosen when a user edits or filters the column. In a lookup column, each cell is a drop-down menu. You can use a lookup column when you need to substitute displayed values with required values. For example, consider that you have two arrays of objects: drivers and buses.

JavaScript

var drivers = [
    { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 },
    { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 },
    { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 }
];

var buses = [
    { busID: 1, plates: "123456" },
    { busID: 2, plates: "AB-1234" },
    { busID: 3, plates: "CD-9876" }
];

All drivers have the busID field, which refers to a bus. If drivers is the main dataSource, the Bus ID column displays bus IDs, which provides little information to a user. It will be more useful to display bus license plates instead of IDs. For this, the buses array must be set as a lookup dataSource for the Bus ID column. Then, the names of data fields must be assigned to the valueExpr and displayExpr options. Values from the valueExpr data field will be replaced with values from the displayExpr data field.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: drivers,
        // ...
        columns: [{
            dataField: "busID",
            lookup: {
                dataSource: buses,
                valueExpr: "busID",
                displayExpr: "plates"
            }
        }]
    });
});

Angular

HTML

TypeScript

<dx-tree-list [dataSource]="drivers">
    <dxi-column dataField="busID">
        <dxo-lookup
            [dataSource]="buses"
            valueExpr="busID"
            displayExpr="plates">
        </dxo-lookup>
    </dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    drivers = [
        { driverID: 1, firstName: "John", lastName: "Smith", busID: 2 },
        { driverID: 2, firstName: "Lizzy", lastName: "Cook", busID: 1 },
        { driverID: 3, firstName: "Brian", lastName: "Hawkins", busID: 3 }
    ];
    buses = [
        { busID: 1, plates: "123456" },
        { busID: 2, plates: "AB-1234" },
        { busID: 3, plates: "CD-9876" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

With this code, the Bus ID column contains license plates instead of IDs. Moreover, the user can choose a plate number from the drop-down menu when editing cells or applying a filter to this column.

minWidth

Specifies the minimum width of the column.

Type:

Default Value: undefined

name

Specifies the identifier of the column.

Type:

Default Value: undefined

Set this option if you need to refer to the column in your code afterwards, for example, when changing a column option.

ownerBand

Specifies the band column that owns the current column. Accepts the index of the band column in the columns array.

Type:

Default Value: undefined

Main article: isBand

renderAsync

Specifies whether to render the column after other columns and elements. Use if column cells have a complex template. Requires the width option specified.

Type:

Default Value: false

selectedFilterOperation

Specifies the column's filter operation displayed in the filter row.

Type:

Default Value: undefined

Accepted Values: '<' | '<=' | '<>' | '=' | '>' | '>=' | 'between' | 'contains' | 'endswith' | 'notcontains' | 'startswith'

Raised Events: onOptionChanged

The following table lists default filter operations by data type:

dataType	Default filter operation
"string"	"contains"
"number"	"="
"date"	"="

Use the FilterOperations enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual, NotContains, Contains, StartsWith, EndsWith, and Between.

setCellValue

Specifies a function to be invoked after the user has edited a cell value, but before it will be saved in the data source.

Type:

Function parameters:

newData:

The data object where new data should be set.

value: any

The input value.

currentRowData:

A read-only parameter providing access to the current row data.

Using this function, you can process user input before it is saved to the data source. This function accepts the newData, value and currentRowData parameters. value is the user input that you should assign to one of the fields of the newData. Initially, newData is an empty object. Fill it with fields whose values should be saved in the data object of the current row. currentRowData is a read-only parameter used to access the current row data.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [
            "Price",
            {
                dataField: "Count",
                dataType: "number",
                setCellValue: function(newData, value, currentRowData) {
                    newData.Count = value;
                    newData.TotalPrice = currentRowData.Price * value;
                }
            },
            "TotalPrice",
            // ...
        ]
    });
});

Angular

TypeScript

HTML

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    setCellValue (newData, value, currentRowData) {
        newData.Count = value;
        newData.TotalPrice = currentRowData.Price * value;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ... >
    <dxi-column dataField="Price"></dxi-column>
    <dxi-column
        dataField="Count"
        dataType="number"
        [setCellValue]="setCellValue">
    </dxi-column>
    <dxi-column dataField="TotalPrice"></dxi-column>
</dx-tree-list>

Vue

App.vue

<template>
    <dx-tree-list ... >
        <dx-column data-field="Price" />
        <dx-column data-field="Count" data-type="number" />
        <dx-column data-field="TotalPrice" :set-cell-value="setCellValue" />
    </dx-tree-list>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxTreeList, DxColumn } from 'devextreme-vue/tree-list';

export default {
    components: {
        DxTreeList,
        DxColumn
    },
    // ...
    methods: {
        setCellValue(newData, value, currentRowData) {
            newData.Count = value;
            newData.TotalPrice = currentRowData.Price * value;
        }
    }
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TreeList, Column } from 'devextreme-react/tree-list';

class App extends React.Component {
    setCellValue(newData, value, currentRowData) {
        newData.Count = value;
        newData.TotalPrice = currentRowData.Price * value;
    }

    render() {
        return (
            <TreeList ... >
                <Column dataField="Price" />
                <Column dataField="Count" dataType="numeric" setCellValue={this.setCellValue}/>
                <Column dataField="TotalPrice" />
            </TreeList>
        );
    }
}
export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().TreeList()
    // ...
    .Columns(c => {
        c.Add().DataField("Price");
        c.Add().DataField("Count")
            .DataType(GridColumnDataType.Number)
            .SetCellValue(@<text>
                function(newData, value, currentRowData) {
                    newData.Count = value;
                    newData.TotalPrice = currentRowData.Price * value;
                }
            </text>);
        c.Add().DataField("TotalPrice");
    })
)

To invoke the default behavior, call the this.defaultSetCellValue(newData, value) function.

NOTE

The this keyword refers to the column's configuration.

showEditorAlways

Specifies whether the column displays its values using editors.

Type:

Default Value: false

A column cell has normal and editing states. In a normal state, the cell value is text. In the editing state, the cell contains an editor that indicates the cell value and allows a user to edit it. In certain cases, a viewer reads the cell value easier if it is indicated by an editor even in the normal state. For example, boolean values are more comprehensible when they are indicated by check boxes. To display editors in cells permanently, set the showEditorAlways option to true.

NOTE

This option has the following peculiarities.

The default value of this option depends on the column's dataType. For boolean columns, it is true; for columns of other types - false.
If you use templates, setting this option to true means that the column will always use editCellTemplate instead of cellTemplate.

showInColumnChooser

Specifies whether the column chooser can contain the column header.

Type:

Default Value: true

sortIndex

Specifies the index according to which columns participate in sorting.

Type:

Default Value: undefined

Raised Events: onOptionChanged

This option accepts an integer specifying the index of the column in a collection of columns with applied sorting. For example, consider the following data source that can provide data for three columns.

JavaScript

var dataSource = [
    { firstName: "John", lastName: "Doe", title: "Sales Manager" },
    { firstName: "Michael", lastName: "King", title: "Sales Representative" },
    // ...
];

To sort data first by the "Last Name" and then by the "First Name" column, use the following code. Note that the sortOrder option should also be specified.

jQuery

JavaScript

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [
            { dataField: "firstName", sortIndex: 1, sortOrder: "asc" },
            { dataField: "lastName", sortIndex: 0, sortOrder: "asc" },
            // ...
        ]
    });
});

Angular

HTML

TypeScript

<dx-tree-list ... >
    <dxi-column dataField="firstName" [sortIndex]="1" sortOrder="asc"></dxi-column>
    <dxi-column dataField="lastName" [sortIndex]="0" sortOrder="asc"></dxi-column>
</dx-tree-list>

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

You can set the sortIndex option at design time to specify initial sorting, or change this option using the columnOption method to sort at runtime.

sortingMethod

Specifies a custom comparison function for sorting. Applies only when sorting is performed on the client.

Type:

Function parameters:

value1: any

A value to be compared.

value2: any

A value to be compared.

Return Value:

Specifies whether value1 goes before value2.

Default Value: undefined

This function accepts two cell values and should return a number indicating their sort order:

Less than zero
value1 goes before value2.
Zero
value1 and value2 remain unchanged relative to each other.
Greater than zero
value1 goes after value2.

The string comparison is culture-insensitive by default. Use the following code to make it culture-sensitive:

jQuery

JavaScript

$(function () {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "fieldName",
            sortingMethod: function (value1, value2) {
                // Handling null values
                if(!value1 && value2) return -1;
                if(!value1 && !value2) return 0;
                if(value1 && !value2) return 1;
                // Determines whether two strings are equivalent in the current locale
                return value1.localeCompare(value2);
            }
        }]
    });
});

Angular

TypeScript

HTML

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    sortStringsConsideringCulture (value1, value2) {
        // Handling null values
        if(!value1 && value2) return -1;
        if(!value1 && !value2) return 0;
        if(value1 && !value2) return 1;
        // Determines whether two strings are equivalent in the current locale
        return value1.localeCompare(value2);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ... >
    <dxi-column
        dataField="fieldName"
        [sortingMethod]="sortStringsConsideringCulture">
    </dxi-column>
</dx-tree-list>

NOTE

The sortingMethod's value1 and value2 are the values returned from the calculateSortValue function if the latter is specified.

NOTE

The this keyword refers to the column's configuration.

sortOrder

Specifies the sort order of column values.

Type:

Default Value: undefined

Accepted Values: undefined | 'asc' | 'desc'

Raised Events: onOptionChanged

By default, rows are sorted according to the data source. Set the sortOrder option to sort rows in a required order. If you need to sort by multiple columns, specify the sortIndex option as well, or otherwise, each sorted column will get a sort index according to the position in the columns array.

Use the SortOrder enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Asc and Desc.

trueText

In a boolean column, replaces all true items with a specified text. Applies only if showEditorAlways option is false.

Type:

Default Value: 'true'

type

Specifies the command column that this object customizes.

Type:

Accepted Values: 'adaptive' | 'buttons'

validationRules

Specifies validation rules to be checked on updating cell values.

Type:

visible

Specifies whether the column is visible, that is, occupies space in the table.

Type:

Default Value: true

Raised Events: onOptionChanged

visibleIndex

Specifies the position of the column regarding other columns in the resulting widget.

Type:

Default Value: undefined

Raised Events: onOptionChanged

Visible indexes are normalized after the widget's creation: the leftmost column is assigned an index of 0; the rightmost column's index becomes equal to the number of visible columns minus 1; other columns get the indexes in between.

IMPORTANT

This index is used in column reordering only. Do not confuse it with the visible column index, which is used to manipulate cells by calling methods, such as getCellElement(rowIndex, visibleColumnIndex), editCell(rowIndex, visibleColumnIndex), etc.

width

Specifies the column's width in pixels or as a percentage. Ignored if it is less than minWidth.

Type:

|