Kendo UI provides a TypeScript definitions file which enables strongly-typed access to the Kendo UI widgets and their configuration.


From Redistributable Package

Each Kendo UI distribution includes a typescript directory which contains a .d.ts file, i.e. kendo.all.d.ts. Copy this file to your project and in your TypeScript file add a reference to it as demonstrated below:

/// <reference path="kendo.all.d.ts" />

You are able to optionally include the latest jQuery TypeScript definition file as well:

/// <reference path="jquery-1.8.d.ts" />
/// <reference path="kendo.all.d.ts" />

As NPM Package

Since the Kendo UI TypeScript definitions are available in the DefinitelyTyped project, they are also available as an npm package. To include them in your project, run the npm install --save @types/kendo-ui command.


Getting Instances of Existing Widgets

Getting an instance of an existing Kendo UI widget

Initializing and Configuring Widgets

All Kendo UI widgets

Initializing the Kendo UI DataSource

Initializing a Kendo UI DataSource

Creating Widgets through TypeScript Inheritance

The following example demonstrates how to inherit from an existing Kendo UI widget.

/// <reference path="jquery.d.ts" />
/// <reference path="kendo.all.d.ts" />

module KendoWidgets {
    // (Optional) Extend the default widget options
    export interface MyDatePickerOptions extends kendo.ui.DatePickerOptions {

    // Create a class which inherits from the Kendo UI widget
    export class MyDatePicker extends kendo.ui.DatePicker {
        constructor(element: Element, options?: MyDatePickerOptions) {
            super(element, options);
        // (Optional) Override a widget method
        open() {
            // Log to the console (optional)

            // Invoke a base widget method

    // Create an alias of the prototype (required by kendo.ui.plugin)
    MyDatePicker.fn = MyDatePicker.prototype;
    // Deep clone the widget default options
    MyDatePicker.fn.options = $.extend(true, {}, kendo.ui.DatePicker.fn.options);
    // Specify the name of your Kendo UI widget. Used to create the corresponding jQuery plugin.
    MyDatePicker.fn.options.name = "MyDatePicker";
    // Create a jQuery plugin.
// Expose the newly created jQuery plugin to TypeScript
interface JQuery {
    kendoMyDatePicker(options?: kendo.ui.DatePickerOptions): JQuery;
$(function () {
    // Initialize your custom widget
    // Get a reference to the widget instance
    var myDatePicker = <KendoWidgets.MyDatePicker>$("#datepicker").data("kendoMyDatePicker");
    // Call a widget method

Using Kendo UI MVVM in TypeScript

When inheriting from kendo.data.ObservableObject in TypeScript you should call the super.init method to properly set up dependency tracking.

The following example shows how to use Kendo UI MVVM in TypeScript.

/// <reference path="jquery.d.ts" />
/// <reference path="kendo.all.d.ts" />

class Person extends kendo.data.ObservableObject {
    name = "John Doe";

    constructor() {


class ViewModel extends kendo.data.ObservableObject {
    person = new Person();

    constructor() {


$(function () {
    var viewModel = new ViewModel();

    kendo.bind(document.body, viewModel);

    viewModel.set("person.name", "Jane Doe");

See Also

Other articles on Kendo UI integration with third-party tools and frameworks:

In this article
Not finding the help you need? Improve this article