Passing observableArray with obervable objects to Template Example?

10 posts, 0 answers
  1. Rich
    Rich avatar
    65 posts
    Member since:
    Jul 2012

    Posted 27 Aug 2012 Link to this post

    Hi,

    I need an example of how i might pass an ObservableArray of viewmodels to a template where the template has elements with bound properties.. Is this doable? Do you have to add loop syntax to the template?? Example code please.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 30 Aug 2012 Link to this post

    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
    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. Jeff Fink
    Jeff Fink avatar
    5 posts
    Member since:
    Dec 2009

    Posted 15 Oct 2012 Link to this post

    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 observable
    function 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"
        })
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Oct 2012 Link to this post

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

    Posted 19 Oct 2012 Link to this post

    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!
  7. Sathish Srinivasan
    Sathish  Srinivasan avatar
    1 posts
    Member since:
    Apr 2009

    Posted 29 May 2013 Link to this post

    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>
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 May 2013 Link to this post

    Hello Sathish,

    The update function fails because:
    1. 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?

    2. 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!
  9. Sathish Srinivasan
    Sathish  Srinivasan avatar
    1 posts
    Member since:
    Apr 2009

    Posted 29 May 2013 Link to this post

    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.

  10. Sathish Srinivasan
    Sathish  Srinivasan avatar
    1 posts
    Member since:
    Apr 2009

    Posted 30 May 2013 Link to this post

    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.
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Jun 2013 Link to this post

    Hi Sathish,

    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!
Back to Top
Kendo UI is VS 2017 Ready