CODEWITHSUNDEEP
javascripthtmlkendo-uikendo-gridkendo-mobile
xlinc
xlinc

Reputation: 97

Access and iterate array property of Kendo UI Listview inside the template

I have a Kendo UI Mobile Listview

 <ul data-role="listview" data-bind="source: customers" data-template="customer-template"/>

Now I want to access the property of the customer which is an array and iterate it inside the template. something like this 

<script type="text/x-kendo-template" id="customer-template">
    <div>#:CustomerName#</div>
    <div>
         <div>Orders</div>
            #for(x=0;x<customers.orders.lentgh(); x++){#
                <div>customers.orders.[x].OrderId</div>
            #}#

 </div>

Obviously, this lines throws an error

 #for(x=0;x<customers.orders.lentgh(); x++){#
       <div>customers.orders.[x].OrderId</div>
    #}#

Is it possible to access the datasource of the listview inside the template? any ideas?

Upvotes: 1

Views: 3205

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

You don't need the data source of the list view. The template is given an item from this data source which you can use instead.

There are a few other problems:

  1. If orders is a JavaScript array you should get its length via the length field. It is not a method.
  2. The length is misspelled.
  3. To proper way to get an item from a JavaScript array is orders[x] not orders.[x].
  4. To output a value in a Kendo UI Template you should use the #: # expression.
  5. Your list view is created from a <ul> but the template is a <div>. You cannot nest a <div> inside an <ul>. You should use a <li> instead.
  6. The <ul> element cannot be self-closed. You need to fully close it - <ul></ul>.

I have addressed all those problems in the code snippet below:

<ul data-role="listview" data-bind="source: customers" data-template="customer-template"></ul>
<script type="text/x-kendo-template" id="customer-template">
  <li>
     <div>#:CustomerName#</div>
     <div>Orders</div>
     #for(var x=0; x < orders.length; x++){#
            <div># orders[x].OrderId #</div>
     #}#
  </li>
</script>

Also here is a live demo: http://jsbin.com/aHExUWu/1/edit

Upvotes: 2

Related Questions