All Components

Preview

The following application demonstrates how the Kendo UI components for Angular look like when styled with the Kendo UI Bootstrap theme for Angular.

import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { Http, HttpModule, ConnectionBackend, BaseRequestOptions,
         Response, ResponseOptions, ResponseType } from '@angular/http';
import { MockBackend } from '@angular/http/testing';

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { GridModule } from '@progress/kendo-angular-grid';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { UploadModule } from '@progress/kendo-angular-upload';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { SortableModule } from '@progress/kendo-angular-sortable';

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


@NgModule({
    providers: [BaseRequestOptions, MockBackend, {
          provide: Http,
          deps: [MockBackend, BaseRequestOptions],
          useFactory: (backend, options) => {
              return new Http(backend, options);
          }
    }],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonsModule,
        ChartsModule,
        CommonModule,
        GridModule,
        LayoutModule,
        InputsModule,
        UploadModule,
        DropDownsModule,
        DateInputsModule,
        SortableModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

import { Component } from '@angular/core';
import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
import { countries, cars } from './data';
import { Response, ResponseOptions, ResponseType } from '@angular/http';
import { MockBackend } from '@angular/http/testing';

@Component({
    selector: 'my-app',
    template: `
    <div class="row">
      <div class="col-sm-6">
        <h5>TextBox</h5>

        <input class="k-textbox" placeholder="your.name@example.com" />
      </div>

      <div class="col-sm-6">
        <h5>Button</h5>

        <button kendoButton class="col-sm-5">Default Button</button>
        <button kendoButton [primary]="true" class="col-sm-5">Primary Button</button>
      </div>

      <div class="col-sm-6">
          <h5>MaskedTextBox</h5>

          <kendo-maskedtextbox [mask]="'9-000'"></kendo-maskedtextbox>
      </div>

      <div class="col-sm-6">
        <h5>ButtonGroup</h5>

        <kendo-buttongroup [selection]="'single'">
            <button kendoButton [togglable]="true" style="width: 33.333%;">
                Option A
            </button>
            <button kendoButton [togglable]="true" style="width: 33.333%;">
                Option B
            </button>
            <button kendoButton [togglable]="true" style="width: 33.333%;">
                Option C
            </button>
        </kendo-buttongroup>
      </div>

      <div class="col-sm-6">
        <h5>NumericTextBox</h5>

        <kendo-numerictextbox [value]="42">
        </kendo-numerictextbox>
      </div>

      <div class="col-sm-6">
        <h5>Checkboxes</h5>

        <input type="checkbox" class="k-checkbox" id="checkbox1" />
        <label class="k-checkbox-label" for="checkbox1">Android</label>

        <input type="checkbox" class="k-checkbox" id="checkbox2" checked />
        <label class="k-checkbox-label" for="checkbox2">iOS</label>

        <input type="checkbox" class="k-checkbox" id="checkbox3" checked disabled />
        <label class="k-checkbox-label" for="checkbox3">Windows Phone</label>
      </div>

      <div class="col-sm-6">
        <h5>AutoComplete</h5>

        <kendo-autocomplete [placeholder]="'Select country...'" [data]="countries">
        </kendo-autocomplete>
      </div>

      <div class="col-sm-6">
        <h5>RadioButtons</h5>

        <input type="radio" class="k-radio" name="radios" id="radio1" />
        <label class="k-radio-label" for="radio1">Android</label>

        <input type="radio" class="k-radio" name="radios" id="radio2" checked />
        <label class="k-radio-label" for="radio2">iOS</label>

        <input type="radio" class="k-radio" name="disabled-radios" id="radio3" checked disabled />
        <label class="k-radio-label" for="radio3">Windows Phone</label>
      </div>

      <div class="col-sm-6">
        <h5>ComboBox</h5>

        <kendo-combobox [placeholder]="'Select country...'" [data]="countries">
        </kendo-combobox>
      </div>

      <div class="col-sm-6">
          <h5>Slider</h5>

          <kendo-slider [min]="1" [max]="10" [smallStep]="1" [value]="5"></kendo-slider>
      </div>

      <div class="col-sm-6">
        <h5>DropDownList</h5>

        <kendo-dropdownlist [data]="countries" [defaultItem]="'Select nationality...'"></kendo-dropdownlist>
      </div>

      <div class="col-sm-6">
          <h5>Switch</h5>

          <kendo-switch></kendo-switch>
      </div>

      <div class="col-sm-6">
        <h5>MultiSelect</h5>

        <kendo-multiselect [value]="['Bulgaria']" [data]="countries">
        </kendo-multiselect>
      </div>

      <div class="col-sm-6">
          <h5>Upload</h5>

          <kendo-upload [saveUrl]="'saveUrl'" [removeUrl]="'removeUrl'"></kendo-upload>
      </div>

      <div class="col-sm-12">
        <h5>Grid</h5>

        <kendo-grid
            [data]="gridView"
            [pageSize]="pageSize"
            [skip]="skip"
            [pageable]="true"
            [scrollable]="'none'"
            (pageChange)="pageChange($event)"
        >
            <kendo-grid-column field="make" title="Make" width="120">
            </kendo-grid-column>
            <kendo-grid-column field="model" title="Model" width="100">
            </kendo-grid-column>
            <kendo-grid-column field="year" title="Year" width="100">
            </kendo-grid-column>
            <kendo-grid-column field="category" title="Category" width="120">
            </kendo-grid-column>
            <kendo-grid-column field="airconditioner" title="Air Conditioning" width="120">
                <ng-template kendoCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.airconditioner" disabled/>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
      </div>

      <div class="col-sm-6">
        <h5>Calendar</h5>

        <kendo-calendar></kendo-calendar>
      </div>

      <div class="col-sm-6">
          <h5>Sortable</h5>


        <kendo-sortable
            [navigatable]="true"
            [animation] = "true"
            [data]="items"
            [itemClass] = "'k-button col-xs-6 col-sm-3'"
            [activeItemClass] = "'k-button col-xs-6 col-sm-3 active'"
        >
        </kendo-sortable>
      </div>

      <div class="col-sm-6" style="clear:left">
        <h5>PanelBar</h5>

        <kendo-panelbar [expandMode]="'single'">
            <kendo-panelbar-item title="Projects" [expanded]="true">
                <kendo-panelbar-item title="New Business Plan"></kendo-panelbar-item>
                <kendo-panelbar-item title="Sales Forecasts"></kendo-panelbar-item>
                <kendo-panelbar-item title="Sales Reports"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Programs">
                <kendo-panelbar-item title="Monday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Tuesday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Wednesday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Thursday"></kendo-panelbar-item>
                <kendo-panelbar-item title="Friday"></kendo-panelbar-item>
            </kendo-panelbar-item>
            <kendo-panelbar-item title="Communication"></kendo-panelbar-item>
        </kendo-panelbar>
      </div>

      <div class="col-sm-6">
        <h5>TabStrip</h5>

        <kendo-tabstrip>
          <kendo-tabstrip-tab [title]="'Paris'" [selected]="true">
            <ng-template kendoTabContent>
              <p>
                Paris is the capital and most populous city of France. It has an area of 105 square kilometres (41 square miles) and a population in 2013 of 2,229,621 within its administrative limits. The city is both a commune and department, and forms the centre and headquarters of the Île-de-France, or Paris Region, which has an area of 12,012 square kilometres (4,638 square miles) and a population in 2014 of 12,005,077, comprising 18.2 percent of the population of France.
              </p>
            </ng-template>
          </kendo-tabstrip-tab>
          <kendo-tabstrip-tab [title]="'New York City'">
            <ng-template kendoTabContent>
              <p>
                The City of New York, often called New York City or simply New York, is the most populous city in the United States. With an estimated 2015 population of 8,550,405 distributed over a land area of just 305 square miles (790 km2), New York City is also the most densely populated major city in the United States. Located at the southern tip of the state of New York, the city is the center of the New York metropolitan area, one of the most populous urban agglomerations in the world.
              </p>
            </ng-template>
          </kendo-tabstrip-tab>
          <kendo-tabstrip-tab [title]="'Tallinn'">
            <ng-template kendoTabContent>
              <p>
                Tallinn is the capital and largest city of Estonia. It is situated on the northern coast of the country, on the shore of the Gulf of Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west of Saint Petersburg. From the 13th century until 1918 (and briefly during the Nazi occupation of Estonia from 1941 to 1944), the city was known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq mi) and has a population of 443,894. Approximately 32% of Estonia's total population lives in Tallinn.
              </p>
            </ng-template>
          </kendo-tabstrip-tab>
        </kendo-tabstrip>
      </div>

      <div class="col-sm-12">
        <h5>Chart</h5>

        <kendo-chart style="height: 360px;">
            <kendo-chart-area background="transparent"></kendo-chart-area>

            <kendo-chart-series>
                <kendo-chart-series-item *ngFor="let s of series"
                    type="area" [line]="{ style: 'smooth' }"
                    [data]="s.data">
                </kendo-chart-series-item>
            </kendo-chart-series>

            <kendo-chart-category-axis>
                <kendo-chart-category-axis-item
                    [categories]="categories"
                    [majorGridLines]="{visible: false}">
                </kendo-chart-category-axis-item>
            </kendo-chart-category-axis>
        </kendo-chart>
      </div>
    </div>
    `,
    styles: [`
      h5 {
        font-size: 14px;
        margin: 10px 0;
      }

      .row > div {
        padding-bottom: 1em;
      }

      label {
        font-weight: 400;
      }

      .k-checkbox-label,
      .k-radio-label {
        margin-right: 3em;
        line-height: 20px;
        padding-bottom: 2px;
      }

      .row > div > .k-textbox,
      .row > div > .k-widget:not(.k-switch):not(.k-calendar),
      .row > div > .k-button-group /* why are button groups not a .k-widget? */ {
        width: 100%;
      }

      .k-slider {
        vertical-align: top; /* the slider is not aligned with other form elements by default  */
      }
    `]
})
export class AppComponent {
    public countries: any[] = countries;
    public cars: any[] = cars;
    public items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'];

    private gridView: GridDataResult;
    private skip: number = 0;
    private pageSize: number = 6;

  constructor(private backend: MockBackend) {
      this.backend.connections.subscribe((c: any) => {
        let response = new Response(<ResponseOptions>{ status: 200 });

        if (c.request.url === "saveUrl") {
          c.mockDownload(response);

          setTimeout(() => {
            c.mockRespond(response);
          }, 1500);
        } else if (c.request.url === "removeUrl") {
          c.mockRespond(response);
        }
      });

      this.loadCars();
    }

    private loadCars(): void {
        this.gridView = {
            data: this.cars.slice(this.skip, this.skip + this.pageSize),
            total: this.cars.length
        };
    }

    protected pageChange(event: PageChangeEvent): void {
        this.skip = event.skip;
        this.loadCars();
    }

    public languages:any[] = [ "Bulgarian", "English", "French", "German" ];

    private series: any[] = [
        { data: [ 30, 30, 30, 34, 41, 32, 42, 36, 39, 43, 38, 33, 27, 25 ] },
        { data: [ 20, 20, 20, 27, 23, 30, 25, 34, 34, 36, 30, 28, 35, 33 ] },
        { data: [ 10, 15, 12, 14, 18, 18, 18, 15, 15, 18, 17, 20, 10, 15 ] }
    ];

    private categories: string[] = [
        "1/6", "1/7", "1/8", "1/9", "1/10", "1/11", "1/12", "1/1", "1/2", "1/3", "1/4", "1/5", "1/6", "1/7"
    ];
}

export const countries = [
  "Albania",
  "Andorra",
  "Armenia",
  "Austria",
  "Azerbaijan",
  "Belarus",
  "Belgium",
  "Bosnia & Herzegovina",
  "Bulgaria",
  "Croatia",
  "Cyprus",
  "Czech Republic",
  "Denmark",
  "Estonia",
  "Finland",
  "France",
  "Georgia",
  "Germany",
  "Greece",
  "Hungary",
  "Iceland",
  "Ireland",
  "Italy",
  "Kosovo",
  "Latvia",
  "Liechtenstein",
  "Lithuania",
  "Luxembourg",
  "Macedonia",
  "Malta",
  "Moldova",
  "Monaco",
  "Montenegro",
  "Netherlands",
  "Norway",
  "Poland",
  "Portugal",
  "Romania",
  "Russia",
  "San Marino",
  "Serbia",
  "Slovakia",
  "Slovenia",
  "Spain",
  "Sweden",
  "Switzerland",
  "Turkey",
  "Ukraine",
  "United Kingdom",
  "Vatican City"
];


export const cars = [
  {
    "make": "Volvo",
    "model": "S60",
    "year": "2010",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Audi",
    "model": "A4",
    "year": "2002",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "BMW",
    "model": "535d",
    "year": "2006",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "BMW",
    "model": "320d",
    "year": "2006",
    "category": "Saloon",
    "airconditioner": "No"
  },
  {
    "make": "VW",
    "model": "Passat",
    "year": "2007",
    "category": "Saloon",
    "airconditioner": "No"
  },
  {
    "make": "VW",
    "model": "Passat",
    "year": "2008",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Peugeot",
    "model": "407",
    "year": "2006",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Honda",
    "model": "Accord",
    "year": "2008",
    "category": "Saloon",
    "airconditioner": "No"
  },
  {
    "make": "Alfa Romeo",
    "model": "159",
    "year": "2008",
    "category": "Saloon",
    "airconditioner": "No"
  },
  {
    "make": "Nissan",
    "model": "Almera",
    "year": "2001",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Mitsubishi",
    "model": "Lancer",
    "year": "2008",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Opel",
    "model": "Vectra",
    "year": "2008",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Toyota",
    "model": "Avensis",
    "year": "2006",
    "category": "Saloon",
    "airconditioner": "No"
  },
  {
    "make": "Toyota",
    "model": "Avensis",
    "year": "2008",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Toyota",
    "model": "Avensis",
    "year": "2008",
    "category": "Saloon",
    "airconditioner": "Yes"
  },
  {
    "make": "Audi",
    "model": "Q7",
    "year": "2007",
    "category": "SUV",
    "airconditioner": "Yes"
  },
  {
    "make": "Hyundai",
    "model": "Santa Fe",
    "year": "2012",
    "category": "SUV",
    "airconditioner": "Yes"
  },
  {
    "make": "Hyundai",
    "model": "Santa Fe",
    "year": "2013",
    "category": "SUV",
    "airconditioner": "Yes"
  },
  {
    "make": "Nissan",
    "model": "Qashqai",
    "year": "2007",
    "category": "SUV",
    "airconditioner": "Yes"
  },
  {
    "make": "Mercedez",
    "model": "B Class",
    "year": "2007",
    "category": "Hatchback",
    "airconditioner": "Yes"
  },
  {
    "make": "Lancia",
    "model": "Ypsilon",
    "year": "2006",
    "category": "Hatchback",
    "airconditioner": "Yes"
  },
  {
    "make": "Peugeot",
    "model": "207",
    "year": "2007",
    "category": "Hatchback",
    "airconditioner": "Yes"
  },
  {
    "make": "Ford",
    "model": "Focus",
    "year": "2007",
    "category": "Hatchback",
    "airconditioner": "No"
  },
  {
    "make": "BMW",
    "model": "Series 1",
    "year": "2006",
    "category": "Hatchback",
    "airconditioner": "Yes"
  }
];
In this article