Kendo MVVM Questions

8 posts, 0 answers
  1. PepLamb
    PepLamb avatar
    5 posts
    Member since:
    Jul 2011

    Posted 12 Mar 2012 Link to this post

    Hello and thanks for the awesome controls :)

    I have the following test code i am playing with right now,

    <!DOCType html>
    <html>
    <head>
        <title></title>
        <script src="js/jquery-1.7.1.js"></script>
        <script src="js/kendo.all.js"></script>
        <link href="styles/kendo.common.css" rel="stylesheet" />
        <link href="styles/kendo.default.css" rel="stylesheet" />
    </head>
    <body>
     
    <div id="chart" style="height:300px; width:500px">
    </div>
    <input id="addData" class="k-button" type="button" value="Add Data" />
    <script>
        $(function() {
            var data = [
                {
                    employee: "Joe Smith",
                    sales: 2000
                },
                {
                    employee: "Jane Smith",
                    sales: 2250
                },
                {
                    employee: "Will Roberts",
                    sales: 1550
                }];
            $("#addData").click(function() {
                data = data.concat({
                                employee: "Will Roberts",
                                sales: Math.floor(Math.random()*10001)
                            });
                //var chart = $("#chart").data("kendoChart");
                //chart.options.data = data;
                //alert(data)
                //chart.refresh();
            });
            $("#chart").kendoChart({
                title: {
                    text: "Employee Sales"
                },
                dataSource: new kendo.data.DataSource({
                    data: data
                }),
                series: [{
                    type: "line",
                    field: "sales",
                    name: "Sales in Units"
                }],
                categoryAxis: {
                    field: "employee"
                },
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });
        })
    </script>
    </body>
    </html>


    Now when i add more items to 'data' JSON Array I would like to see changes in the chart,
    The following are in my mind right now,
    1). using observable collection (kendo.data.ObservableObject) as a data source? such that when the data object changes it reflects in the control (or element) via kendo.bind but i am not sure how to implement this without the need to .refresh() everytime the collection is changed when Add Data button is clicked
    2). A way where chart.options.data = data is assigned the control must automatically reflect the new chart ( in other words i am looking for a live charts control like how we do in MVVM, where the object changes and since its bound to the control it just reflects the changes ) but not sure how to implement with this scenario 

    could someone please help?
  2.
  3. Guru
    Guru avatar
    4 posts
    Member since:
    Mar 2012

    Posted 21 Mar 2012 Link to this post

    Hi,

    I was trying to do the same and no luck. For now the chart controls doesn't have the bind option it seems. Please let me know if you found an alternative.

    Thanks
    Guru
  5. PepLamb
    PepLamb avatar
    5 posts
    Member since:
    Jul 2011

    Posted 21 Mar 2012 Link to this post

    Hi Guru,

    I noticed its not possible with the stable version right now ( I mean opensource Kendo UI v2011.3.1129 ) and I was successfully able to do it with the beta version (Kendo UI v2012.1.229.beta) :)

    Just make you data kendo.observable, thats it any time that variable changes the UI will auto update,
    say from my example,

    var observableData = kendo.observable({
            data: [
                {
                    employee: "Joe Smith",
                    sales: 2000
                },
                {
                    employee: "Jane Smith",
                    sales: 2250
                },
                {
                    employee: "Will Roberts",
                    sales: 1550
                }]
            }];

    Thats it, it will make your data collection observable :)
    make sure you have beta version though since there is no support whatsoever in the current stable version ( Kendo UI v2011.3.1129 )
    Hope this helps :)
  7. Guru
    Guru avatar
    4 posts
    Member since:
    Mar 2012

    Posted 21 Mar 2012 Link to this post

    Hi PepLamb,

    Thanks very much for the information. I tried this and still I am not able to get this working. Please let me know if I am missing something.

    <html>
    <head>
        <title></title>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.js"></script>
        <link href="styles/kendo.common.css" rel="stylesheet" />
        <link href="styles/kendo.default.css" rel="stylesheet" />
    </head>
    <body>
      
    <div id="chart" style="height:300px; width:500px">
    </div>
    <input id="addData" class="k-button" type="button" value="Add Data" />
    <script>
        $(function () {
            var observableData = kendo.observable({
                data: [
                {
                    employee: "Joe Smith",
                    sales: 2000
                },
                {
                    employee: "Jane Smith",
                    sales: 2250
                },
                {
                    employee: "Will Roberts",
                    sales: 1550
                }]
            });
     
            kendo.bind($("#chart",observableData));
     
            $("#addData").click(function () {
                observableData = {
                    data: [
                                {
                                    employee: "Joe Smith",
                                    sales: 20
                                },
                                {
                                    employee: "Jane Smith",
                                    sales: 22
                                },
                                {
                                    employee: "Will Roberts",
                                    sales: 15
                                }]
                };
            });
            $("#chart").kendoChart({
                title: {
                    text: "Employee Sales"
                },
                dataSource: new kendo.data.DataSource({
                    data: observableData.data
                }),
                series: [{
                    type: "line",
                    field: "sales",
                    name: "Sales in Units"
                }],
                categoryAxis: {
                    field: "employee"
                },
                tooltip: {
                    visible: true,
                    format: "{0}%"
                }
            });
        })
    </script>
    </body>
    </html>

    Thanks in advance.
  8.
  9. PepLamb
    PepLamb avatar
    5 posts
    Member since:
    Jul 2011

    Posted 26 Mar 2012 Link to this post

    yep you are missing something :)

    <html>
    <head>
        <title></title>
        <script src="js/jquery.mini.js"></script>
        <script src="js/kendo.all.js"></script>
        <link href="styles/kendo.common.css" rel="stylesheet" />
        <link href="styles/kendo.default.css" rel="stylesheet" />
    </head>
    <body>
       
    <div id="chart" style="height:300px; width:500px">
    </div>
    <input id="addData" class="k-button" type="button" value="Add Data" />
    <script>
        $(function () {
            var observableData = kendo.observable({
                data: [
                {
                    employee: "Joe Smith",
                    sales: 2000
                },
                {
                    employee: "Jane Smith",
                    sales: 2250
                },
                {
                    employee: "Will Roberts",
                    sales: 1550
                }]
            });
      
            //kendo.bind($("#chart"), observableData);
      
            $("#addData").click(function () {
                observableData.data.push({
                                employee: "new Joe Smith",
                                sales: 20
                });
            });
            $("#chart").kendoChart({
                title: {
                    text: "Employee Sales"
                },
                dataSource: new kendo.data.DataSource({
                    data: observableData.data
                }),
                series: [{
                    type: "line",
                    field: "sales",
                    name: "Sales in Units"
                }],
                categoryAxis: {
                    field: "employee"
                },
                tooltip: {
                    visible: true,
                    format: "{0}%"
                },
                transitions: false
            });
        })
    </script>
    </body>
    </html>

    you had this meaning you were actually resetting observableData rather than adding to it for every click,

    $("#addData").click(function () {
        observableData = {
            data: [
                        {
                            employee: "Joe Smith",
                            sales: 20
                        },
                        {
                            employee: "Jane Smith",
                            sales: 22
                        },
                        {
                            employee: "Will Roberts",
                            sales: 15
                        }]
        };
    });

    this is how you push the new data in,

    $("#addData").click(function () {
        observableData.data.push({
                        employee: "new Joe Smith",
                        sales: 20
        });
    });

    I added transitions: false to avoid transitions while adding new data...

    hope this helps :)
  11. Gary
    Gary avatar
    14 posts
    Member since:
    Jan 2012

    Posted 27 Mar 2012 Link to this post

    This part also seems suspect:

    kendo.bind($("#chart",observableData));

    Try:

    kendo.bind($("#chart"),observableData);
  13. PepLamb
    PepLamb avatar
    5 posts
    Member since:
    Jul 2011

    Posted 28 Mar 2012 Link to this post

    Hey Gary,

    Thank you, you are right! Also we don't need to bind anymore since the collection is observable any change to the collection will also effect the UI control, in this case the Chart control.
  14.
  15. Guru
    Guru avatar
    4 posts
    Member since:
    Mar 2012

    Posted 29 Mar 2012 Link to this post

    Thanks for the help guys.

    Guru
Back to Top