Kendo UI + TypeScript in Kendo UI Integration

This is a migrated thread and some comments may be shown as answers.

Kendo UI + TypeScript

15 Answers 581 Views

This is a migrated thread and some comments may be shown as answers.

15 Answers, 1 is accepted

answered on 05 Oct 2012, 05:20 PM

Hi,

I am starting with TypeScript and I could very easily show a kendo Window without having to define a declaration file. Here is the code:

module SiteMaster {

// Class

export class Config {

// Instance member

run() {

var logOnParams = {

draggable: false, resizable: false, width: "300px", height: "180px",

title: "LogOn", modal: true, visible: false,

scrollable: false, actions: []

};

var logonDlg = $("#logonDialog");

if(!logonDlg.data("kendoWindow")) {

(<any>logonDlg).kendoWindow(logOnParams);

var kendoWindow = logonDlg.data("kendoWindow");

kendoWindow.center();

kendoWindow.open();

}

As you can see you have to cast to any to call the kendoWindow so that Visual Studio does not emit an error. Because a jQuery object, logonDlg does not have a method "kendoWindow".

It works Ok. But off course it would be better if Telerik generates for us a declaration file.

answered on 05 Oct 2012, 07:28 PM

Here is a basic kendo.web.d.ts that I created to support what I need for this small site I have been working on...

interface IKendoTemplate {

}

interface IKendo {

ui: any;

bind(jqueryObject: any, vm: any);

observable(obj: any): any;

data: any;

//data(widget: string): any;

template(template: string): IKendoTemplate;

render(template: IKendoTemplate, data: any): string;

}

interface JQuery {

kendoValidator(opts?: any): IKendo;

kendoMenu(opts?: any): IKendo;

kendoDropDownList(opts?: any): IKendo;

}

declare var kendo: IKendo;

answered on 10 Sep 2013, 05:51 PM

Yup, that's it. It's just a definition file, same as the ones you can find on Nuget for jQuery, etc. Same as those, in Visual Studio you can just drag it into another typescript source file to create a reference and have intellisense available. Works same as JavaScript files in VS - creates this commend at the top with relative path to the definition file (*.d.ts are all TypeScript definitions)

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

Hopefully, parts are still buggy I've found. Each TypeScript version seems to break something, but fix something else. The Kendo definitions are pretty complete - think there's only been one or two points where I had to change their supplied definition file (forget where, but something declared as a {}, switched to 'any' so TypeScript would allow me to could extend it).