This is a migrated thread and some comments may be shown as answers.

Kendo MVVM Questions

7 Answers 356 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
PepLamb
Top achievements
Rank 1
PepLamb asked on 12 Mar 2012, 11:52 PM
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?

7 Answers, 1 is accepted

Sort by
0
Guru
Top achievements
Rank 1
answered on 21 Mar 2012, 10:22 PM
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
0
PepLamb
Top achievements
Rank 1
answered on 22 Mar 2012, 02:24 AM
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 :)
0
Guru
Top achievements
Rank 1
answered on 22 Mar 2012, 03:01 AM
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.
0
PepLamb
Top achievements
Rank 1
answered on 26 Mar 2012, 11:09 PM
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 :)
0
Gary
Top achievements
Rank 1
answered on 28 Mar 2012, 01:49 AM
This part also seems suspect:

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

Try:

kendo.bind($("#chart"),observableData);
0
PepLamb
Top achievements
Rank 1
answered on 28 Mar 2012, 07:02 AM
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.
0
Guru
Top achievements
Rank 1
answered on 29 Mar 2012, 06:11 PM
Thanks for the help guys.

Guru
Tags
MVVM
Asked by
PepLamb
Top achievements
Rank 1
Answers by
Guru
Top achievements
Rank 1
PepLamb
Top achievements
Rank 1
Gary
Top achievements
Rank 1
Share this question
or