Responsive Design

The TreeList supports responsive web-design by adapting its layout based on the available screen size.

The responsive features of the Kendo UI TreeList for Angular are:

  • Responsive columns—Based on the viewport width, the visibility of the TreeList columns toggles.
  • Responsive height—Based on the height setting (for example, "100%"), the TreeList adjusts its size depending on the height of its container.

Columns

To control the visibility of the columns, use their media property. The property accepts valid strings for the matchMedia browser API and toggles the visibility of the columns based on the media queries.

media configuration The columns are visible when
"(min-width: 500px)" The viewport width is 500px or more.
"(max-width: 300px)" The viewport width is 300px or less.
"(min-width: 500px) and (max-width: 1200px)" The viewport width is between 500px and 1,200px.
"(max-width: 320px), (orientation: landscape)" The viewport width is more than 320px and the device is in a landscape orientation.
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Employee } from './employee';

@Component({
    selector: 'my-app',
    template: `
        <kendo-treelist
            kendoTreeListExpandable
            [loading]="loading"
            [kendoTreeListFlatBinding]="data | async"
            idField="EmployeeId"
            parentIdField="ReportsTo"
            [height]="400"
            >
            <kendo-treelist-column media="(max-width: 450px)" title="Employee" [expandable]="true">
                <ng-template kendoTreeListCellTemplate let-dataItem>
                    <!-- template for mobile -->
                    <h4>
                        {{ dataItem.FirstName }}
                        {{ dataItem.LastName }}
                    </h4>
                    <dl>
                        <dt>City</dt>
                        <dd>{{ dataItem.City }}</dd>

                        <dt>Address</dt>
                        <dd>{{ dataItem.Address }}</dd>

                        <dt>Phone</dt>
                        <dd>{{ dataItem.Phone }}</dd>
                    </dl>
                </ng-template>
            </kendo-treelist-column>

            <!-- columns for mid-size devices -->
            <kendo-treelist-column
                media="(min-width: 450px)"
                [expandable]="true" title="Name" width="200">
                <ng-template kendoTreeListCellTemplate let-dataItem>
                    {{ dataItem.FirstName }}
                    {{ dataItem.LastName }}
                </ng-template>
            </kendo-treelist-column>
            <kendo-treelist-column
                media="(min-width: 450px)"
                field="Position">
            </kendo-treelist-column>
            <kendo-treelist-column
                media="(min-width: 450px)"
                field="Phone">
            </kendo-treelist-column>

            <!-- additional columns on large devices -->
            <kendo-treelist-column
                media="(min-width: 850px)"
                field="Address" width="200">
            </kendo-treelist-column>
            <kendo-treelist-column
                media="(min-width: 850px)"
                field="Phone" width="100">
            </kendo-treelist-column>
            <kendo-treelist-column
                media="(min-width: 850px)"
                field="HireDate" title="Hire Date" width="120" format="d">
            </kendo-treelist-column>
        </kendo-treelist>
    `
})
export class AppComponent implements OnInit {
    public data: Observable<Employee[]>;
    public loading = true;
    private serviceUrl = 'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All';

    constructor(private http: HttpClient) {}

    public ngOnInit(): void {
        this.data = this.http.jsonp<Employee[]>(
            `${this.serviceUrl}`,
            'callback'
        ).pipe(tap(() => {
            this.loading = false;
        }));
    }
}
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { TreeListModule } from '@progress/kendo-angular-treelist';

import { AppComponent } from './app.component';

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

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

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
export interface Employee {
    EmployeeId: number;
    FirstName: string;
    LastName: string;
    Position: string;
    Extension: string;
    hasChildren?: boolean;
}

Bootstrap 4 Compatibility

The media property accepts the device identifiers which are available in Bootstrap 4 and which range from extra small (xs) to extra large (xl).

media configuration Equivalent to
"xs" "(max-width: 576px)"
"sm" "(min-width: 576px)"
"md" "(min-width: 768px)"
"lg" "(min-width: 992px)"
"xl" "(min-width: 1200px)"

Using the Bootstrap 4 identifiers is a less flexible approach than declaring the responsive breakpoints. However, the identifiers enable the TreeList to match the Bootstrap TreeList system of the surrounding template.

<div class="col-xs-12 col-md-6">
  <kendo-treelist>
      <kendo-treelist-column media="xs">
        <!-- template for xs devices -->
      </kendo-treelist-column>

      <kendo-treelist-column media="md">
        <!-- template for md devices -->
      </kendo-treelist-column>
  </kendo-treelist>
</div>
<div class="col-xs-12 col-md-6">
  <!-- second column -->
</div>

Height

You can control the height of the TreeList through the height CSS property. If the height is set in percentage units, the TreeList adjusts its layout accordingly just like a regular HTML element. In CSS, setting the height of an element to percentage units requires that its parent element has its height defined. Because this rule is applied recursively, to make the TreeList fill 100% of the browser window, all elements up to the document root <html> element must have a height of 100%.

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

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

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

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

enableProdMode();

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

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

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

In this article