Template loop

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    46 posts
    Member since:
    Nov 2013

    Posted 21 Jan 2015 Link to this post

    I have a ListView which gets json data from the MVC controller action like below:

    @(Html.Kendo().ListView<recordLayout>()
        .Name("GridCustomFormResults")
        .TagName("div")
        .ClientTemplateId("templateItem")
        .DataSource(dataSource => dataSource
          .Events(x => x.Error("handleAjaxError"))
          .Read(read => read.Action("Search_ListRead1", "Forms").Data("getFormRecordData"))
        )
    )

    The returned json has a array "fields".
    In the list view I want to create a template which loops through the fields collection and display a list or table in the template like below: 
    "fields.name" : "fields.value" 
    "fields.name" : "fields.value" 
    "fields.name" : "fields.value" 
    "fields.name" : "fields.value" 
    etc....

    Basically I dont know the syntax of how to loop through the fields collection in the template?


    The json follows this format:

    {
      "fields": [
        {
          "oid": "2C3E8771-1088-4CBC-A51B-1770F6FED377",
          "fieldDefOid": "E8718D13-152D-431D-BAA7-D25F0EE9873D",
          "name": "House Number",
          "value": "1"
        },
        {
          "oid": "F1D578DC-620F-4C43-8F1F-280970789A08",
          "fieldDefOid": "62A7BF60-C5AB-4E5B-9051-D263A23B26E4",
          "name": "Title",
          "value": "The Big Games"
        },
        {
          "oid": "50EDCECD-BBD0-43F6-A4C4-375B9A6A2D06",
          "fieldDefOid": "8729DB86-9FA3-4EFD-B68B-E8DFDC85B6D2",
          "name": "My Date",
          "value": "12 September 2010"
        }
      ],
      "oid": "6351A960-0815-4AED-9A51-653CA9E03BB2",
      "recordTypeOid": "D650D0BC-F312-4D97-A226-6F79AE84FF31"
    }







  2. Tyler
    Tyler avatar
    46 posts
    Member since:
    Nov 2013

    Posted 22 Jan 2015 in reply to Tyler Link to this post

    I've found the solution to this which is below. 


    <!--Define template in the page to render each feed item name as a list item-->
    <script type="text/x-kendo-tmpl" id="templateItem">
      <div>
        <div style="overflow:scroll; width:100%; height:10em">
          <table class="tbl2ColsHalf">
            # for (var i = 0; i < data.fields.length; i++) { #
            <tr>
              <td>#= data.fields[i].oid #</td>
              <td>#= data.fields[i].value #</td>
            </tr>
            # } #
          </table>
        </div>
      </div>
    </script>
     
    <br />
     
    @(Html.Kendo().ListView<recordLayout>()
        .Name("myList")
        .TagName("div")
        .ClientTemplateId("templateItem")
        .DataSource(dataSource => dataSource
          .Events(x => x.Error("handleAjaxError"))
          .Read(read => read.Action("Search_ListRead", "Forms").Data("getFormRecordData"))
        )
    )
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top