Version 22.2

TypeScript Support (igCombo)

Topic Overview

This topic shows how to configure igCombo with TypeScript data source. We can define a TypeScript class, create a data source with instances from our class and bind the data source to the igCombo.

In this topic

This topic contains the following sections:

Preview

The following screenshot is a preview of the final result.

Requirements

In order to run this sample, you need to have:

  • The required Ignite UI for jQuery JavaScript and CSS files
  • The required Ignite UI for jQuery TypeScript definitions

Overview

This topic takes you step-by-step toward creating a TypeScript class, data source and igCombo.

Steps

Create the HTML - we are going to have three combos demonstrating keyboard navigation, multiple selection and filtering respectively.

In HTML:

<div>
    <h4 class="combo-label">
        Keyboard navigation
    </h4>
    <div id="keyNavigationCombo"></div>
</div>
<div>
    <h4 class="combo-label">
        Multiple Selection with Checkboxes
    </h4>
    <div id="checkboxSelectCombo"></div>
</div>
<div>
    <h4 class="combo-label">
        Filtering Condition of Contains
    </h4>
    <div id="filterContainsCombo"></div>
</div>

Create a TypeScript Class - the class will store information about a mountain top with several characteristics - id, mountainName, country and height.

In TypeScript:

/// <reference path="http://www.igniteui.com/js/typings/jquery.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/jqueryui.d.ts" />
/// <reference path="http://www.igniteui.com/js/typings/igniteui.d.ts" />
class MountainTop {
    id: number;
    mountainName: string;
    country: string;
    height: number;
    constructor(inId: number, inMountanName: string, inCountry: string, inHeight: number) {
        this.id = inId;
        this.mountainName = inMountanName;
        this.country = inCountry;
        this.height = inHeight;
    }
}

Create a Data Source - we are going to create 10 instances of our class MountainTop and add them to an array which will be our data source.

In TypeScript:

var mountainTopsData: MountainTop[] = [];
mountainTopsData.push(new MountainTop(1, "Everest", "Nepal/Tibet", 29.035));
mountainTopsData.push(new MountainTop(2, "K2 (Mount Godwin Austen)", "Pakistan/China", 29.250));
mountainTopsData.push(new MountainTop(3, "Kangchenjunga", "India/Nepal", 28.169));
mountainTopsData.push(new MountainTop(4, "Lhotse", "Nepal/Tibet",  27.940));
mountainTopsData.push(new MountainTop(5, "Makalu", "Nepal/Tibet", 27.766));
mountainTopsData.push(new MountainTop(6, "Cho Oyu", "Nepal/Tibet", 26.906));
mountainTopsData.push(new MountainTop(7, "Dhaulagiri", "Nepal", 26.795));
mountainTopsData.push(new MountainTop(8, "Manaslu", "Nepal", 26.781));
mountainTopsData.push(new MountainTop(9, "Nanga Parbat", "Pakistan", 26.660));
mountainTopsData.push(new MountainTop(10, "Annapurna", "Nepal", 26.545));

Create an igCombo with TypeScript Data Source - we define our three combos and assign the data source to them.

In TypeScript:

$(function () {
    $("#keyNavigationCombo").igCombo({
        width: "270px",
        textKey: "mountainName",
        valueKey: "id",
        dataSource: mountainTopsData,
        multiSelection: {
            enabled: true
        },
    });

    $("#checkboxSelectCombo").igCombo({
        width: "270px",
        dataSource: mountainTopsData,
        textKey: "mountainName",
        valueKey: "id",
        multiSelection: {
            enabled: true,
            showCheckboxes: true
        }
    });

    $("#filterContainsCombo").igCombo({
        width: "270px",
        textKey: "mountainName",
        valueKey: "mountainName",
        dataSource: mountainTopsData,
        filteringType: "local",
        filteringCondition: "contains",
        highlightMatchesMode: "contains"
    });
});

Related Content

The following topic provides additional information related to this topic:

View on GitHub