I suggest you ...

TypeScript definitions

With the release of TypeScript by Microsoft it would be great if there would be a definition file for the different Kendo Libraries.

I actually played around with it myself, implementing some basic functionality from the core and the Calendar widget. This is by no means complete or error-free, but it gives an idea of the possibilities. I was able to get all the nice features TypeScript has to offer (e.g. type checking, auto completion).

636 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    FrankFrank shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    19 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Dan LudwigDan Ludwig commented  ·   ·  Flag as inappropriate

        I second Tim Cutting's comment to put the kendowebui.d.ts source at DefinitelyTyped. It has quickly become the home for TS definition files for so many projects...

      • Igor DvorkinIgor Dvorkin commented  ·   ·  Flag as inappropriate

        Has anyone made more progress, please share your code in github/codeplex so I don't have to troll the comments :)

      • Jaap MosselmanJaap Mosselman commented  ·   ·  Flag as inappropriate

        I have also managed to extend a Kendo class with TypeScript:

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

        module xxxxx {

        export class CustomValidator extends kendo.ui.Validator {
        public static fn: any = CustomValidator.prototype;

        constructor (element: JQuery, options: Object) {
        super(element, options);
        }
        }
        //Add the default options, merged with the options from the baseclass
        CustomValidator.prototype.options = $.extend(true, {}, kendo.ui.Validator.prototype.options,
        {
        name: "CustomValidator",
        });

        kendo.ui.plugin(CustomValidator);
        }

        There are 2 hacks needed, because of the fact that the Class.extend function is not used (if I have examined correctly):
        1: you need to define a public static fn property.
        2: you need to define the default members of type Object (usually only the "options") outside the class, because kendo.ui.plugin expects them to be there. TypeScript class properties are only created at construction time of the class, so to late for the plugin function.

      • Jaap MosselmanJaap Mosselman commented  ·   ·  Flag as inappropriate

        Interfaces is nice, but isn't enough if you want to be able to inherit your own classes from Kendo class. The following is a better approach: (note: this is far from complete, only the things I actually use)

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

        declare module kendo {
        export class Class {
        }
        export class Observable extends Class {
        public bind(eventName: string, handlers: any, one: bool): Observable;
        public bind(eventName: string[], handlers: any, one: bool): Observable;
        public one(eventNames: string, handlers: any): Observable;
        public one(eventNames: string[], handlers: any): Observable;
        public first(eventName: string, handlers: any): Observable;
        public first(eventName: string[], handlers: any): Observable;
        public trigger(eventName: string, e?: any): bool;
        public unbind(eventName: string, handler?: any): Observable;
        };

        export module data {
        export class ObservableObject extends kendo.Observable {
        public get(field: string): any;
        }
        export class Model extends ObservableObject {
        public static define(base: any, options?: any): any;
        public fields: any;
        }
        export class DataSource extends kendo.Observable {
        constructor (options);
        public transport: any;
        public options: any;
        public reader: any;
        public read(data?: Object): void;
        public remove(model: Model): Model;
        public sync(): void;
        public total(): number;
        public view();
        }
        export var transports: any;
        }
        export module ui {
        export var plugin: any;
        export var progress: any;
        export class Widget extends Observable {
        constructor (element: JQuery, options);
        public element: JQuery;
        public options: any;
        }
        export class Validator extends Widget {
        constructor (element: JQuery, options);
        public _errors: Object;
        public validateInput(input): bool;
        public _findMessageContainer(fieldName: string): JQuery;
        }
        export class ListView extends Widget {
        public template: any;
        public altTemplate: any;
        public dataSource: any;
        public select(items?: any): any;
        }
        export class Grid extends Widget {
        }
        }

        export function attr(value: string): string;
        export function stringify(value: any): string;
        export function observable(object: any): any;
        export function template(template: string): any;
        export function culture(cultureName?: string): any;
        export function parseDate(value: string, formats?: string, culture?: string): Date;
        export function parseInt(value: any, culture?: string): number;
        export function toString(value: any, format: string): string;

        export function bind(element: JQuery, viewModel?: Object): void;
        }

        //extend the JQuery interface
        interface JQuery {
        //kendo
        kendoWindow(options?: any): any;
        kendoCustomValidator(options?: any): any;
        kendoTabStrip(options?: any): any;
        kendoStop(clearQueue?: bool, gotoEnd?: bool): any;
        kendoAnimate(options, duration? , reverse? , complete? ): any;
        getKendoListView(): kendo.ui.ListView;
        getKendoGrid(): kendo.ui.Grid;
        }

      • Timothy ElvidgeTimothy Elvidge commented  ·   ·  Flag as inappropriate

        I played around with Typescript too and coming from a C# and Webforms background it gave me a better understanding of how to write javascript. I also tried to implement a kendo.d.ts interface but time pressures etc. etc didn't allow for completion.

        As a bridge from the C# webforms world , to javascript based Kendo this would be a god-send.

      • FrankFrank commented  ·   ·  Flag as inappropriate

        Which gave me nice auto completion in the following test code:

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

        var $calendar = $("#test").kendoCalendar(),
        calendar = <KendoCalendar>$calendar.data("kendoCalendar");

        calendar.bind("change", function (e) {
        alert("changed");
        });

      • FrankFrank commented  ·   ·  Flag as inappropriate

        The code i wrote so far:

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

        interface KendoWidget {
        bind(event: string, handler: (e: KendoEvent) => void): any;
        }

        interface KendoEvent extends JQueryEventObject {
        }

        interface KendoCalendarMonthOptions {
        content?: string;
        empty?: string;
        }

        interface KendoCalendarOptions {
        culture?: string;
        dates?: Date[];
        depth?: string;
        footer?: string;
        format?: string;
        max?: Date;
        min?: Date;
        month?: KendoCalendarMonthOptions;
        start?: string;
        value?: Date;

        change?: (e: KendoEvent) => any;
        navigate?: (e: KendoEvent) => any;
        }

        interface KendoCalendar extends KendoWidget {
        destroy(): void;
        max(): Date;
        max(value: Date): Date;
        max(value: string): Date;
        min(): Date;
        min(value: Date): Date;
        min(value: string): Date;
        navigate(value: Date, view: string): void;
        navigateDown(value: Date): void;
        navigateToFuture(): void;
        navigateUp(): void;
        value(): Date;
        value(value: Date): Date;
        value(value: string): Date;
        }

        interface KendoTemplateOptions {
        paramName: string;
        useWithBlock: bool;
        }

        interface KendoSupportTransforms {
        css: string;
        prefix: string;
        }

        interface KendoSupport {
        touch: bool;
        pointers: bool;
        scrollbar: number;
        hasHW3D: bool;
        hasNativeScrolling: bool;
        devicePixelRatio: number;
        placeHolder: bool;
        zoomLevel: number;

        transforms: KendoSupportTransforms;
        }

        interface KendoDataObservableObject {
        // TODO
        }

        interface KendoStatic {
        // Methods
        bind(element: string): void;
        bind(element: string, viewModel?: Object, namespace?: Object): void;
        bind(element: string, viewModel?: KendoDataObservableObject, namespace?: Object): void;
        bind(element: JQuery): void;
        bind(element: JQuery, viewModel?: Object, namespace?: Object): void;
        bind(element: JQuery, viewModel?: KendoDataObservableObject, namespace?: Object): void;
        bind(element: Node): void;
        bind(element: Node, viewModel?: Object, namespace?: Object): void;
        bind(element: Node, viewModel?: KendoDataObservableObject, namespace?: Object): void;

        unbind(element: string): void;
        unbind(element: JQuery): void;
        unbind(element: Node): void;

        destroy(selector: string): void;
        destroy(element: JQuery): void;
        destroy(element: Object): void;

        format(item: string, ...values: any[]): string;
        htmlEncode(html: string): string;

        parseDate(value: string, formats?: string, culture?: string) : Date;
        parseDate(value: string, formats?: any[], culture?: string) : Date;

        parseFloat(value: string, culture?: string): number;
        parseInt(value: string, culture?: string): number;

        template(template: string, options?: KendoTemplateOptions): () => string;
        render(tmpl: (template: string, options?: KendoTemplateOptions) => string, data: any[]): void;

        touchScroller(element: string): void;

        toString(value: Date, format: string): string;
        toString(value: number, format: string): string;

        // Properties
        support: KendoSupport;
        // etc.
        }

        interface JQuery {
        kendoCalendar(options?: KendoCalendarOptions): JQuery;
        }

        declare var kendo: KendoStatic;

      Feedback and Knowledge Base