New to Kendo UI for jQuery? Start a free 30-day trial

Columns

configuration

The configuration of the TreeList columns whcih represents an array of JavaScript objects or strings. JavaScript objects are interpreted as column configurations. Strings are interpreted as the field to which the column is bound. The TreeList will create a column for each item of the array.

columns

Array

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      "lastName",
      "position"
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "	VP, Engineering" }
    ]
  });
</script>

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName", title: "Last Name" },
      { field: "position", title: "Position" }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "	VP, Engineering" }
    ]
  });
</script>

columns.attributes

Object

The HTML attributes of the table cell (<td>) that is rendered for the column.

Quote all HTML attributes which are JavaScript keywords (for example, class).

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      {
        field: "position",
        attributes: {
          "class": "highlight",
          style: "text-align: right"
        }
      }
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "	VP, Engineering" }
    ]
  });
</script>
<style>
  .highlight {
    color: red;
  }
</style>
//The table cells look like `<td role="gridcell" class="highlight" style="text-align: right;">...</td>`.

columns.columns

Array

The columns which will be rendered as child columns under this group column header.

Group columns cannot be data-bound and support a limited number of bound column settings such as title or locked.

<div id="treelist"></div>
<script>
$("#treelist").kendoTreeList({
    columns: [
    {
        title: "Personal Info",
        columns: [
            { field: "lastName" },
            { field: "age" }
        ]
    },
    {
        title: "Work info",
        columns: [
            { field: "position" }
        ]
    }
  ],
  dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", age: 25, position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", age: 33, position: "	VP, Engineering" }
    ]
});
</script>

columns.command

Array

The configuration of the column commands. If set, the column will display a button for every command. Commands can be custom or built-in

The built-in commands are:

edit - Switches the current table row to edit mode. Supports the inline and popup edit modes.
createChild- Adds a new child item to the current table row and switches to edit mode.
destroy - Removes the data item to which the current table row is bound.

Custom commands are supported by specifying the click option.

Each custom command requires you to explicitly specify its name.

A command column cannot be expandable.

The built-in commands work only if editing is enabled through the editable option and the DataSource of the TreeList is configured for CRUD operations.

  <div id="treelist"></div>

  <script>
      var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";

      $("#treelist").kendoTreeList({
        editable: true,
        height: 540,
        columns: [
          { field: "FirstName", expandable: true, title: "First Name", width: 220 },
          { field: "LastName", title: "Last Name", width: 100 },
          { field: "Position" },
          { title: "Edit", command: [ "createChild", "edit" ], width: 180 }
        ],
        dataSource: {
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/EmployeeDirectory/All"
            },
            update: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
              type: "POST",
              contentType: "application/json"
            },
            create: {
              url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
              type: "POST",
              contentType: "application/json"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return kendo.stringify(options.models);
              }
            }
          },
          schema: {
            model: {
              id: "EmployeeId",
              parentId: "ReportsTo",
              fields: {
                EmployeeId: { type: "number", editable: false, nullable: false },
                ReportsTo: { nullable: true, type: "number" },
                FirstName: { validation: { required: true } },
                LastName: { validation: { required: true } },
                Position: { type: "string" }
              },
              expanded: true
            }
          }
        }
      });
  </script>

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName", title: "Last Name" },
      { field: "position", title: "Position" },
      { command: [
        {
          name: "details",
          text: "Details",
          click: function(e) {
            // command button click handler
          },
          icon: "info-circle"
        },
        { name: "destroy" } // built-in "destroy" command
      ]}
    ],
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "	VP, Engineering" }
    ]
  });
</script>

columns.draggable

Boolean

If set to true a draghandle will be rendered and the user could reorder the rows by dragging the row via the drag handle.

Note that the reordering operation is only a client-side operation and it does not reflect the order of any data that is bound to the server.

Default: false

  <div id="treelist"></div>
  <script>
    var service = "https://demos.telerik.com/service/v2/core";

    $("#treelist").kendoTreeList({
      dataSource: {
        transport: {
          read: {
            url: service + "/EmployeeDirectory/All"
          }
        },
        schema: {
          model: {
            id: "EmployeeID",
            parentId: "ReportsTo",
            fields: {
              ReportsTo: { field: "ReportsTo",  nullable: true },
              EmployeeID: { field: "EmployeeId", type: "number" },
              Extension: { field: "Extension", type: "number" }
            },
            expanded: true
          }
        }
      },
      height: 540,
      editable: {
        move: {
          reorderable: true
        }
      },
      columns: [
        { draggable: true, width: "40px" },
        { field: "FirstName", title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" }
      ]
    });
  </script>

columns.editable

Function

The JavaScript function that is executed when the cell or row is about to be opened for editing. The returned result will determine whether an editor for the column will be created.

<div id="treelist"></div>
<script>
    $("#treelist").kendoTreeList({
        columns: [
          {
              field: "lastName",
              title: "Last Name",
              editable: function(dataItem) {
                  return dataItem.lastName !== "Jackson";
              }
          },
          { field: "position", title: "Position", },
          { title: "Edit", command: ["edit"], width: 250 }
        ],
        editable: true,
        dataSource: [
          { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
          { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
        ]
    });
</script>

columns.editor

String|Function

Provides a way to specify a custom editing UI for the column. To create the editing UI, use the container parameter.

The editing UI has to contain an element with a set name HTML attribute. The attribute value has to match the field name.

The validation settings that are defined in the model.fields configuration will not be applied automatically. In order for the validation to work, you (the developer) are responsible for attaching the corresponding validation attributes to the editor input. If the custom editor is a widget, to avoid visual issues, you can customize the tooltip position of the validation warning.

When used as String, defines the editor widget type. For further info check the Form API: field

Parameters:containerjQuery

The jQuery object that represents the container element.

optionsObject

options.fieldString

The name of the field to which the column is bound.

options.formatString

The format string of the column that is specified through the format option.

options.modelkendo.data.TreeListModel

The model instance to which the current table row is bound.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      {
        field: "lastName",
        editor: function(container, options) {
          // create an input element
          var input = $("<input/>");
          // set its name to the field to which the column is bound ('lastName' in this case)
          input.attr("name", options.field);
          // append it to the container
          input.appendTo(container);
          // initialize a Kendo UI AutoComplete
          input.kendoAutoComplete({
            dataTextField: "lastName",
            dataSource: [
              { lastName: "Jackson" },
              { lastName: "Strong" },
              { lastName: "Simon"}
            ]
          });
        }
      },
      {
        field: "number",
        editor: function(container, options) {
          $('<input required name="' + options.field + '"/>')
            .appendTo(container)
          // initialize a Kendo UI NumericTextBox
          .kendoNumericTextBox({
            decimals: 2,
            step: 0.1
          });
        },
        format: "{0:0}"
      },
      { field: "position"},
      { command: [ "edit" ] }
    ],
    editable: true,
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", number: 10342.16, position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", number: 18031.11, position: "VP, Engineering" }
    ]
  });
</script>

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      {
        field: "lastName",
        editor: function(container, options) {
          // create input element and add the validation attribute
          var input = $('<input name="' + options.field + '" required="required" />');
          // set its name to the field to which the column is bound ('lastName' in this case)
          input.attr("name", options.field);
          // append it to the container
          input.appendTo(container);
          // initialize a Kendo UI AutoComplete
          input.kendoAutoComplete({
            dataTextField: "lastName",
            dataSource: [
              { lastName: "Jackson" },
              { lastName: "Strong" },
              { lastName: "Simon"}
            ]
          });
        }
      },
      { field: "position"},
      { command: [ "edit" ] }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
    ]
  });
</script>

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      {
        field: "lastName",
        editor: "AutoComplete",
        editorOptions: {
          dataTextField: "lastName",
          dataSource: [
            { lastName: "Jackson" },
            { lastName: "Strong" },
            { lastName: "Simon"}
          ]
        }
      },
      {
        field: "number",
        format: "{0:0}"
      },
      { field: "position"},
      { command: [ "edit" ] }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", number: 10342.16, position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", number: 18031.11, position: "VP, Engineering" }
    ]
  });
</script>

columns.editorOptions

Object

Defines the widget configuration when one is initialized as editor for the column (or the widget defined in items.editor). For further info check the Form API: field.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      {
        field: "lastName",
        editor: "AutoComplete",
        editorOptions: {
          dataTextField: "lastName",
          dataSource: [
            { lastName: "Jackson" },
            { lastName: "Strong" },
            { lastName: "Simon"}
          ]
        }
      },
      {
        field: "number",
        format: "{0:0}",
        editor: "NumericTextBox",
        editorOptions: {
          decimals: 2,
          step: 0.1
        }
      },
      { field: "position"},
      { command: [ "edit" ] }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", number: 10342.16, position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", number: 18031.11, position: "VP, Engineering" }
    ]
  });
</script>

columns.encoded

Boolean

If set to true, the column value will be HTML-encoded before it is displayed. If set to false, the column value will be displayed as is. By default, the column value is HTML-encoded.

Default: true

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName"},
      { field: "position", encoded: false},
      { command: [ "edit" ] }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "<strong>CEO</strong>" },
      { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
    ]
  });
</script>

columns.expandable

Boolean

If set to true, the column will show the icons that are used for expanding and collapsing child rows. By default, the first column of the TreeList is expandable.

An expandable column cannot hold commands.

Default: false

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
            { field: "name" },
            { field: "age", expandable: true }
        ],
        dataSource: {
            data: [
                { id: 1, parentId: null, name: "Jane Doe", age: 22 },
                { id: 2, parentId: 1, name: "John Doe", age: 24 }
            ]
        }
    });
</script>

columns.field

String

The field to which the column is bound. The value of this field is displayed by the column during data binding.

The field name has to be a valid Javascript identifier, has to contain only alphanumeric characters, $, or _, and must not start with a digit.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position" },
      { command: [ "edit" ] }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
    ]
  });
</script>

columns.filterable

Boolean|Object

If set to true and if filtering is enabled, a filter menu will be displayed for this column. If set to false, the filter menu will not be displayed. By default, a filter menu is displayed for all columns when filtering is enabled through the filterable option. Can be set to a JavaScript object which represents the filter menu configuration.

Default: true

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position", filterable: false }
    ],
    editable: "popup",
    dataSource: [
      { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
      { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
    ]
  });
</script>

columns.footerTemplate

String|Function

The template which renders the footer table cell for the column.

The following fields can be used in the template:

average - The value of the average aggregate (if specified).
count - The value of the count aggregate (if specified).
max - The value of the max aggregate (if specified).
min - The value of the min aggregate (if specified).
sum - The value of the sum aggregate (if specified).

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
      columns: [
        { field: "name" },
        { field: "age",
          footerTemplate: "Min: #: min # Max: #: max #"
        }
      ],
      dataSource: {
        data: [
          { id: 1, parentId: null, name: "Jane Doe", age: 30 },
          { id: 2, parentId: 1, name: "John Doe", age: 33 },
          { id: 3, parentId: 1, name: "Joseph Doe", age: 42 }
        ],
        aggregate: [
            { field: "age", aggregate: "min" },
            { field: "age", aggregate: "max" }
        ]
      }
    });
</script>

columns.format

String

The format that is applied to the value before it is displayed. Takes the {0:format} form where format is a standard number format, custom number format, standard date format or a custom date format.

The kendo.format function is used to format the value.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "successRate", format: "{0:p}" },
      { field: "hireDate", format: "{0:dd/MMM/yyyy}" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", successRate: 0.7, hireDate: new Date(2012, 2, 3) },
        { id: 2, parentId: 1, lastName: "Weber", successRate: 0.8, hireDate: new Date(2012, 7, 13) }
      ]
    }
  });
</script>

columns.headerAttributes

Object

The HTML attributes of the table header cell (<th>) that is rendered for the column.

Quote the HTML attributes which are JavaScript keywords (for example, class).

<div id="treeList"></div>
<script>
  var dataSource = new kendo.data.TreeListDataSource({
      data: [
        { id: 1, parentId: null, lastName: "Jackson" },
        { id: 2, parentId: 1, lastName: "Weber" }
      ]
  });
  $("#treeList").kendoTreeList({
    columns: [ {
      field: "lastName",
      headerAttributes: {
        "class": "name-header",
        style: "text-align: right"
      }
    } ],
    dataSource: dataSource
  });
</script>
// The table headers will look like `<th class="name-header" style="text-align: right">...</th>`.

columns.headerTemplate

String|Function

The template which renders the column header content. By default, the value of the title column option is displayed in the column header cell.

If sorting is enabled, the column header content will be wrapped in an <a> element. As a result, the template must contain only inline elements.

<div id="treelist"></div>
<script>
    $("#treelist").kendoTreeList({
        columns: [ {
            field: "lastName",
            headerTemplate: '<input type="checkbox" id="check-all" /><label for="check-all">check all</label>'
        }],
        dataSource: {
            data: [
                { id: 1, parentId: null, lastName: "Jackson" },
                { id: 2, parentId: 1, lastName: "Weber" }
            ]
        }
    });
</script>

columns.hidden

Boolean

If set to true, the TreeList will not display the column. By default, all columns are displayed.

Default: false

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
            { field: "name" },
            { field: "age", hidden: true }
        ],
        dataSource: {
            data: [
                { id: 1, parentId: null, name: "Jane Doe", age: 22 },
                { id: 2, parentId: 1, name: "John Doe", age: 24 }
            ]
        }
    });
</script>

columns.includeChildren

Boolean

If set to true, the TreeList will select all child rows upon parent row selection when checkbox selection is used.

Default: false

<div id="treelist"></div>
<script>
    $("#treelist").kendoTreeList({
      columns: [
        { selectable: true, includeChildren: true },
        { field: "id", width: 250},
        { field: "name", width: 250 },
        { field: "age", width: 250}
      ],
      dataSource: [
          { id: 1, parentId: null, name: "Jane Doe", age: 31, city: "Boston" },
          { id: 2, parentId: 1, name: "John Doe", age: 55, city: "New York" }
      ]
    });
</script>

columns.lockable

Boolean

If set to false, the column will remain in that side of the TreeList where its own locked configuration placed it.

This option is useful when the TreeList has columns which are configured with a locked value. Setting it explicitly to false will

prevent the user from locking or unlocking this column while using the user interface.

Default: true

<div id="treeList" style="width: 500px"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "id", locked: true, width: 100},
      { field: "name", width: 200 },
      { field: "age", width: 250, lockable: false }
    ],
    reorderable: true,
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 }
      ]
    }
  });
</script>

columns.locked

Boolean

If set to true, the TreeList will display the column as locked (frozen).

Default: false

<div id="treeList" style="width: 500px"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "id", locked: true, width: 100},
      { field: "name", width: 200 },
      { field: "age", width: 250 }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, name: "Jane Doe", age: 22 },
        { id: 2, parentId: 1, name: "John Doe", age: 24 }
      ]
    }
  });
</script>

columns.menu

Boolean

If set to true, the TreeList will display the column in the column menu. By default, the column menu includes all data-bound columns, that is, the ones with a set field option.

<div id="treeList"></div>
<script>
    $("#treeList").kendoTreeList({
        columns: [
            { field: "id", menu: false },
            { field: "name" },
            { field: "age" }
        ],
        columnMenu: true,
        dataSource: {
            data: [
                { id: 1, parentId: null, name: "Jane Doe", age: 22 },
                { id: 2, parentId: 1, name: "John Doe", age: 24 }
            ]
        }
    });
</script>

columns.minScreenWidth

Number

The pixel screen width below which the column will be hidden. The setting takes precedence over the hidden setting and the two cannot not be used at the same time.

<div id="treelist"></div>
<script>
    $("#treelist").kendoTreeList({
      columns: [
        { field: "id", width: 250, minScreenWidth: 500 }, //column will become hidden if screen size is less than 500px
        { field: "name", width: 250 }, //column will always be visible
        { field: "age", width: 250, minScreenWidth: 750 } //column will become hidden if screen size is less than 750px
      ],
      dataSource: [
          { id: 1, parentId: null, name: "Jane Doe", age: 31, city: "Boston" },
          { id: 2, parentId: 1, name: "John Doe", age: 55, city: "New York" }
      ]
    });
</script>

columns.selectable

Boolean

If set to true the treelist will render a select column with checkboxes in each cell, thus enabling multi-row selection. The header checkbox allows users to select/deselect all the rows on the current page.

Default: false

<div id="treelist"></div>
<script>
    $("#treelist").kendoTreeList({
      columns: [
        { selectable: true, width: 65 },
        { field: "id", width: 250},
        { field: "name", width: 250 },
        { field: "age", width: 250}
      ],
      dataSource: [
          { id: 1, parentId: null, name: "Jane Doe", age: 31, city: "Boston" },
          { id: 2, parentId: 1, name: "John Doe", age: 55, city: "New York" }
      ]
    });
</script>

columns.sortable

Boolean|Object

If set to true and sorting is enabled, the user can click the column header and sort the TreeList by the column field. If set to false, sorting will be disabled for this column. By default, all columns are sortable if sorting is enabled though the sortable option.

Default: true

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position", sortable: false }
    ],
    sortable: true,
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" },
        { id: 3, parentId: 1, lastName: "Carr", position: "VP, Finance" }
      ]
    }
  });
</script>

columns.template

String|Function

The template which renders the column content. The TreeList renders table rows (<tr>) which represent the data source items. Each table row consists of table cells (<td>) which represent the TreeList columns. By default, the HTML-encoded value of the field is displayed in the column.

To customize the way the column displays its value, use template.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName" },
      { field: "position", template: "<strong>#: position #</strong>" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
      ]
    }
  });
</script>

<div id="treelist"></div>

<script type="text/x-kendo-template" id="template">
    # if (data.allowVote) { #
        <button class='k-button btn-vote'>Vote</button>
    # } #
</script>

<script>
$("#treelist")
  .kendoTreeList({
    columns: [
      { field: "name" },
      { template: $("#template").html() }
    ],
    dataSource: [
      { allowVote: true, name: "Jane Doe" },
      { allowVote: true, name: "Joseph Doe" },
      { name: "John Doe" }
    ]
  })
  .on("click", ".btn-vote", function(e) {
    var treelist = $(e.delegateTarget).data("kendoTreeList");
    var dataItem = treelist.dataItem(e.currentTarget);
    alert("Voted for " + dataItem.name)
  });
</script>

columns.title

String

The text that is displayed in the column header cell. If not set, the TreeList uses field.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName", title: "Last Name" },
      { field: "position", title: "Position" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
      ]
    }
  });
</script>

columns.width

String|Number

The width of the column. Numeric values are treated as pixels.

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName", width: "200px" },
      { field: "position" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
      ]
    }
  });
</script>

<div id="treelist"></div>
<script>
  $("#treelist").kendoTreeList({
    columns: [
      { field: "lastName", width: 200 },
      { field: "position" }
    ],
    dataSource: {
      data: [
        { id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
        { id: 2, parentId: 1, lastName: "Weber", position: "VP, Engineering" }
      ]
    }
  });
</script>

To set the column width after the TreeList initialization you can use the setOptions() method.

Related Members