I am working to get KendoUI, Typescript, and RequireJS to work together. I have a version that is working but I would like advice on improving it.
Attached is my simple example in a Visual Studio 2013 RC project. (UpdatedKendoUITypeScriptRequireJS.zip)
I have searched the web exhaustively but have not found anyone that has an example of the combination of KendoUI, Typescript, and RequireJS, but I may have missed it. :-).
What I did to make it work was create a file called kendo.custom.d.ts. In this file I put the following declarations for the two KendoUI widgets that I am using in my simple example:
I also included the kendo.all.d.ts file.
In my JavaScript I configured RequireJS like the following:
In the TypeScript file, index.ts I brought in the dependencies like the following:
You can see I import the kendoMenuScript and kendoAutoCompleteScript with a require of the path of the actual Kendo file that contains the JavaScript for the widget. In the TypeScript file I make add a call to kendoMenuScript and kendoAutoCompleteScript so that TypeScript will add them to the "require" that it will generate, so that the actual Kendo JavaScript files will be pulled in.
Is there a better way to do this?
Attached is my simple example in a Visual Studio 2013 RC project. (UpdatedKendoUITypeScriptRequireJS.zip)
I have searched the web exhaustively but have not found anyone that has an example of the combination of KendoUI, Typescript, and RequireJS, but I may have missed it. :-).
What I did to make it work was create a file called kendo.custom.d.ts. In this file I put the following declarations for the two KendoUI widgets that I am using in my simple example:
declare module "k/kendo.autocomplete.min" {
export var load;
}
declare module "k/kendo.menu.min" {
export var load;
}
In my JavaScript I configured RequireJS like the following:
<script type=
"text/javascript"
>
require.config({
paths: {
app:
'/Scripts/app'
,
}
});
require([
'app/index'
],
function
(i) {
new
i.index();
});
</script>
import kendoConstant = require('app/kendoConstant');
import kendoMenuScript = require('k/kendo.menu.min');
import kendoAutoCompleteScript = require("k/kendo.autocomplete.min");
export class index {
private _menuElement: JQuery;
private _searchButtonElement: JQuery;
private _searchBoxElement: JQuery;
private _searchDataSource: kendo.data.DataSource;
private _searchBox: kendo.ui.AutoComplete;
private _searchAutocompleteMinLength: number;
constructor() {
kendoMenuScript; //necessary reference so the k/kendo.menu.min will be in the generated require statement
kendoAutoCompleteScript; //necessary reference so the k/kendo.autocomplete.min will be in the generated require statement
this._searchAutocompleteMinLength = 3;
this._menuElement = $("#menu")
this._searchBoxElement = $("#searchBox");
this._searchButtonElement = $("#searchButton");
this._menuElement.kendoMenu();
this._menuElement.show();
this._searchDataSource = this.createSearchDataSource();
this._searchBox = this.createAutoComplete();
this._searchBoxElement.keydown((e) => {
if (e.which == kendo.keys.ENTER) {
this.processSearch();
}
});
this._searchButtonElement.click(() => this.processSearch());
}
private createSearchDataSource(): kendo.data.DataSource {
return new kendo.data.DataSource({
data: [
{ "id": 1, "name": "John Doe" },
{ "id": 2, "name": "John Smith" },
{ "id": 3, "name": "Jane Doe" },
{ "id": 4, "name": "Johnny Appleseed" },
{ "id": 5, "name": "Joan Maryland" },
{ "id": 6, "name": "Johan Brown" }
]
});
}
private createAutoComplete(): kendo.ui.AutoComplete {
return this._searchBoxElement.kendoAutoComplete({
dataSource: this._searchDataSource,
placeholder: "Search...",
minLength: this._searchAutocompleteMinLength,
filter: "startswith",
dataTextField: "name",
suggest: true,
}).data(kendoConstant.kendoAutoComplete);
}
private processSearch() {
var value = this._searchBox.value();
if (value != "") {
alert(value + " would be searched for...");
}
}
}
You can see I import the kendoMenuScript and kendoAutoCompleteScript with a require of the path of the actual Kendo file that contains the JavaScript for the widget. In the TypeScript file I make add a call to kendoMenuScript and kendoAutoCompleteScript so that TypeScript will add them to the "require" that it will generate, so that the actual Kendo JavaScript files will be pulled in.
Is there a better way to do this?