Vue TreeList Props

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

Initially, columns appear in the order specified by the columns array. If you skip specifying this array, columns will mirror the order of fields in the first object from the dataSource. You can allow a user to reorder columns at runtime by setting the allowColumnReordering option to true.

See Also

• columns[].allowReordering

By default, the width of each column depends on the width of the widget and the total number of columns. You can allow a user to resize the columns at runtime by setting the allowColumnResizing option to true.

See Also

• columnResizingMode
• columns[].allowResizing
• columns[].width

When this option is set to true, data loaded once is saved in cache. Then, the widget takes data from this cache when performing such operations as sorting, grouping, paging, etc. Caching is helpful when the data source takes significant time to load, but consider disabling it for frequently changing data sources.

To update data in cache, call the refresh() method of the widget or the load() method of the DataSource.

See Also

• Data Caching
• getDataSource()

The cell's content may be truncated if the width of the cell's column becomes very small. In this case, when a user hovers the mouse pointer over such a cell, a hint containing the cell's value appears. To disable cell hints, assign false to the cellHintEnabled option.

When this option is set to true, all columns adjust their widths to the content. This setting may cause horizontal scrolling, but only if the overall content is longer than the width of the widget. In this case, you can fix those columns that you consider pivotal so that they were constantly on screen.

When this option is set to false, all columns have identical widths that depend on the width of the widget.

See Also

• width
• columnFixing
• wordWrapEnabled

The column chooser allows a user to hide columns at runtime. To enable it, assign true to the columnChooser.enabled option.

See Also

• Column Chooser
• columns[].allowHiding

When the width of all columns exceeds the widget width, horizontal scrolling appears. If specific columns should be on screen constantly regardless of how far the widget is scrolled, allow a user to fix them at runtime using the context menu. For this, set the columnFixing.enabled option to true.

When you enable column fixing, command columns become fixed automatically.

DataGrid Demo TreeList Demo

See Also

• Column Fixing

This option set to true makes the widget hide certain columns automatically if all the columns do not fit the widget's width. Columns with low hidingPriority are hidden first. These are the rightmost (leftmost if rtlEnabled is true) columns by default. Information from hidden columns is available in an adaptive detail row.

See Also

• onAdaptiveDetailRowPreparing
• Adaptability

See Also

• columns[].minWidth
• allowColumnResizing
• columnResizingMode

The columnResizingMode option accepts one of the following values:

• nextColumn
  When a user resizes a column, the width of the next column changes.
• widget
  When a user resizes a column, the width of the widget changes.
  This mode is ignored if you specify the width of any column in percent.

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.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Title",
            caption: "Position"
        }, {
            dataField: "FullName",
            width: 300
        }, 
            "CompanyName",
            "City"
        ]
    });
});

<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

• Columns Overview
• columnOption(id, options)
• customizeColumns

See Also

• columnMinWidth

Use this function to make minor adjustments to automatically generated columns. You can access and modify column configurations using the function's parameter.

$(function(){
    $("#treeList").dxTreeList({
        // ...
        customizeColumns: function (columns) {
            columns[0].width = 100;
            columns[1].width = 210;
        }
    })
});

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeColumns (columns) {
        columns[0].width = 100;
        columns[1].width = 210;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

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

For a more profound column customization, declare the columns array.

This option accepts one of the following:

• Array of Objects
  A simple JavaScript array containing a collection of plain objects.

• URL
  The URL of a JSON file or service that returns JSON data.

• DataSource or its configuration object
  A DataSource is an object that provides a handy API for data processing. A DataSource is a stateful object, which means that it saves data processing settings and applies them each time data is loaded. All underlying data access logic of a DataSource is isolated in a Store. A Store provides an API for reading and modifying data. Unlike the DataSource, a Store is a stateless object.

  NOTE

  If you use data mapping, features like export and selection may work incorrectly. We recommend using calculated columns instead of mapping.

The widget cannot track changes that a third party makes in the data source. To bring data in the widget up to date in this case, call the refresh() method.

See Also

• Data Binding
• Data Layer - Overview
• Data Layer - DataSource Examples

By default, the widget expects that data has a plain structure where each data item contains a "parentId" field and a unique "id" field. For items of the highest hierarchical level, "parentId" should be 0, null or undefined indicating that these items belong to the root node. The root node holds the entire hierarchy and is not visualized.

var treeListData = [
    { id: 1, parentId: 0 },
    { id: 11, parentId: 1 },
    { id: 12, parentId: 1 },
    { id: 13, parentId: 1 },
    { id: 131, parentId: 13 },
    { id: 132, parentId: 13 },
    { id: 133, parentId: 13 },
    { id: 2, parentId: 0 }
];

View Demo

If your data has a hierarchical structure where each data item contains nested items, set this option to "tree". Parent and item IDs will be generated automatically.

var treeListData = [{
    text: "item1",
    items: [{ 
        text: "item11" 
    }, { 
        text: "item12",
        items: [
            { text: "item121" }, 
            { text: "item122" }
        ]
    }]
}, { 
    text: "item2" 
}];

View Demo

See Also

• Use Plain Data
• Use Hierarchical Data
• parentIdExpr
• keyExpr
• rootValue
• itemsExpr

Without a data source, the widget cannot detect the date-time values' format. In this case, specify the dateSerializationFormat option that supports the following formats:

• "yyyy-MM-dd" - a local date

• "yyyy-MM-ddTHH:mm:ss" - local date and time

• "yyyy-MM-ddTHH:mm:ssZ" - the UTC date and time

• "yyyy-MM-ddTHH:mm:ssx" - date and time with a timezone

This option applies only if the forceIsoDateParsing field is set to true in the global configuration object.

The widget allows a user to edit data in several modes, which are detailed in the mode option. To define what editing operations a user can perform, specify the allowAdding, allowUpdating and allowDeleting options. Before enabling an operation, make sure that your data source supports it.

Watch Video

See Also

• Editing

The error row displays data-related errors that may occur on the server during the widget's runtime. Setting this option to false hides the error row, but the errors can still be viewed in the browser's console.

See Also

• onDataErrorOccured

Setting this option expands only the specified rows, but not their parents. If a to-be-expanded row lies deep in the hierarchy, make sure to include keys of all rows that nest it.

See Also

• Expand and Collapse Rows

See the FilterBuilder configuration for options that you can specify in this object.

See Also

• Filter Panel with Filter Builder

See the Popup configuration for options that you can specify in this object.

See Also

• Filter Panel with Filter Builder

The filter panel displays the applied filter expression.

Clicking on the filter expression opens the filter builder.

If you change the filter expression in the filter panel or filter builder, the changes are reflected in the filter row and header filter, and vice versa. You can disable this synchronization by setting the filterSyncEnabled option to false. In this case, the filter panel remains synchronized with the filter builder.

See Also

• Filter Panel with Filter Builder
• filterBuilderPopup

The filter row allows a user to filter data by values of individual columns.

Each cell in the filter row contains a magnifying glass icon, pausing on which opens a drop-down list with filters available for the column.

To make the filter row visible, assign true to the filterRow.visible option.

View Demo

See Also

• Filter Row
• expandNodesOnFiltering
• filter(filterExpr)
• clearFilter(filterName)

Synchronization is enabled if the filter panel is visible. When it is enabled, check that each column that allows filtering has the dataField or name option specified.

If filterSyncEnabled is true, the filter expression includes a combination of the filter row, header filter, and filter builder filters. Otherwise, it contains only the filter builder filter.

The filter expression can contain the following operations: "=", "<>", "<", ">", "<=", ">=", "between", "contains", "notcontains", "startswith", "endswith", "anyof", "noneof", and the filter builder's custom operations. Use "anyof" and "noneof" to select and clear the selection of items in the header filter's popup menu. In the following code, "anyof" is used to select items with IDs 500 and 700:

$(function() {
    $("treeListContainer").dxTreeList({
        // ...
        filterSyncEnabled: true,
        headerFilter: { visible: true },
        filterValue: ["ID", "anyof", [500, 700]], 
    })
});

<dx-tree-list ...
    [filterSyncEnabled]="true"
    [(filterValue)]="['ID', 'anyof', [500, 700]]"> 
    <dxo-header-filter 
        [visible]="true">
    </dxo-header-filter>
</dx-tree-list>

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

If a column's groupInterval option is set, the "anyof" and "noneof" operations for this column accept the beginning of intervals instead of exact values:

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

<dx-tree-list ...
    <!-- Filter intervals are 500-600 and 700-800 -->
    [(filterValue)]="['ID', 'anyof', [500, 700]]"> 
        <dxi-column
            dataField="ID"
            dataType="number">
                <dxo-header-filter 
                    [groupInterval]="100">
                </dxo-header-filter>
        </dxi-column>
</dx-tree-list>

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

See Also

• Filter Panel with Filter Builder

If you load data from the server, you need to set this option so that the widget does not render the expand button for nodes without children.

A header filter allows a user to filter values in an individual column by including or excluding them from the applied filter. A click on a header filter icon invokes a popup menu with all unique values in the column. By selecting or clearing the selection of values in this menu, the user includes or excludes them from the filter.

To make header filter icons visible, assign true to the headerFilter.visible option. Data in the popup menu can be customized using the headerFilter option of a specific column.

View Demo

See Also

• Header Filter
• columns[].allowHeaderFiltering
• filter(filterExpr)
• clearFilter(filterName)

This option accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

See Also

• Use Hierarchical Data

See Also

• Use Plain Data

The load panel is displayed while the widget loads data. It consists of a loading indicator and text, both placed on a pane.

Since the load panel is, in fact, the DevExtreme LoadPanel widget, the loadPanel object can contain any options of this widget along with options described here.

See Also

• Load Panel
• beginCustomLoading(messageText)
• endCustomLoading()

Adaptive detail rows display information from columns that were hidden when the widget adapted to the screen or container size. Each adaptive detail row contains the Form widget that you can customize within the onAdaptiveDetailRowPreparing function using the formOptions object. Refer to the Form Configuration section for details on options of the Form widget.

See Also

• columnHidingEnabled
• columns[].hidingPriority
• Adaptability

To identify whether the pointer has entered or left the cell, check the eventType field's value.

See Also

• Customize Cells

The following code shows how you can customize the context menu using this function:

$(function() {
    $("#treeListContainer").dxTreeList({
        // ... 
        onContextMenuPreparing: function(e) { 
            if (e.target == "header" && e.columnIndex == 0) {
                e.items.push({
                    text: "Item Text",
                    onItemClick: function() {
                        // ...
                    }
                });
            } 
        }
    });
});

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onContextMenuPreparing (e) { 
        if (e.target == "header" && e.columnIndex == 0) {
            e.items.push({
                text: "Item Text",
                onItemClick: function() {
                    // ...
                }
            });
        } 
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ...
    (onContextMenuPreparing)="onContextMenuPreparing($event)">
</dx-tree-list>

Handles errors that might occur in the data source. To obtain a human-readable description of the error in the function, use the error.message field.

In cell or batch editing mode, this function is executed while rendering cells of columns whose showEditorAlways option is set to true.

Numerous TreeList elements are based on editors: the search panel is a text box, the filter row uses text boxes, calendars, and select boxes, and so on. This function allows you to add custom CSS classes to those default editors. To change their configuration or substitute them for other editors, use the onEditorPreparing function.

Numerous TreeList elements are based on editors: the search panel is a text box, the filter row uses text boxes, calendars, and select boxes, and so on. Use this function to customize those default editors or substitute them for other editors.

In the following code, a default editor is replaced with the DevExtreme TextArea widget. Note that the widget's onValueChanged function is overridden, and its declaration ends with the setValue(newValue, newText) method's call. This method updates the cell value.

$(function() {
    $("#treeList").dxTreeList({
        // ...
        onEditorPreparing: function(e) {
            if (e.dataField == "description") {
                e.editorName = "dxTextArea"; 
                e.editorOptions.showClearButton = true;
                e.editorOptions.onValueChanged = (event) => {
                    var value = event.value;
                    e.setValue(value.toLowerCase()); 
                }
            }
        }
    });
});

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onEditorPreparing (e) { 
        if (e.dataField == "description") {
            e.editorName = "dxTextArea"; 
            e.editorOptions.showClearButton = true;
            e.editorOptions.onValueChanged = (event) => {
                let value = event.value;
                e.setValue(value.toLowerCase()); 
            }
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ...
    (onEditorPreparing)="onEditorPreparing($event)">
</dx-tree-list>

The following code shows how to replace a default editor with a non-DevExtreme editor (an HTML checkbox in this case):

$(function() {
    $("#treeList").dxTreeList({
        // ...
        onEditorPreparing: function(e) {
            if(e.dataField === "completed") {
                e.cancel = true; // Cancels creating the default editor
                $('<input type="checkbox">')
                    .prop("checked", e.value)
                    .on("change", (event) => {
                        e.setValue(event.target.checked); 
                    })
                    .appendTo(e.editorElement);
            }
        }
    });
});

import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onEditorPreparing (e) { 
        if(e.dataField === "completed") {
            e.cancel = true; // Cancels creating the default editor
            let checkbox = document.createElement("INPUT");
            checkbox.setAttribute("type", "checkbox");
            checkbox.setAttribute("checked", e.value);
            checkbox.addEventListener("change", (event) => {
                e.setValue(event.target.checked);
            });
            e.editorElement.appendChild(checkbox);
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

<dx-tree-list ...
    (onEditorPreparing)="onEditorPreparing($event)">
</dx-tree-list>

See Also

• Customize Editors

You cannot access widget elements in this function because it is executed before they are ready. Use the onContentReady function instead.

Using this function, you can populate a newly added row with data by default. Add fields to the data object so that they correspond to fields of a data source object. Note that the data object may omit some fields present in the data source object. Add only those fields that must initialize specific cells of a new row.

Use this function to modify the node fields. You can traverse the tree using the forEachNode(callback) method or implement your custom algorithm. Within this algorithm, start traversing from the root node, which is available via the function parameter's root field. Every node, including the root one, provides access to its child nodes in the children field, which allows traversing the whole tree.

Prior to this function, the widget executes the onCellClick function and sometimes internal functions. You can use the handled field to check whether internal functions were executed.

To cancel row collapsing, assign true to the cancel field of the function parameter.

To cancel row expansion, assign true to the cancel field of the function parameter.

The following code shows how to use the function parameter's cancel field to prevent or continue row insertion. In this code, a Promise is assigned to this field. Row insertion continues if row data validation on the server succeeds (the Promise is resolved); otherwise, row insertion is prevented (the Promise is rejected).

$(function(){
    $("#treeListContainer}").dxTreeList({
        // ...
        onRowInserting: function(e) {
            var d = $.Deferred();
            $.getJSON("https://url/to/your/validation/service", JSON.stringify(e.data))
                .then((result) => !result.errorText ? d.resolve() : d.reject(result.errorText))
                .fail(() => d.reject())
            e.cancel = d.promise();
        }
    })
})

import { DxTreeListModule } from "devextreme-angular";
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import "rxjs/add/operator/toPromise";
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/}
    onRowInserting(e) {
        let params = new HttpParams({ fromString: JSON.stringify(e.data) });
        let result = this.httpClient.get("https://url/to/your/validation/service", { params: params })
            .toPromise();
        e.cancel = new Promise((resolve, reject) => {
            result.then((validationResult) => {
                !validationResult.errorText ? resolve() : reject(validationResult.errorText)
            })
            .catch(() => reject());
        })    
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        HttpClientModule
    ],
    // ...
})

<dx-tree-list ... 
    (onRowInserting)="onRowInserting($event)">
</dx-tree-list>

The following code shows how to use the function parameter's cancel field to prevent or continue row removal. In this code, a Promise is assigned to this field. Row removal continues if checks on the server succeed (the Promise is resolved); otherwise, row removal is prevented (the Promise is rejected).

$(function(){
    $("#treeListContainer}").dxTreeList({
        // ...
        onRowRemoving: function(e) {
            var d = $.Deferred();
            $.getJSON("https://url/to/your/validation/service", JSON.stringify(e.data))
                .then((result) => !result.errorText ? d.resolve() : d.reject(result.errorText))
                .fail(() => d.reject())
            e.cancel = d.promise();
        }
    })
})

import { DxTreeListModule } from "devextreme-angular";
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import "rxjs/add/operator/toPromise";
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/}
    onRowRemoving(e) {
        let params = new HttpParams({ fromString: JSON.stringify(e.data) });
        let result = this.httpClient.get("https://url/to/your/validation/service", { params: params })
            .toPromise();
        e.cancel = new Promise((resolve, reject) => {
            result.then((validationResult) => {
                !validationResult.errorText ? resolve() : reject(validationResult.errorText)
            })
            .catch(() => reject());
        })    
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        HttpClientModule
    ],
    // ...
})

<dx-tree-list ... 
    (onRowRemoving)="onRowRemoving($event)">
</dx-tree-list>

The following code shows how to use the function parameter's cancel field to prevent or continue row updating. In this code, a Promise is assigned to this field. Row updating continues if row data validation on the server succeeds (the Promise is resolved); otherwise, row updating is prevented (the Promise is rejected).

$(function(){
    $("#treeListContainer}").dxTreeList({
        // ...
        onRowUpdating: function(e) {
            var d = $.Deferred();
            $.getJSON("https://url/to/your/validation/service", JSON.stringify(e.data))
                .then((result) => !result.errorText ? d.resolve() : d.reject(result.errorText))
                .fail(() => d.reject())
            e.cancel = d.promise();
        }
    })
})

import { DxTreeListModule } from "devextreme-angular";
import { HttpClient, HttpClientModule, HttpParams } from "@angular/common/http";
import "rxjs/add/operator/toPromise";
// ...
export class AppComponent {
    constructor(private httpClient: HttpClient) { /*...*/}
    onRowUpdating(e) {
        let params = new HttpParams({ fromString: JSON.stringify(e.data) });
        let result = this.httpClient.get("https://url/to/your/validation/service", { params: params })
            .toPromise();
        e.cancel = new Promise((resolve, reject) => {
            result.then((validationResult) => {
                !validationResult.errorText ? resolve() : reject(validationResult.errorText)
            })
            .catch(() => reject());
        })    
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        HttpClientModule
    ],
    // ...
})

<dx-tree-list ... 
    (onRowUpdating)="onRowUpdating($event)">
</dx-tree-list>

Use this function to interfere before a message on the broken validation rules is displayed. For instance, you can perform additional checks in this function and change the validation result by changing the isValid field of the function parameter. Or, you can correct the error message using the errorText field of the same parameter.

See Also

• getSelectedRowKeys(mode)
• getSelectedRowsData(mode)

This function allows you to customize the toolbar. Depending on the configuration, the widget may add the following items to the toolbar:

• - "columnChooserButton"
• - "addRowButton"
• - "saveButton"
• - "revertButton"
• - "exportButton"
• - "applyFilterButton"
• "searchPanel"

The following code shows how you can customize the toolbar using this function.

$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onToolbarPreparing: function (e) {
            var toolbarItems = e.toolbarOptions.items;
            // Modifies an existing item
            toolbarItems.forEach(function(item) {
                if (item.name === "saveButton") {
                    // Change the item options here
                }
            });

            // Adds a new item
            toolbarItems.push({
                widget: "dxButton", 
                options: { icon: "user", onClick: function() { ... } },
                location: "after"
            });
        }
    });
});

import { DxTreeListModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    onToolbarPreparing (e) { 
        var toolbarItems = e.toolbarOptions.items;
        // Modifies an existing item
        toolbarItems.forEach(function(item) {
            if (item.name === "saveButton") {
                // Change the item options here
            }
        });

        // Adds a new item
        toolbarItems.push({
            widget: "dxButton", 
            options: { icon: "user", onClick: function () { ... } },
            location: "after"
        });
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule,
        DxButtonModule
    ],
    // ...
})

<dx-tree-list ...
    (onToolbarPreparing)="onToolbarPreparing($event)">
</dx-tree-list>

The pager is an element that allows users to navigate through pages and change their size at runtime. The pager consists of the page navigator and several optional elements: the page size selector, navigation buttons, and page information.

View Demo

See Also

• Paging - User Interaction

Paging allows the widget to render rows by pages instead of rendering them at once. To enable paging, set the paging.enabled option to true.

View Demo

See Also

• Paging

See Also

• Use Plain Data

Server-side data processing improves the widget's performance on large datasets. When the server does not implement particular operations (and/or the corresponding remoteOperations fields are false) they are executed on the client. Note that the widget may send queries to the server while executing a client-side operation.

The following table lists the possible remoteOperations configurations and the operations the server should implement. The server should also implement additional operations depending on the used widget functionality.

When operations are performed on the server side, the TreeList does not support:

• sorting, grouping, and filtering by columns with the calculateCellValue or calculateDisplayValue option defined;
• custom sorting using functions (that is, calculateSortValue accepts strings only).

Web API Service Demo

See Also

• Data Binding: Web API Service | PHP Service | MongoDB Service | Custom Sources

See Also

• columns.renderAsync

All rows are monochrome without any visual distinctions by default. If you set this option to true, ordinary-looking rows will alternate with slightly shaded ones.

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

Scrolling allows a user to browse data left outside the current viewport. The widget provides several scrolling modes detailed in the mode option description.

See Also

• Scrolling

The search panel allows searching for values in several columns at once. The widget searches against only those columns whose allowSearch option is set to true.

To make the search panel visible, set the searchPanel.visible option to true.

View Demo

See Also

• Search Panel
• searchByText(text)

See Also

• Initial and Runtime Selection
• getSelectedRowKeys(mode)
• getSelectedRowsData()

A user can select rows in a single or multiple mode. In multiple mode, a user can select all rows at once. To disable this feature, assign false to the allowSelectAll.

See Also

• Selection
• onSelectionChanged

See Also

• columns[].caption

A user can sort rows by values of a single or multiple columns depending on the value of the sorting.mode option.

To apply sorting to a column, a user clicks its header or selects a command from the context menu.

Note that rows are sorted within their hierarchical level.

View Demo

See Also

• Sorting

State storing enables the widget to save applied settings and restore them the next time the widget is loaded. These settings include filtering, sorting, column order and width, selection, and others. Assign true to the stateStoring.enabled option to enable this functionality.

View Demo

See Also

• state()

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

Two-way data binding ensures that the UI tracks changes made in the data source by a 3rd-party component, and vice versa. This way, the widget and its data source stay synchronized. If you implement two-way data binding in the widget on your own using the cellTemplate and/or editCellTemplate options, make sure to set the twoWayBindingEnabled option to false.

This option accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }