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

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 :)

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.

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 :)