JavaScript/jQuery TreeList - Adaptability

The TreeList can hide columns and adapt its layout to screens of different sizes. Data from hidden columns is available in adaptive detail rows. A user can click the ellipsis buttons in the adaptive column to expand or collapse these rows:

DevExtreme HTML5 JavaScript jQuery Knockout Angular TreeList Adaptability

Hide Columns

When the total width of columns exceeds component width, the TreeList either truncates column cell text or adds horizontal scrolling. As an alternative, the component can hide one or several columns to prevent horizontal scrolling and display cell text in full. To enable this feature, set the columnHidingEnabled property to true.

Each column has a unique default hiding priority. The rightmost column has the priority of 0. This value is incremented by 1 for columns from right to left; the column with the lowest priority is hidden first.

You can use the columns[].hidingPriority property to specify custom hiding priorities for those columns that you want to hide. Other columns will never be hidden. This will override the default behavior described above. In this case, the columnHidingEnabled property can be omitted.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • columnHidingEnabled: true,
  • // These columns will be hidden in the following order:
  • columns: [{
  • // ...
  • hidingPriority: 0 // first
  • }, {
  • // ...
  • hidingPriority: 1 // second
  • }, {
  • // ...
  • hidingPriority: 2 // third
  • }]
  • });
  • });

View Demo

NOTE

If your TreeList is inside a resizable container, you must call the updateDimensions() method on each container resize to rerender the component:

JavaScript
  • $("#treeListContainer").dxTreeList("updateDimensions");

Customize Adaptive Detail Row

Adaptive detail rows contain the Form UI component. You can implement the onAdaptiveDetailRowPreparing handler to customize the Form: change its properties in the formOptions attribute of the function's argument. For example, the following code marks the form's "OrderID" data field as required:

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • // ...
  • onAdaptiveDetailRowPreparing: function (e) {
  • for (let formItem of e.formOptions.items) {
  • if (formItem.dataField == "OrderID") {
  • formItem.isRequired = true;
  • }
  • }
  • }
  • });
  • });

Expand and Collapse Adaptive Detail Rows

You can call the expandAdaptiveDetailRow(key) or collapseAdaptiveDetailRow() method to expand or collapse an adaptive detail row. To check whether a specific row is expanded, use the isAdaptiveDetailRowExpanded(key) method. Note that only one detail row can be expanded at a time.

JavaScript
  • var expandAdaptiveDetailRow = function (key, treeListInstance) {
  • if (!treeListInstance.isAdaptiveDetailRowExpanded(key)) {
  • treeListInstance.expandAdaptiveDetailRow(key);
  • }
  • }
See Also