9 Answers, 1 is accepted
0
Hi Rich,
For this task you could use the source binding - it will automatically loop through the source array and set the HTML content of the target element by rendering a Kendo template with a View-Model value. If the View-Model value changes the HTML content of the target element will be updated.
It this fiddle you will find an example using this approach in action.
Regards,
Alexander Valchev
the Telerik team
For this task you could use the source binding - it will automatically loop through the source array and set the HTML content of the target element by rendering a Kendo template with a View-Model value. If the View-Model value changes the HTML content of the target element will be updated.
It this fiddle you will find an example using this approach in action.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff Fink
Top achievements
Rank 1
Rank 1
answered on 16 Oct 2012, 01:25 AM
Is there a way though to directly bind an observableArray to a templated control (sorry if the following is botched, I'm new to the toolset):
//-- UI<ul id='prospects_List' data-role="listview" data-template="prospects_List_template" ></ul> <script id="prospects_List_template" type="text/x-kendo-template"> <li>#= Name #</li></script>//-- Transforms a service object to observablefunction obj_GetNewProspect(jsonProspect) { if (jsonProspect != null) { return kendo.observable({ ProspectID : jsonProspect.ProspectID, Name: jsonProspect.Name, Email: jsonProspect.Email, Phone : jsonProspect.Phone }); }} $.ajax({ url: "../ProspectServices.svc/GetMobileProspects", data: { App_ID: "3417E555-4A03-4ACE-A749-7E53793E1864", CustPrefix: "SPQ" }, success: function (data, textStatus, jqXHR) { //-- Handle Return Data if (data != null && data.GetMobileProspectsResult != null && data.GetMobileProspectsResult.length > 0) { //-- Init Empty ObservableArray var prospectArr = new kendo.data.ObservableArray([]); //-- Push service results converted to ObservableObjects to ObservableArray for (i = 0; i < data.GetMobileProspectsResult.length; i++) { prospectArr.push(obj_GetNewProspect(data.GetMobileProspectsResult[i])); } //-- Explicit set of datasource for ListView view_Prospects.view.element.find("#prospects_List").kendoMobileListView({ dataSource: new kendo.data.DataSource({ data: prospectArr }) }); } }, contentType: "json" })0
Hello Jeff,
I believe that you are looking for the source binding functionality. The approach is demonstrated in this demo.
If this does not fit in your requirements it would be best if you provide a small runnable example (jsFiddle/JsBin) that demonstrates what you would like to achieve. In this way I would be able to help you.
Regards,
Alexander Valchev
the Telerik team
I believe that you are looking for the source binding functionality. The approach is demonstrated in this demo.
If this does not fit in your requirements it would be best if you provide a small runnable example (jsFiddle/JsBin) that demonstrates what you would like to achieve. In this way I would be able to help you.
Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff Fink
Top achievements
Rank 1
Rank 1
answered on 19 Oct 2012, 09:23 PM
I beleive I had previously misread a portion of the linked documentation. I have been able to complete my task.
Thank you for your assistance!
Thank you for your assistance!
0
Muthuprakash Srinivasan
Top achievements
Rank 1
Rank 1
answered on 29 May 2013, 01:05 PM
I am updating the observableArray array, but it is not reflecting the UI. The following is the code we are using, can you please let me know what is wrong with it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link href="Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="Scripts/kendo/2013.1.319/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/kendo/2013.1.319/kendo.web.min.js"></script>
</head>
<body>
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div>Name: ${name} || Age: ${age}</div>
</script>
<script>
var arr = new kendo.data.ObservableArray([
{ name: "John one", age: 1 },
{ name: "Jane two", age: 2 },
{ name: "John three", age: 3 },
{ name: "Jane four", age: 4 }
]);
var viewModel = kendo.observable({
arr: arr
});
kendo.bind($("#example"), viewModel);
</script>
<script>
function Update() {
arr.age = 24;
}
</script>
<input type="button" id="btn2" onclick="Update();" value="Update"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<link href="Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="Scripts/kendo/2013.1.319/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/kendo/2013.1.319/kendo.web.min.js"></script>
</head>
<body>
<div id="example" data-template="template" data-bind="source: arr"></div>
<script id="template" type="text/x-kendo-template">
<div>Name: ${name} || Age: ${age}</div>
</script>
<script>
var arr = new kendo.data.ObservableArray([
{ name: "John one", age: 1 },
{ name: "Jane two", age: 2 },
{ name: "John three", age: 3 },
{ name: "Jane four", age: 4 }
]);
var viewModel = kendo.observable({
arr: arr
});
kendo.bind($("#example"), viewModel);
</script>
<script>
function Update() {
arr.age = 24;
}
</script>
<input type="button" id="btn2" onclick="Update();" value="Update"/>
</body>
</html>
0
Hello Sathish,
The update function fails because:
Regards,
Alexander Valchev
Telerik
The update function fails because:
- Syntax is invalid - 'arr' is an array of objects. May I ask which of the four age fields you expect the code arr.age = 24; to update?
- To update a value in the observable array you have to use one of the ObservableArray/ObservableObject methods - for example the set method. Please check the Setting field values of an ObservableObject help topic.
I hope this will help.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Muthuprakash Srinivasan
Top achievements
Rank 1
Rank 1
answered on 29 May 2013, 05:43 PM
We basically want the UI to refresh when a individual row in the array is updated. So we were using the following code http://jsfiddle.net/valchev/JrCpL/3/
I think the update code which I sent to you was wrong, It will be great if you can give me the actual code that I should use to update a field in any of the rows in the array and this update should reflect in the UI.
Currently adding and deleting rows from the array is working for us and is reflected in the UI immediately.
Thank you for the immediate response.
I think the update code which I sent to you was wrong, It will be great if you can give me the actual code that I should use to update a field in any of the rows in the array and this update should reflect in the UI.
Currently adding and deleting rows from the array is working for us and is reflected in the UI immediately.
Thank you for the immediate response.
0
Muthuprakash Srinivasan
Top achievements
Rank 1
Rank 1
answered on 30 May 2013, 05:08 PM
It will be great if you can provide us with the code that we should use to update an array of object, so that the update is reflected in the UI.
We are stuck here, so it will be great if you can provide us with a solution ASAP.
We are stuck here, so it will be great if you can provide us with a solution ASAP.
0
Hi Sathish,
In order to that you need to bind the elements inside the template.
And change the value using the set method:
For your convenience I updated the sample:
Regards,
Alexander Valchev
Telerik
In order to that you need to bind the elements inside the template.
<script id="template" type="text/x-kendo-template"> <div> <span data-bind="text: name"></span> || Age: <span data-bind="text: age"></span> </div></script>And change the value using the set method:
viewModel.arr[0].set("name", "The name was changed!");For your convenience I updated the sample:
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!