TreeListComponent

Represents the Kendo UI TreeList component for Angular.

import { Component } from '@angular/core';
import { Employee, employees } from './employees';

@Component({
    selector: 'my-app',
    template: `
        <kendo-treelist [kendoTreeListFlatBinding]="data" [height]="410" kendoTreeListExpandable
                idField="id" parentIdField="managerId">
            <kendo-treelist-column [expandable]="true" field="name" title="Name" [width]="250">
            </kendo-treelist-column>
            <kendo-treelist-column field="title" title="Title" [width]="180"></kendo-treelist-column>
            <kendo-treelist-column field="phone" title="Phone" [width]="180"></kendo-treelist-column>
        </kendo-treelist>
    `
})
export class AppComponent {
    public data: Employee[] = employees;
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeListModule } from '@progress/kendo-angular-treelist';
import { IntlModule } from '@progress/kendo-angular-intl';
import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        TreeListModule,
        IntlModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

export interface Employee {
    id: number;
    managerId?: number;
    name: string;
    title: string;
    phone: string;
    hireDate?: Date;
}

export const employees: Employee[] = [
    {
        id: 1,
        name: 'Daryl Sweeney',
        title: 'Chief Executive Officer',
        phone: '(555) 924-9726',
        managerId: null,
        hireDate: new Date('2019-01-15')
    },
    {
        id: 2,
        name: 'Guy Wooten',
        title: 'Chief Technical Officer',
        phone: '(438) 738-4935',
        managerId: 1,
        hireDate: new Date('2019-02-19')
    },
    {
        id: 32,
        name: 'Buffy Weber',
        title: 'VP, Engineering',
        phone: '(699) 838-6121',
        managerId: 2,
        hireDate: new Date('2019-04-13')
    },
    {
        id: 11,
        name: 'Hyacinth Hood',
        title: 'Team Lead',
        phone: '(889) 345-2438',
        managerId: 32,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 60,
        name: 'Akeem Carr',
        title: 'Junior Software Developer',
        phone: '(738) 136-2814',
        managerId: 11,
        hireDate: new Date('2018-01-18')
    },
    {
        id: 78,
        name: 'Rinah Simon',
        title: 'Software Developer',
        phone: '(285) 912-5271',
        managerId: 11,
        hireDate: new Date('2018-03-17')
    },
    {
        id: 42,
        name: 'Gage Daniels',
        title: 'Software Architect',
        phone: '(107) 290-6260',
        managerId: 32,
        hireDate: new Date('2019-03-14')
    },
    {
        id: 43,
        name: 'Constance Vazquez',
        title: 'Director, Engineering',
        phone: '(800) 301-1978',
        managerId: 32,
        hireDate: new Date('2018-03-18')
    },
    {
        id: 46,
        name: 'Darrel Solis',
        title: 'Team Lead',
        phone: '(327) 977-0216',
        managerId: 43,
        hireDate: new Date('2019-04-15')
    },
    {
        id: 47,
        name: 'Brian Yang',
        title: 'Senior Software Developer',
        phone: '(565) 146-5435',
        managerId: 46,
        hireDate: new Date('2019-02-21')
    },
    {
        id: 50,
        name: 'Lillian Bradshaw',
        title: 'Software Developer',
        phone: '(323) 509-3479',
        managerId: 46,
        hireDate: new Date('2019-05-23')
    },
    {
        id: 51,
        name: 'Christian Palmer',
        title: 'Technical Lead',
        phone: '(490) 421-8718',
        managerId: 46,
        hireDate: new Date('2019-04-16')
    },
    {
        id: 55,
        name: 'Summer Mosley',
        title: 'QA Engineer',
        phone: '(784) 962-2301',
        managerId: 46,
        hireDate: new Date('2019-09-21')
    },
    {
        id: 56,
        name: 'Barry Ayers',
        title: 'Software Developer',
        phone: '(452) 373-9227',
        managerId: 46,
        hireDate: new Date('2018-04-16')
    },
    {
        id: 59,
        name: 'Keiko Espinoza',
        title: 'Junior QA Engineer',
        phone: '(226) 600-5305',
        managerId: 46,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 61,
        name: 'Candace Pickett',
        title: 'Support Officer',
        phone: '(120) 117-7475',
        managerId: 46,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 63,
        name: 'Mia Caldwell',
        title: 'Team Lead',
        phone: '(848) 636-6470',
        managerId: 43,
        hireDate: new Date('2018-07-17')
    },
    {
        id: 65,
        name: 'Thomas Terry',
        title: 'Senior Enterprise Support Officer',
        phone: '(764) 831-4248',
        managerId: 63,
        hireDate: new Date('2018-07-14')
    },
    {
        id: 67,
        name: 'Ruth Downs',
        title: 'Senior Software Developer',
        phone: '(138) 991-1440',
        managerId: 63,
        hireDate: new Date('2018-08-14')
    },
    {
        id: 70,
        name: 'Yasir Wilder',
        title: 'Senior QA Engineer',
        phone: '(759) 701-8665',
        managerId: 63,
        hireDate: new Date('2019-08-17')
    },
    {
        id: 71,
        name: 'Flavia Short',
        title: 'Support Officer',
        phone: '(370) 133-9238',
        managerId: 63,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 74,
        name: 'Aaron Roach',
        title: 'Junior Software Developer',
        phone: '(958) 717-9230',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 75,
        name: 'Eric Russell',
        title: 'Software Developer',
        phone: '(516) 575-8505',
        managerId: 63,
        hireDate: new Date('2019-09-13')
    },
    {
        id: 76,
        name: 'Cheyenne Olson',
        title: 'Software Developer',
        phone: '(241) 645-0257',
        managerId: 63,
        hireDate: new Date('2018-09-18')
    },
    {
        id: 77,
        name: 'Shaine Avila',
        title: 'UI Designer',
        phone: '(844) 435-1360',
        managerId: 63,
        hireDate: new Date('2018-01-22')
    },
    {
        id: 81,
        name: 'Chantale Long',
        title: 'Senior QA Engineer',
        phone: '(252) 419-6891',
        managerId: 63,
        hireDate: new Date('2018-09-14')
    },
    {
        id: 83,
        name: 'Dane Cruz',
        title: 'Junior Software Developer',
        phone: '(946) 701-6165',
        managerId: 63,
        hireDate: new Date('2019-03-15')
    },
    {
        id: 84,
        name: 'Regan Patterson',
        title: 'Technical Writer',
        phone: '(265) 946-1765',
        managerId: 63,
        hireDate: new Date('2019-05-17')
    },
    {
        id: 85,
        name: 'Drew Mckay',
        title: 'Senior Software Developer',
        phone: '(327) 293-0162',
        managerId: 63,
        hireDate: new Date('2019-05-21')
    },
    {
        id: 88,
        name: 'Bevis Miller',
        title: 'Senior Software Developer',
        phone: '(525) 557-0169',
        managerId: 63,
        hireDate: new Date('2018-08-15')
    },
    {
        id: 89,
        name: 'Bruce Mccarty',
        title: 'Support Officer',
        phone: '(936) 777-8730',
        managerId: 63,
        hireDate: new Date('2019-10-21')
    },
    {
        id: 90,
        name: 'Ocean Blair',
        title: 'Team Lead',
        phone: '(343) 586-6614',
        managerId: 43,
        hireDate: new Date('2018-06-20')
    },
    {
        id: 91,
        name: 'Guinevere Osborn',
        title: 'Software Developer',
        phone: '(424) 741-0006',
        managerId: 90,
        hireDate: new Date('2019-06-17')
    },
    {
        id: 92,
        name: 'Olga Strong',
        title: 'Graphic Designer',
        phone: '(949) 417-1168',
        managerId: 90,
        hireDate: new Date('2018-06-15')
    },
    {
        id: 93,
        name: 'Robert Orr',
        title: 'Support Officer',
        phone: '(977) 341-3721',
        managerId: 90,
        hireDate: new Date('2018-06-22')
    },
    {
        id: 95,
        name: 'Odette Sears',
        title: 'Senior Software Developer',
        phone: '(264) 818-6576',
        managerId: 90,
        hireDate: new Date('2019-05-20')
    },
    {
        id: 45,
        name: 'Zelda Medina',
        title: 'QA Architect',
        phone: '(563) 359-6023',
        managerId: 32,
        hireDate: new Date('2018-08-16')
    },
    {
        id: 3,
        name: 'Priscilla Frank',
        title: 'Chief Product Officer',
        phone: '(217) 280-5300',
        managerId: 1,
        hireDate: new Date('2019-04-22')
    },
    {
        id: 4,
        name: 'Ursula Holmes',
        title: 'EVP, Product Strategy',
        phone: '(370) 983-8796',
        managerId: 3,
        hireDate: new Date('2018-01-15')
    },
    {
        id: 24,
        name: 'Melvin Carrillo',
        title: 'Director, Developer Relations',
        phone: '(344) 496-9555',
        managerId: 3,
        hireDate: new Date('2018-01-17')
    },
    {
        id: 29,
        name: 'Martha Chavez',
        title: 'Developer Advocate',
        phone: '(140) 772-7509',
        managerId: 24,
        hireDate: new Date('2018-05-14')
    },
    {
        id: 30,
        name: 'Oren Fox',
        title: 'Developer Advocate',
        phone: '(714) 284-2408',
        managerId: 24,
        hireDate: new Date('2018-07-19')
    },
    {
        id: 41,
        name: 'Amos Barr',
        title: 'Developer Advocate',
        phone: '(996) 587-8405',
        managerId: 24,
        hireDate: new Date('2019-01-16')
    }
  ];

Selector

kendo-treelist

Export Name

Accessible in templates as #kendoTreeListInstance="kendoTreeList"

Inputs

aria-label string

An optional accessible description of the component.

autoSize boolean

Indicates whether the TreeList columns will be resized during initialization so that
they fit their headers and row content. Defaults to false.
Columns with autoSize set to false are excluded.
To dynamically update the column width to match the new content,
refer to this example.

columnMenu boolean | ColumnMenuSettings (default: false)

Specifies if the column menu of the columns will be displayed (see example).

filter CompositeFilterDescriptor

The descriptor by which the data will be filtered (see examples).

filterable FilterableSettings

Enables the filtering of the TreeList columns that have their field option set.

height number

Defines the height (in pixels) that is used when the scrollable option of the TreeList is set.
To set the height of the TreeList, you can also use style.height. The style.height
option supports units such as px, %, em, rem, and others.

hideHeader boolean

Specifies if the header of the treelist will be hidden. The header is visible by default.

The header includes column headers and the filter row.

loading boolean (default: false)

Specifies if the loading indicator of the TreeList will be displayed (see example).

navigable boolean

If set to true, the user can use dedicated shortcuts to interact with the TreeList.
By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.

pageSize number (default: 10)

Defines the page size used by the TreeList when paging is enabled.

pageable PagerSettings | boolean

Configures the pager of the TreeList (see example).

The available options are:

  • buttonCount: Number—Sets the maximum numeric buttons count before the buttons are collapsed.
  • info: Boolean—Toggles the information about the current page and the total number of records.
  • type: PagerType—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values.
  • pageSizes: Boolean or Array<number>—Shows a menu for selecting the page size.
  • previousNext: Boolean—Toggles the Previous and Next buttons.

reorderable boolean (default: false)

If set to true, the user can reorder columns by dragging their header cells
(see example).

resizable boolean (default: false)

If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells
(see example).

rowHeight number

Defines the row height that is used when the scrollable option of the TreeList is set to virtual.
Required by the virtual scrolling functionality.

scrollable ScrollMode

Defines the scroll mode used by the TreeList.

The available options are:

  • none—Renders no scrollbar.
  • scrollable—The default scroll mode. It requires the setting of the height option.

sortable SortSettings

Enables the sorting of the TreeList columns that have their field option set.

trackBy TrackByFunction<TreeListItem>

A function that defines how to track changes for the data rows.

By default, the TreeList tracks changes by the index of the data item.
Edited rows are tracked by reference.
In some cases, you might need to override the default behavior,
for example, when you implement editing with immutable data items.

The following example demonstrates how to track items only by index.

import { Component } from '@angular/core';
import { TreeListItem } from '@progress/kendo-angular-treelist';

@Component({
   selector: 'my-app',
   template: `
       <kendo-treelist [data]="treelistData" [trackBy]="trackBy">
       </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;

   public trackBy(index: number, item: TreeListItem): any {
       console.log(item);
       return index;
   }
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

virtualColumns boolean

If set to true, the treelist will render only the columns in the current viewport.

data Array | TreeListDataResult | Observable

Sets the data of the TreeList. If an array is provided, the TreeList automatically gets the total count
(more information and example).

fetchChildren (node: any) => Observable | any[]

Gets or sets the callback function that retrieves the child nodes for a particular node.

hasChildren (node: any) => boolean

Gets or sets the callback function that indicates if a particular node has child nodes.

idField string (default: "id")

The name of the field which contains the unique identifier of the node.

isExpanded (node: any) => boolean

Sets the callback function that indicates if a particular item is expanded.

isSelected IsSelectedFn

Provides a callback that determines if the given row / cell is selected.

rowClass RowClassFn

Defines a function that is executed for every data row in the component.

import { Component, ViewEncapsulation } from '@angular/core';
import { RowClassArgs } from '@progress/kendo-angular-treelist';

@Component({
   selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styles: [`
       .k-treelist tr.even { background-color: #f45c42; }
       .k-treelist tr.odd { background-color: #41f4df; }
   `],
   template: `
       <kendo-treelist [data]="treelistData" [rowClass]="rowCallback">
       </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;

   public rowCallback(context: RowClassArgs) {
       const isEven = context.index % 2 == 0;
       return {
           even: isEven,
           odd: !isEven
       };
   }
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

selectable boolean | SelectableSettings

Specified the treelist selection settings

skip number

Defines the number of records to be skipped by the pager.
Required by the paging functionality.

sort Array

The descriptors by which the data will be sorted (see example).

Fields

columns QueryList<ColumnBase>

A query list of all declared columns.

activeCell NavigationCell

Returns the currently focused cell (if any).

activeRow NavigationRow

Returns the currently focused row (if any).

Events

add EventEmitter<AddEvent>

Fires when the user clicks the Add command button to add a new row
(see example).

cancel EventEmitter<CancelEvent>

Fires when the user clicks the Cancel command button to close a row
(see example).

cellClick EventEmitter<CellClickEvent>

Fires when the user clicks a cell (see example).

cellClose EventEmitter<CellCloseEvent>

Fires when the user leaves an edited cell (see example).

collapse EventEmitter<ExpandEvent>

Fires when an item is collapsed.

columnLockedChange EventEmitter<ColumnLockedChangeEvent>

Fires when the user changes the locked state of the columns from the column menu or by reordering the columns.

columnReorder EventEmitter<ColumnReorderEvent>

Fires when the user completes the reordering of the column.

columnResize EventEmitter>

Fires when the user completes the resizing of the column.

columnVisibilityChange EventEmitter<ColumnVisibilityChangeEvent>

Fires when the user changes the visibility of the columns from the column menu or column chooser.

contentScroll EventEmitter<ContentScrollEvent>

Fires when the treelist content is scrolled.
For performance reasons, the event is triggered outside the Angular zone. Enter the Angular zone if you make any changes that require change detection.

dataStateChange EventEmitter<DataStateChangeEvent>

Fires when the data state of the TreeList is changed.

edit EventEmitter<EditEvent>

Fires when the user clicks the Edit command button to edit a row
(see example).

excelExport EventEmitter<ExcelExportEvent>

Fires when the user clicks the Export to Excel command button.

expand EventEmitter<ExpandEvent>

Fires when an item is expanded.

filterChange EventEmitter<CompositeFilterDescriptor>

Fires when the TreeList filter is modified through the UI.
You have to handle the event yourself and filter the data.

pageChange EventEmitter<PageChangeEvent>

Fires when the page of the TreeList is changed (see example).
You have to handle the event yourself and page the data.

pdfExport EventEmitter<PDFExportEvent>

Fires when the user clicks the Export to PDF command button.

remove EventEmitter<RemoveEvent>

Fires when the user clicks the Remove command button to remove a row
(see example).

save EventEmitter<SaveEvent>

Fires when the user clicks the Save command button to save changes in a row
(see example).

scrollBottom EventEmitter<ScrollBottomEvent>

Fires when the user scrolls to the last record on the page and enables endless scrolling
(see example).
You have to handle the event yourself and page the data.

selectionChange EventEmitter<SelectionChangeEvent>

Fires when the TreeList selection is changed.

sortChange EventEmitter>

Fires when the sorting of the TreeList is changed (see example).
You have to handle the event yourself and sort the data.

Methods

addRow

Creates a new row editor (see example).

Parameters

group any

The FormGroup that describes
the edit form. If called with a data item, it will build the FormGroup from the data item fields.

parent? any

autoFitColumn

Applies the minimum possible width for the specified column,
so that the whole text fits without wrapping. This method expects the TreeList
to be resizable (set resizable to true).
Makes sense to execute this method only
after the TreeList is already populated with data.

@Component({
   selector: 'my-app',
   template: `
       <kendo-treelist
           #treelist
           [data]="treelistData"
           [resizable]="true"
           style="height: 300px">
           <ng-template kendoTreeListToolbarTemplate>
                <button class="k-button" (click)="treelist.autoFitColumn(groupColumn)">
                    Auto-fit the group column
                </button>
           </ng-template>
           <kendo-treelist-column-group #groupColumn title="Product Info">
               <kendo-treelist-column
                   field="ProductID"
                   [width]="50"
                   [minResizableWidth]="30"
                   title="ID">
               </kendo-treelist-column>

               <kendo-treelist-column
                   field="ProductName"
                   title="Product Name">
               </kendo-treelist-column>
           </kendo-treelist-column-group>

           <kendo-treelist-column
               field="UnitPrice"
               title="Unit Price"
               [width]="180"
               filter="numeric"
               format="{0:c}">
           </kendo-treelist-column>
       </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

Parameters

column ColumnBase

autoFitColumns

Applies the minimum possible width for the specified columns,
so that the whole text fits without wrapping.
If no argument is supplied, autoFitColumns auto-fits
the content of current TreeList columns. This method expects the TreeList
to be resizable (set resizable to true).
Makes sense to execute this method only
after the TreeList is already populated with data.

@Component({
   selector: 'my-app',
   template: `
     <kendo-treelist
         #treelist
         [data]="treelistData"
         [resizable]="true"
         style="height: 300px">
         <ng-template kendoTreeListToolbarTemplate>
             <button class="k-button" (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
                 Auto-fit the first and last column
             </button>
             <button class="k-button" (click)="treelist.autoFitColumns()">
                 Auto-fit all columns
             </button>
         </ng-template>
         <kendo-treelist-column-group title="Product Info">
             <kendo-treelist-column
                 #firstColumn
                 field="ProductID"
                 [width]="50"
                 [minResizableWidth]="30"
                 title="ID">
             </kendo-treelist-column>

             <kendo-treelist-column
                 field="ProductName"
                 title="Product Name"
                 >
             </kendo-treelist-column>
         </kendo-treelist-column-group>

         <kendo-treelist-column
             #lastColumn
             field="UnitPrice"
             title="Unit Price"
             [width]="180"
             filter="numeric"
             format="{0:c}">
         </kendo-treelist-column>
     </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

Parameters

columns Array<ColumnBase> | QueryList<ColumnBase>

cancelCell

Closes the current cell in edit mode.

closeCell

Closes the current cell in edit mode and fires
the cellClose event.

Returns

boolean Indicates whether the edited cell was closed.
A false value indicates that the
cellClose event was prevented.

closeRow

Closes the editor for a given row (see example).

Parameters

item any
isNew boolean

collapse

Collapses the row for the specified dataItem.

Parameters

dataItem any

drawPDF

Exports the TreeList element to a Drawing Group by using the kendo-treelist-pdf component options.
(see example).

Returns

Promise - A promise that will be resolved with the Drawing Group.

editCell

Puts the cell that is specified by the table row and column in edit mode.

Parameters

dataItem any
column number | string | any

The leaf column index, or the field name or the column instance that should be edited.

group? any

The FormGroup
that describes the edit form.

editRow

Switches the specified table row in the edit mode (see example).

Parameters

item any
group? any

The FormGroup
that describes the edit form.

options? {[skipFocus: string]: boolean}

Additional options. Use skipFocus to determine if the row's edit element should be focused. Defaults to false.

expand

Expands the row for the specified dataItem.

Parameters

dataItem any

focus

Focuses the last active or the first cell of the TreeList.

Returns

NavigationCell The focused cell.

focusCell

Focuses the cell with the specified row and column index.

The row index is based on the logical structure of the TreeList and does not correspond to the data item index:

  • Header rows are indexed and start at row #0.
  • Group headers and footers are indexed.

If the TreeList is configured for scrolling, including virtual scrolling, the scroll position will be updated.
If the row is not present on the current page, the method will have no effect.

Parameters

rowIndex number

The row index to focus.

colIndex number

The column index to focus.

Returns

NavigationCell The focused cell.

focusNextCell

Focuses the next cell, optionally wrapping to the next row.

Parameters

wrap boolean

A Boolean value which indicates if the focus will move to the next row. Defaults to true.

Returns

NavigationCell The focused cell. If the focus is already on the last cell, returns null.

focusPrevCell

Focuses the previous cell. Optionally wraps to the previous row.

Parameters

wrap boolean

A Boolean value which indicates if the focus will move to the next row. Defaults to true.

Returns

NavigationCell The focused cell. If the focus is already on the first cell, returns null.

isEditing

Returns a flag which indicates if a row or a cell is currently edited.

Returns

boolean A flag which indicates if a row or a cell is currently edited.

isEditingCell

Returns a flag which indicates if a cell is currently edited.

Returns

boolean A flag which indicates if a cell is currently being edited.

reload

Clears the already loaded children for the dataItem so that the TreeList will fetch them again the next time it is rendered.

Parameters

dataItem any
reloadChildren? boolean

reorderColumn

Changes the position of the specified column.
The reordering of columns operates only on the level
which is inferred by the source column.
For the reorderColumn method to work properly,
the source column has to be visible.

@Component({
   selector: 'my-app',
   template: `
       <kendo-treelist
           #treelist
           [data]="treelistData"
           [reorderable]="true"
           style="height: 300px">
           <ng-template kendoTreeListToolbarTemplate>
                <button class="k-button"
                    (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
                    Move the group column before the last one.
                </button>
           </ng-template>
           <kendo-treelist-column-group #groupColumn title="Product Info">
               <kendo-treelist-column
                   field="ProductID"
                   [width]="50"
                   title="ID">
               </kendo-treelist-column>

               <kendo-treelist-column
                   field="ProductName"
                   title="Product Name">
               </kendo-treelist-column>
           </kendo-treelist-column-group>

           <kendo-treelist-column
               field="UnitPrice"
               title="Unit Price"
               [width]="180"
               format="{0:c}">
           </kendo-treelist-column>

           <kendo-treelist-column
               field="Discontinued"
               title="Discontinued"
               [width]="100">
           </kendo-treelist-column>
       </kendo-treelist>
   `
})
class AppComponent {
   public treelistData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }, {
   "ProductID": 2,
   "ProductName": "Chang",
   "UnitPrice": 19.0000,
   "Discontinued": false
 }
];

Parameters

source ColumnBase

The column whose position will be changed.

destIndex number

The new position of the column.

options ColumnReorderConfig

Additional options.

saveAsExcel

Initiates the Excel export (see example).

saveAsPDF

Initiates the PDF export (see example).

scrollTo

Scrolls to the specified row and column

Parameters

request ScrollRequest

updateView

Updates the state of the current view without reloading the data.

Checks all currently rendered items for changes and
triggers re-evaluation of the the isExpanded and
isSelected callbacks.