columns[]

Configures columns.

Type: Array
Default Value: undefined

This option accepts an array of objects, where each object configures a single column. If a column does not need to be customized, this array may include the name of the field that provides data for this column.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Title",
            caption: "Position"
        }, {
            dataField: "FullName",
            width: 300
        }, 
            "CompanyName",
            "City"
        ]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column dataField="Title" caption="Position"></dxi-column>
    <dxi-column dataField="FullName" [width]="300"></dxi-column>
    <dxi-column dataField="CompanyName"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
See Also

alignment

Aligns the content of the column.

Type: String
Default Value: undefined
Accepted Values: undefined | 'left' | 'center' | 'right'

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

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

When using the widget as an ASP.NET MVC Control, specify this option using the HorizontalAlignment enum. 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: Boolean
Default Value: true
NOTE
If values in the column are calculated customarily using the calculateCellValue option, they cannot be edited at runtime.
See Also

allowFiltering

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

Type: Boolean
Default Value: true
See Also

allowFixing

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

Type: Boolean
Default Value: true
See Also

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: Boolean
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: Boolean
Default Value: true
See Also

allowReordering

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

Type: Boolean
Default Value: true

allowResizing

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

Type: Boolean
Default Value: true
See Also

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: Boolean
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: Boolean
Default Value: true
NOTE
In a column with calculated values, this option is set to false by default.
See Also

calculateCellValue

Calculates custom values for column cells.

Type: function
Function parameters:
rowData: Object

Data of the row to which the cell belongs.

Return Value: any

A cell's custom value.

Column cells contain values from the data field by default, but you can populate them with custom values instead. For this, declare the calculateCellValue function that will be called each time a new row is rendered.

Certain features are disabled in a column with calculated values by default. The following list specifies these features and how you can enable them:

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

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

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            calculateCellValue: function (rowData) {
                // ...
                return this.defaultCalculateCellValue(rowData);
            }
        }]
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    calculateCellValue (rowData) {
        // ...
        return this.defaultCalculateCellValue(rowData);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-column [calculateCellValue]="calculateCellValue" ... ></dxi-column>
</dx-tree-list>
See Also

calculateDisplayValue

Calculates custom display values for column cells. Used when display values should differ from values for editing.

Function parameters:
rowData: Object

The data of the row to which the cell belongs.

Return Value: any

A display value for the cell.

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
    ],
    // ...
})
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.

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
    ],
    // ...
})
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>    
NOTE
Do not use this option to format text in the cells. Use customizeText for this.
See Also

calculateFilterExpression

Specifies the column's custom filtering rules.

Type: function
Function parameters:
filterValue: any

A user input value.

selectedFilterOperation: String

The currently selected filter operation.

target: String

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

Return Value: Filter expression

A filter expression.

This function must return a filter expression, which is an array of the following format:

[selector, selectedFilterOperation, filterValue]
  • selector
    A data source field or a function providing actual values for the column. If you are in doubt what to pass here, pass this.calculateCellValue.
  • selectedFilterOperation
    A comparison operator. One of the following: "=", "<>", ">", ">=", "<", "<=", "between", "startswith", "endswith", "contains", "notcontains".
  • filterValue
    A user input value. Values provided by the selector are compared to this value.

The following code snippet shows the default implementation of the calculateFilterExpression function. Adapt it according to your needs.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            calculateFilterExpression: function (filterValue, selectedFilterOperation) {
                // Implementation for the "between" comparison operator
                if (selectedFilterOperation === "between" && $.isArray(filterValue)) {
                    var filterExpression = [
                        [this.calculateCellValue, ">=", filterValue[0]], 
                        "and", 
                        [this.calculateCellValue, "<=", filterValue[1]]
                    ];
                    return filterExpression;
                }
                return [this.calculateCellValue, selectedFilterOperation || '=', filterValue];
            },
            // ...
        }]
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    calculateFilterExpression (filterValue, selectedFilterOperation) {
        // Implementation for the "between" comparison operator
        if (selectedFilterOperation === "between" && $.isArray(filterValue)) {
            var filterExpression = [
                [this.calculateCellValue, ">=", filterValue[0]], 
                "and", 
                [this.calculateCellValue, "<=", filterValue[1]]
            ];
            return filterExpression;
        }
        return [this.calculateCellValue, selectedFilterOperation || '=', filterValue];
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-column [calculateFilterExpression]="calculateFilterExpression"></dxi-column>
</dx-tree-list>

As you can see from the previous code, the filter expression for the "between" comparison operator should have a slightly different format.

[[selector, ">=", startValue], "and", [selector, "<=", endValue]]
NOTE

Call the this.defaultCalculateFilterExpression(filterValue, selectedFilterOperation) function and return its result to invoke the default behavior.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        columns: [{
            calculateFilterExpression: function(filterValue, selectedFilterOperation) {
                // ...
                return this.defaultCalculateFilterExpression(filterValue, selectedFilterOperation);
            }
        }]
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    calculateFilterExpression (filterValue, selectedFilterOperation) {
        // ...
        return this.defaultCalculateFilterExpression(filterValue, selectedFilterOperation);
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-column [calculateFilterExpression]="calculateFilterExpression" ... ></dxi-column>
</dx-tree-list>

calculateSortValue

Calculates custom values to be used in sorting.

Function parameters:
rowData: Object

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) {
        if (rowData.Position == "CEO")
            return this.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>

caption

Specifies a caption for the column.

Type: String
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.

cellTemplate

Specifies a custom template for column cells.

Type: template
Function parameters:
cellElement: jQuery

The cell that you are customizing.

cellInfo: Object

The settings of the cell.

Use this option to specify completely custom markup for column cells. See template for information on what this option accepts.

Below is the list of fields passed as the cellInfo object.

  • data: Object
    Data of the row to which the cell belongs.
  • component: jQuery
    The widget's instance.
  • value: Any
    The value of the cell as it is specified in the data source.
  • displayValue: Any
    The display value of the cell. 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 to which the cell belongs.
  • rowIndex: Number
    The index of the row to which the cell belongs. Begins with 0 on each page.
  • column: Object
    The settings of the column to which the cell belongs.

It is also possible to define a cell template using the following template engines. You can access the aforementioned cell settings inside the template in a similar manner.

When you use a template engine, the cellTemplate option should be given a jQuery object or a DOM node representing the template's container, or a function that returns either of them.

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.
See Also

columns

Columns banded by the current column.

Type: Array
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: String
Default Value: undefined

customizeText

Customizes the text displayed in column cells.

Type: function
Function parameters:
cellInfo: Object

The settings of a cell.

Object structure:

The value of the cell as it is specified in the data source.

valueText: String

The value of the cell with applied format.

target: String

Indicates the type of the UI element where the customizeText function was called.
Possible values: "filterRow", "headerFilter" and "search".

groupInterval: String|Number

Indicates how header filter values were combined into groups. Available if target is "headerFilter".
For possible values, see the description of the headerFilter.groupInterval option.

Return Value: String

The text for the cell.

dataField

Binds the column to a field of the dataSource.

Type: String
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: String
Default Value: undefined
Accepted Values: 'string' | 'number' | 'date' | 'boolean' | 'object'

If your data source stores, for example, numbers as strings, specify the proper data type using the dataType option.

Date-time values have the following specifics.

  • If date-time values are stored as strings, they 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".
  • To show both date and time in a column editor, set the format option to a value that includes date and time parts, and assign "datetime" to the editorOptions.type option as shown in the following code.

    jQuery
    JavaScript
    $(function() {
        $("#treeListContainer").dxTreeList({
            // ...
            columns: [{
                dataField: "HireDate",
                dataType: "date",
                format: "shortDateShortTime",
                editorOptions: { type: "datetime" }
            }]
        });
    });
    Angular
    HTML
    TypeScript
    <dx-tree-list>
        <dxi-column
            dataField="HireDate"
            dataType="date"
            format="shortDateShortTime"
            editorOptions="{ type: 'datetime' }">
        </dxi-column>
    </dx-tree-list>
    import { DxTreeListModule } from 'devextreme-angular';
    // ...
    export class AppComponent {
        // ...
    }
    @NgModule({
        imports: [
            // ...
            DxTreeListModule
        ],
        // ...
    })

When using the widget as an ASP.NET MVC Control, specify this option using the GridColumnDataType enum. This enum accepts the following values: String, Number, Date, Boolean and Object.

editCellTemplate

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

Type: template
Function parameters:
cellElement: jQuery

The cell that you are customizing.

cellInfo: Object

The settings of the cell.

By default, a user edits a string value contained within a cell. Using the editCellTemplate option, you can specify completely custom markup for the cell so that it contained, for example, a combo box or another widget instead of the string value. See template for information on what the editCellTemplate option accepts.

Below is the list of fields passed as the cellInfo object.

  • data: Object
    Data of the row to which the cell belongs.
  • component: jQuery
    The widget's instance.
  • value: Any
    The value of the cell as it is specified in the data source.
  • displayValue: Any
    The display value of the cell. 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 to which the cell belongs.
  • rowIndex: Number
    The index of the row to which the cell belongs. Begins with 0 on each page.
  • column: Object
    The settings of the column to which the cell belongs.
  • setValue(newValue): Method
    Saves the edited value. After this method is called, the editing process concludes.

    NOTE
    A call of this method tells the widget that the value is changed. Because of this, in batch edit mode, an edited cell can be highlighted even if its value was not actually changed, for example, if a user switched this cell into the editing state and then immediately switched it back without changing the value. To prevent this behavior, check that the value has actually been changed before calling the setValue(newValue) method.

It is also possible to define the template using the following template engines. You can access the aforementioned cell settings inside the template in a similar manner.

When you use a template engine, the editCellTemplate option should be given a jQuery object or a DOM node representing the template's container, or a function that returns either of them.

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.
See Also

editorOptions

Specifies options for the underlain editor.

Type: Object

Depending in the dataType, the column offers a user different widgets for editing: TextBox, DateBox, Lookup, etc. In the editorOptions object, you can specify options for the editing widget.

NOTE

Do not specify the onValueChanged option in this object. If you need to add custom logic to the standard value change handler, override the handler in the onEditorPreparing function in the following manner.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onEditorPreparing: function(e) {
            if (e.dataField == "requiredDataField") {
                var standardHandler = e.editorOptions.onValueChanged;
                e.editorOptions.onValueChanged = function(e) { // Overriding the standard handler
                    // ...
                    // Custom commands go here
                    // ...
                    standardHandler(e); // Calling the standard handler to save the edited value
                }
            }
        }
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    onEditorPreparing (e) {
        if (e.dataField == "requiredDataField") {
            let standardHandler = e.editorOptions.onValueChanged;
            e.editorOptions.onValueChanged = function (e) { // Overriding the standard handler
                // ...
                // Custom commands go here
                // ...
                standardHandler(e); // Calling the standard handler to save the edited value
            }
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... 
    (onEditorPreparing)="onEditorPreparing($event)">
</dx-tree-list>

encodeHtml

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

Type: Boolean
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: String
Default Value: 'false'
See Also

filterOperations

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

Type: Array
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.

When using the widget as an ASP.NET MVC Control, specify this option using the FilterOperations enum. This enum accepts the following values: Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual, NotContains, Contains, StartsWith, EndsWith and Between.

See Also

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: String
Default Value: 'include'
Accepted Values: 'include' | 'exclude'

This option accepts the following values.

  • include
    Values in the header filter are unselected initially, and the user changes the filter by selecting, that is, including the values.
  • exclude
    All values in the header filter are selected initially, and the user changes the filter by clearing the selection of certain values, that is, by excluding them.

When using the widget as an ASP.NET MVC Control, specify this option using the FilterType enum. This enum accepts the following values: Include and Exclude.

See Also

filterValue

Specifies a filter value for the column.

Type: any
Default Value: undefined

You can specify a filter value for the column using this option as if a user set this value with the filter row. This value is applied using the selectedFilterOperation.

filterValues

Specifies filter values for the column's header filter.

Type: Array
Default Value: undefined

You can specify filter values for the column using this option as if a user set them with the header filter.

fixed

Fixes the column.

Type: Boolean
Default Value: false
See Also

fixedPosition

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

Type: String
Default Value: undefined
Accepted Values: 'left' | 'right'

When using the widget as an ASP.NET MVC Control, specify this option using the HorizontalEdge enum. This enum accepts the following values: Left and Right.

See Also

format

Specifies a format for the values displayed in the column.

Type: Format
Default Value: ''
NOTE
DevExtreme widgets provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from topics in the Installation section.
See Also

formItem

Configures the form item produced by this column in the editing state. Used only if editing.mode is "form" or "popup".

The SimpleItem section describes the options that you can specify in this object.

See Also

headerCellTemplate

Specifies a custom template for the column header.

Type: template
Function parameters:
columnHeader: jQuery

The header that you are customizing.

headerInfo: Object

The settings of the header.

Below is the list of fields passed as the headerInfo object.

  • component: jQuery
    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.

It is also possible to define the template using the following template engines. You can access the aforementioned header settings inside the template in a similar manner.

When you use a template engine, the headerCellTemplate option should be given a jQuery object or a DOM node representing the template's container, or a function that returns either of them.

See Also

headerFilter

Specifies data settings for the header filter.

Type: Object
Default Value: undefined
See Also

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: Number
Default Value: undefined

The lower the index assigned to this option, the higher the probability that this column is hidden. Indexes ascend from right to left beginning with 0 by default, which means that the rightmost column is hidden first when the widget adapts.

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

isBand

Specifies whether the column bands other columns or not.

Type: Boolean
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
        });

        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
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ...
    [customizeColumns]="customizeColumns">
</dx-tree-list>
NOTE
Band columns must not have the dataField option set.

The column with the isBand flag set to true can have the following properties only.

See Also

lookup

Specifies options of a lookup column.

Type: Object
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 for 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
JavaScript
<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: Number
Default Value: undefined

name

Specifies the identifier of the column.

Type: String
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: Number
Default Value: undefined

Main article: isBand

selectedFilterOperation

Specifies the selected filter operation for the column.

Type: String
Default Value: undefined
Accepted Values: '=' | '<>' | '<' | '<=' | '>' | '>=' | 'notcontains' | 'contains' | 'startswith' | 'endswith' | 'between'

By default, the selected filter operation depends on the data type of the column as follows.

dataTypeDefault filter operation
"string""contains"
"number""="
"date""="

When using the widget as an ASP.NET MVC Control, specify this option using the FilterOperations enum. 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
Function parameters:
rowData: Object

The data object where new data should be set.

value: any

The input value.

Using this function, you can process user input before it will be saved in the data source. This function accepts the rowData and value parameters. value is the user input that you should assign to one of the fields of the rowData. Initially, rowData is an empty object. Fill it with fields whose values should be saved in the data object of the current row.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [
            "field1",
            {
                dataField: "field2",
                setCellValue: function(rowData, value) {
                    rowData.field2 = value;
                    rowData.field1 = null;
                }
            },
            // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column dataField="field1"></dxi-column>
    <dxi-column dataField="field2" [setCellValue]="setCellValue"></dxi-column>
</dx-tree-list>
import { DxTreeListModule } from 'devextreme-angular';
// ...
export class AppComponent {
    setCellValue (rowData, value) {
        rowData.field2 = value;
        rowData.field1 = null;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
NOTE
To invoke the default behavior, call the this.defaultSetCellValue(rowData, value) function.

showEditorAlways

Specifies whether the column displays its values using editors.

Type: Boolean
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.
See Also

showInColumnChooser

Specifies whether the column chooser can contain the column header.

Type: Boolean
Default Value: true
See Also

sortIndex

Specifies the index according to which columns participate in sorting.

Type: Number
Default Value: undefined

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]="1" 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
Function parameters:
value1: any

A value to be compared.

value2: any

A value to be compared.

Return Value: Number

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

When implementing the sortingMethod function, you can access the column's configuration using the this keyword.

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

sortOrder

Specifies the sort order of column values.

Type: String
Default Value: undefined
Accepted Values: undefined | 'asc' | 'desc'

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.

When using the widget as an ASP.NET MVC Control, specify this option using the SortOrder enum. This enum accepts the following values: Asc and Desc.

See Also

trueText

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

Type: String
Default Value: 'true'
See Also

validationRules

Specifies validation rules to be checked on updating cell values.

Type: Array
See Also

visible

Specifies whether the column is visible or not.

Type: Boolean
Default Value: true

visibleIndex

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

Type: Number
Default Value: undefined

width

Specifies the column's width in pixels or percentages. Ignored if less than minWidth.

Type: Number|String
Default Value: undefined

The option can hold a value of the following types:

  • Number
    The column's width in pixels.
  • String
    A CSS-accepted measurement of the column's width (for example, "55px", "80%" and "auto").
See Also