kendo template - working with json data

Question

I have a kendo template that looks like this:

<script type="text/x-kendo-template" id="submitTemplate">
  <table>
    <thead>
      <tr>
        <th>Sequence</th>
        <th>Pic</th>
        <th>Name</th>
      </tr>
   </thead>
    # for (var i = 0; i < data.length; i++) { # 
      <tr>
        <td>#= Sequence #</td>
        <td>#= Pic #</td>
        <td>#= Name #</td>
      </tr>
    # } #
  </table>
</script>

To be displayed in a kendo window here:

@(Html.Kendo().Window()
    .Name("SubmitWindow")
    .Title("Submit Concern")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(500)
)

I have a function that gets json data via an ajax call like this:

function onButtonClick(e) {
    e.preventDefault();

    var submitTemplate = kendo.template($("#submitTemplate").html());
    var modelData = this.dataItem($(e.currentTarget).closest("tr"));
    var serviceURL = getPathFromUrl(window.location.href);
    var wnd = $("#SubmitWindow").data("kendoWindow");

    serviceURL = serviceURL.replace("NewConcerns", "GenerateRouteForConcern");

    $.ajax({
        url: serviceURL,
        type: 'GET',
        data: { concernid: modelData.id },
        datatype: 'json',
        success: function(result, status) {
            wnd.content(submitTemplate(result));
            wnd.center().open();
        },
        error: function() {
            alert('Error in submitting route.');
        }
    })
}

The data is stored in a List objects defined below:

public class ConcernRouteViewModel
{
    public String Pic { get; set; }

    public Int32 Sequence { get; set; }

    public String Name { get; set; }
}

My controller is as follows:

[System.Web.Http.HttpGet]
public JsonResult GenerateRouteForConcern(int concernId)
{
    List<ConcernRouteViewModel> crvmList = userSvc.GenerateRouteByConcernId(concernId);
    return Json(crvmList, JsonRequestBehavior.AllowGet);
}

The json data being returned from my controller looks like this:

[{"Pic":"BBY","Sequence":1,"Name":"Bugs Bunny"},{"Pic":"DDK","Sequence":2,"Name":"Daffy Duck"},{"Pic":"EFD","Sequence":3,"Name":"Elmer Fudd"},{"Pic":"PLP","Sequence":4,"Name":"Pepe LePew"},{"Pic":"STC","Sequence":5,"Name":"Sylvester the Cat"}]

I want to display the json data in my kendo template but haven't had much luck. So far, everything that I've tried to use just gets me 'undefined.' I think my major issue is in the for loop definition, but I'm not sure how to handle a list of objects like this.

Any help would be greatly appreciated.

Answer 1

In your template for loop, you need to get data like this: data[i].Sequence

  <script type="text/x-kendo-template" id="submitTemplate">
  <table>
    <thead>
      <tr>
        <th>Sequence</th>
        <th>Pic</th>
        <th>Name</th>
      </tr>
   </thead>
    # for (var i = 0; i < data.length; i++) { # 
      <tr>
        <td>#= data[i].Sequence #</td>
        <td>#= data[i].Pic #</td>
        <td>#= data[i].Name #</td>
      </tr>
    # } #
  </table>
</script>

DEMO