Template and Typescript

11 posts, 0 answers
  1. Ladislav
    Ladislav avatar
    32 posts
    Member since:
    Jan 2009

    Posted 14 Jan 2014 Link to this post

    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
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 16 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ladislav
    Ladislav avatar
    32 posts
    Member since:
    Jan 2009

    Posted 23 Jan 2014 Link to this post

    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

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ladislav
    Ladislav avatar
    32 posts
    Member since:
    Jan 2009

    Posted 27 Jan 2014 in reply to Alexander Popov Link to this post

    Hi,

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

    Regards,
    Ladislav
  7. Ladislav
    Ladislav avatar
    32 posts
    Member since:
    Jan 2009

    Posted 27 Jan 2014 in reply to Ladislav Link to this post

    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.
  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 28 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2015 in reply to Alexander Popov Link to this post

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

  10. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2015 in reply to Ruud Link to this post

    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);
     
        }
    }
  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 10 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 16 Nov 2015 in reply to Alexander Popov Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready