DataSource - Binding Nested Array To Template

2 posts, 0 answers
  1. Josh
    Josh avatar
    1 posts
    Member since:
    Dec 2012

    Posted 14 Jan 2015 Link to this post

    I have a data source that contains a single Order, the Order contains an array of Order Products, I am able to bind to the datasource.data and get the values of each field.

    What I need to be able to do is bind a separate template to just the Order Products array from the Order data source.

    I was thinking it could be something like:
    The List View:
    <div data-role="view" data-title="Order Details By Number" data-layout="main" data-model="APP.models.orderdetails_bynumber">
        <ul data-role="listview" data-style="inset" data-template="orderItemTemplate" data-bind="source: ds.data.OrderProducts"></ul>
    </div>
    The Template:
    <script type="text/x-kendo-template" id="orderItemTemplate">
        <a data-bind="click: alert">#: PartNumber #</a>
    </script>

    I am able to do get the part number etc. if I specify the index of the product:
    The List View:
    <div data-role="view" data-title="Order Details By Number" data-layout="main" data-model="APP.models.orderdetails_bynumber">
        <ul data-role="listview" data-style="inset" data-template="orderItemTemplate" data-bind="source: ds"></ul>
    </div>
    The Template:
    <script type="text/x-kendo-template" id="orderItemTemplate">
        <a data-bind="click: alert">#: data.OrderProducts[0].PartNumber #</a>
    </script>

    Which displays the first part number in the array.

    Is there a way to accomplish what I am trying to do?


    Josh




  2. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 19 Jan 2015 Link to this post

    Hello Josh,

    From your description, it sounds like setting the DataSource's schema.data property to "Order.OrderProducts" will result in the desired behavior:

    var dataSource = new kendo.data.DataSource({
      transport: {
        read: {
          url: "......"
        }
      },
      schema: {
        data: "Order.OrderProducts".
      }
    });

    This property value should point to the name of the field in the response data that contains the data items.

    Regards,
    Tsvetina
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top