Kendo UI loop through collection in Json within template for ListView

mservais picture mservais · Sep 3, 2012 · Viewed 21.9k times · Source

I am trying to figure out within a Kendo UI template for a list view how to loop through a collection within each object to render the information on the page. Here is an example of the json I am playing with:

{"Data":[{"Title":"Malicious Acts","KeyPairs":{"Key1":"12","Key2":"24"}},            {"Title":"Enrollments","KeyPairs":{"Key1":"12","Key2":"24"}},{"Title":"Customer Feedback","KeyPairs":{"Key1":"12","Key2":"24"}},{"Title":"Questionable Accounts","KeyPairs":{"Key1":"12","Key2":"24"}}],"Total":4,"AggregateResults":null,"Errors":null}

I want to render the KeyPairs items in the template and just an having some trouble understanding how to.

Here is the source:

<div id="subscriberFunctions">

    <script type="text/x-kendo-tmpl" id="template">
        <div class="subscriberFunction">
            <h3>${Title}</h3>
           <!-- Display KeyPairs -->
        </div>
    </script>

    @(Html.Kendo().ListView<SubscriberMenuFunction>()
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(dataSource =>
        {
            dataSource.Read(read => read.Action("SubscriberMenu", "ListView"));
        })
        .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Single))

    )
</div>

I'm sure I'm just overthinking this, and it is something simplistic, but not sure how to implement the foreach loop in the template for Kendo UI to recognize it.

Thanks in advance!

Answer

Stan picture Stan · Nov 21, 2012

You can do this with a counter in the for-loop. This should fix your issue:

<script type="text/x-kendo-tmpl" id="template">
    <div class="subscriberFunction">
        <h3>${Title}</h3>
        <!-- Display KeyPairs -->
        <ul>
            #for (var i=0,len=KeyPairs.length; i<len; i++){#
                <li>${ KeyPairs[i] }</li>
            # } #
        </ul>
    </div>
</script>