Angular UI Components Documentation

Sets or gets the altRows property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [altRows]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the autoRowHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [autoRowHeight]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the aggregatesHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [aggregatesHeight]="40">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the autoShowLoadElement property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [autoShowLoadElement]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the checkboxes property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [checkboxes]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the columnsHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsHeight]="40">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the columns property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the columnGroups property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnGroups]="columnGroups">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the columnsResize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsResize]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the columnsReorder property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [columnsReorder]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [disabled]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the editable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [editable]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

interface TreeGridEditSettings {
     saveOnPageChange?: Boolean;
     saveOnBlur?: Boolean;
     saveOnSelectionChange?: Boolean;
     cancelOnEsc?: Boolean;
     editSingleCell?: Boolean;
     editOnDoubleClick?: Boolean;
     editOnF2?: Boolean;
}

Sets or gets the editSettings property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [editSettings]="editSettings">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

interface TreeGridExportSettings {
     columnsHeader?: Boolean;
     hiddenColumns?: Boolean;
     serverURL?: String | Any;
     characterSet?: String;
     collapsedRecords?: Boolean;
     recordsInView?: Boolean;
     fileName?: String;
}

Sets or gets the exportSettings property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [exportSettings]="exportSettings">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the enableHover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [enableHover]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the enableBrowserSelection property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [enableBrowserSelection]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the filterable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [filterable]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the filterHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [filterable]="true" [filterHeight]="40">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

enum TreeGridFilterMode {
     default,
     simple,
     advanced
}

Sets or gets the filterMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [filterable]="true" [filterMode]="'advanced'">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [height]="200">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the hierarchicalCheckboxes property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [checkboxes]="true" [hierarchicalCheckboxes]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the icons property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [icons]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the incrementalSearch property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [incrementalSearch]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the localization property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [localization]="localization">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the pagerHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pagerHeight]="35">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the pageSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pageSize]="5">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the pageSizeOptions property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pageSizeOptions]='['2', '3', '5']'>
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the pageable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

enum TreeGridPagerPosition {
     top,
     bottom,
     both
}

Sets or gets the pagerPosition property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pagerPosition]="'top'">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

enum TreeGridPagerMode {
     default,
     advanced
}

Sets or gets the pagerMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pagerMode]="'advanced'">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

enum TreeGridPageSizeMode {
     default,
     root
}

Sets or gets the pageSizeMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pageSizeMode]="'root'">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the pagerButtonsCount property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pagerButtonsCount]="2">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the pagerRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [pageable]="true" [pagerRenderer]="pagerRenderer">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the ready property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [ready]="ready">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the rowDetails property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [rowDetails]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the rowDetailsRenderer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [rowDetailsRenderer]="rowDetailsRenderer">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the renderToolbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [renderToolbar]="renderToolbar">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the renderStatusbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [renderStatusbar]="renderStatusbar">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the rendering property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [rendering]="rendering">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the rendered property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [rendered]="rendered">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [rtl]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the source property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [source]="source">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the sortable property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [sortable]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the showAggregates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [showAggregates]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the showSubAggregates property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [showAggregates]="true" [showSubAggregates]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the showToolbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [showToolbar]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the showStatusbar property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [showStatusbar]="true">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the statusBarHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [statusBarHeight]="40">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the scrollBarSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [scrollBarSize]="15">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

enum TreeGridSelectionMode {
     multipleRows,
     singleRow,
     custom
}

Sets or gets the selectionMode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [selectionMode]="'singleRow'">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the showHeader property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [showHeader]="false">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [theme]="'energyblue'">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the toolbarHeight property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns" [toolbarHeight]="40">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the virtualModeCreateRecords property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

Sets or gets the virtualModeRecordCreating property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}

This event is triggered when the jqxTreeGrid binding is completed. *Bind to that event before the jqxTreeGrid's initialization. Otherwise, if you are populating the widget from a local data source and bind to bindingComplete after the initialization, the event could be already raised when you attach an event handler to it.

Code examples

Bind to the bindingComplete event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onBindingComplete)="BindingComplete($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    BindingComplete(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellBeginEdit event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onCellBeginEdit)="CellBeginEdit($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    CellBeginEdit(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellEndEdit event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onCellEndEdit)="CellEndEdit($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    CellEndEdit(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onCellValueChanged)="CellValueChanged($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    CellValueChanged(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onColumnResized)="ColumnResized($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    ColumnResized(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This event is triggered when the column's order is changed.

Code examples

Bind to the columnReordered event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onColumnReordered)="ColumnReordered($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    ColumnReordered(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This event is triggered when the jqxTreeGrid's rows filter is changed.

Code examples

Bind to the filter event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onFilter)="Filter($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    Filter(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when the jqxTreeGrid's current page is changed.

Code examples

Bind to the pageChanged event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onPageChanged)="PageChanged($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    PageChanged(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when the jqxTreeGrid's page size is changed.

Code examples

Bind to the pageSizeChanged event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onPageSizeChanged)="PageSizeChanged($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    PageSizeChanged(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowClick)="RowClick($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowClick(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowDoubleClick)="RowDoubleClick($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowDoubleClick(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowSelect)="RowSelect($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowSelect(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowUnselect)="RowUnselect($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowUnselect(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowBeginEdit)="RowBeginEdit($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowBeginEdit(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowEndEdit)="RowEndEdit($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowEndEdit(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowExpand)="RowExpand($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowExpand(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowCollapse)="RowCollapse($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowCollapse(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is checked.

Code examples

Bind to the rowCheck event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowCheck)="RowCheck($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowCheck(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This is triggered when a row is unchecked.

Code examples

Bind to the rowUncheck event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onRowUncheck)="RowUncheck($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    RowUncheck(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

This event is triggered when the jqxTreeGrid sort order or sort column is changed.

Code examples

Bind to the sort event of jqxTreeGrid.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid(onSort)="Sort($event)"
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent {
    Sort(event: any): void 
    {
        // Do Something
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTreeGrid.addRow(10,{},'first');
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTreeGrid.addFilter('firstName',new jqx.filtergroup());
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTreeGrid.applyFilters();
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTreeGrid.beginUpdate();
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTreeGrid.beginRowEdit(10);
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTreeGrid.beginCellEdit(10,'firstName');
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxTreeGrid #myTreeGrid
            [width]="850" [source]="dataAdapter" [columns]="columns">
        </jqxTreeGrid>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myTreeGrid.clearSelection();
    }

    employees: any[] = [
        { "EmployeeID": 1, "FirstName": "Nancy",    "ReportsTo": 2,    "LastName": "Davolio",   "Title": "Sales Representative" },
        { "EmployeeID": 2, "FirstName": "Andrew",   "ReportsTo": null, "LastName": "Fuller",    "Title": "Vice President, Sales" },
        { "EmployeeID": 3, "FirstName": "Janet",    "ReportsTo": 2,    "LastName": "Leverling", "Title": "Sales Representative" },
        { "EmployeeID": 4, "FirstName": "Margaret", "ReportsTo": 2,    "LastName": "Peacock",   "Title": "Sales Representative" },
        { "EmployeeID": 5, "FirstName": "Steven",   "ReportsTo": 2,    "LastName": "Buchanan",  "Title": "Sales Manager" }
    ];
 
    source: any =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'ReportsTo', type: 'number' },
            { name: 'LastName', type: 'string' },
            { name: 'Title', type: 'string' }
        ],
        hierarchy:
        {
            keyDataField: { name: 'EmployeeID' },
            parentDataField: { name: 'ReportsTo' }
        },
        id: 'EmployeeID',
        localData: this.employees
    };
 
    dataAdapter: any = new jqx.dataAdapter(this.source);
          
    columns: any[] = [
        { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
        { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 200 },
        { text: 'Title', dataField: 'Title', width: 160 }
    ];
}