Template and Typescript

[Ladislav]

Hi,

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

[Alexander Popov]

Hello Ladislav,

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

[Ladislav]

Hi,

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

[Alexander Popov]

Hello again 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

[Ladislav]

Hi,

why can I extend ObservableObject? Can I use this.get or this.set? I need to push state changes to UI.

Regards,
Ladislav

[Ladislav]

Hi Alexander

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.

[Alexander Popov]

Hello Ladislav,

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

[Ruud]

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();
}

[Ruud]

Sorry, forgot to mention that the error also pops up when removing the module like this:

/// <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);

    }
}

[Alexander Popov]

Hi Ruud,

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

 

 

[Ruud]

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