I try to convert http://demos.kendoui.com/web/mvvm/source.html into typescript.
I see the items but don't know what to do with deleteProduct.
I get always cannot find "apply" exception from JQuery.
Can you provide a typescript version? Html version works out of the box.
Regards,
Ladislav
10 Answers, 1 is accepted
I am afraid that currently we do not have a TypeScript equivalent of our demos. Could you please provide a runnable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior and advise you further.
Regards,
Alexander Popov
Telerik
![](/forums/images/avatarimages/default.gif)
the html is the same as in example. The typescript:
class data extends kendo.data.ObservableObject {
productName = "Product name";
productPrice = 10;
productUnitsInStock = 10;
addProduct() {
this.get("products").push({
name: this.get("productName"),
price: parseFloat(this.get("productPrice")),
unitsInStock: parseFloat(this.get("productUnitsInStock"))
});
}
deleteProduct(e) {
// the current data item (product) is passed as the "data" field of the event argument
var product = e.data;
var products = this.get("products");
var index = products.indexOf(product);
// remove the product by using the splice method
products.splice(index, 1);
}
total() {
return this.get("products").length;
}
totalPrice() {
var sum = 0;
$.each(this.get("products"), function (index, product) {
sum += product.price;
});
return sum;
}
totalUnitsInStock() {
var sum = 0;
$.each(this.get("products"), function (index, product) {
sum += product.unitsInStock;
});
return sum;
}
products = new kendo.data.ObservableArray(
[
{ name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
{ name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
{ name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
{ name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
]);
}
$(document).ready(function () {
var viewModel = new data();
kendo.bind($("#example"), viewModel);
});
run it, click on Add new product nothing happens. Click on delete explodes.
Regards,
Ladislav
Thank you for the provided code. I examined it and noticed that you are extending kendo.data.ObservableObject instead of kendo.Observable. Here is an example:
class data extends kendo.Observable {
productName =
"Product name"
;
productPrice = 10;
productUnitsInStock = 10;
addProduct =
function
() {
this
.get(
"products"
).push({
name:
this
.get(
"productName"
),
price: parseFloat(
this
.get(
"productPrice"
)),
unitsInStock: parseFloat(
this
.get(
"productUnitsInStock"
))
});
}
Regards,
Alexander Popov
Telerik
![](/forums/images/avatarimages/default.gif)
why can I extend ObservableObject? Can I use this.get or this.set? I need to push state changes to UI.
Regards,
Ladislav
![](/forums/images/avatarimages/default.gif)
Your code is not working, because I have to extend ObservableObject for get/set http://docs.telerik.com/kendo-ui/api/framework/observableobject#methods-get.
I apologize for misleading you. The recommended approach is to use the class' constructor to set up the observable's dependency tracking. Here is an example:
class data extends kendo.data.ObservableObject {
constructor() {
super
();
super
.init(
this
)
}
....
}
Regards,
Alexander Popov
Telerik
![](/forums/images/avatarimages/default.gif)
Hi Alexander,
I use your recommended approach (which aligns with the demos provided); however, in my Visual Studio AppBuilders project I continue to get the following error:
Type name 'kendo.data.ObservableObject' in extends clause does not reference constructor function for 'kendo.data.ObservableObject'.
Somehow it seems not to like I create my classes based on this object. The reference paths are working (I have intellisense); I tried all kinds of constructor parameters, but no luck so far. Any ideas? My code looks like this:
/// <reference path="../kendo/typescript/jquery.d.ts" />
/// <reference path="../kendo/typescript/kendo.all.d.ts" />
module AboutModule {
export class ViewModel extends kendo.data.ObservableObject {
constructor() {
super();
super.init(this);
}
}
export var viewmodel = new ViewModel();
}
![](/forums/images/avatarimages/default.gif)
/// <
reference
path
=
"../kendo/typescript/jquery.d.ts"
/>
/// <
reference
path
=
"../kendo/typescript/kendo.all.d.ts"
/>
class ViewModel2 extends kendo.data.ObservableObject {
constructor() {
super();
super.init(this);
}
}
I am really not sure what is causing this and so far I was not able to reproduce it. Would you please share a runnable sample project where this issue is isolated, so we can proceed with the investigation?
Regards,
Alexander Popov
Telerik
![](/forums/images/avatarimages/default.gif)
Hi Alexander,
I solved it; I had two definition references; one for kendo.mobile.d.ts and one for kendo.all.d.ts. The TS compiler picks this up automatically in Visual Studio. So deleting the kendo.mobile.d.ts file solved the issue.
Regards,
Ruud