Kendo Grid - Print data to table

Question

I am trying to print the following data in a table with kendo template feature. Here's the data that I am getting back by an ajax call:

{"Data":[{"CustomerID":1,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"},{"CustomerID":2,"CustomerAltID":"IMI-002","CustomerName":"Bill Gates","Gender":"M"},{"CustomerID":3,"CustomerAltID":"IMI-003","CustomerName":"Muskan Shaik","Gender":"F"},{"CustomerID":4,"CustomerAltID":"IMI-004","CustomerName":"Richard Thrubi","Gender":"M"},{"CustomerID":5,"CustomerAltID":"IMI-005","CustomerName":"Emma Wattson","Gender":"F"},{"CustomerID":6,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"},{"CustomerID":7,"CustomerAltID":"IMI-002","CustomerName":"Bill Gates","Gender":"M"},{"CustomerID":8,"CustomerAltID":"IMI-003","CustomerName":"Muskan Shaik","Gender":"F"},{"CustomerID":9,"CustomerAltID":"IMI-004","CustomerName":"Richard Thrubi","Gender":"M"},{"CustomerID":10,"CustomerAltID":"IMI-005","CustomerName":"Emma Wattson","Gender":"F"},{"CustomerID":11,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"},{"CustomerID":12,"CustomerAltID":"IMI-002","CustomerName":"Bill Gates","Gender":"M"},{"CustomerID":13,"CustomerAltID":"IMI-003","CustomerName":"Muskan Shaik","Gender":"F"},{"CustomerID":14,"CustomerAltID":"IMI-004","CustomerName":"Richard Thrubi","Gender":"M"},{"CustomerID":15,"CustomerAltID":"IMI-005","CustomerName":"Emma Wattson","Gender":"F"}],"Total":15,"AggregateResults":null,"Errors":null}

And here's how I am trying to print it:

<script id="javascriptTemplate" type="text/x-kendo-template">

    <table>
        <thead>
            <tr>
                <th>Customer ID</th>
                <th>ID</th>
                <th>Customer name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            # for (var i=0; i < data.length; i++){ console.log(Object.keys(data[i]));#
            <tr>
                # var keys = Object.keys(data[i]) #
               # for (var j=1; j < keys.length; j++){ console.log(keys[j]); #
                <td>
                    #= data[i][keys[j]] #
                </td>
                # } #
            </tr>
            # } #
        </tbody>
    </table>

</script>

Hers' my ajax call:

<script>

    $.ajax(
        {
            type: 'POST',
            url: '/default1/KendoDataAjaxHandle/',
            dataType: 'json',
            success: function (result) {


                //Get the external template definition using a jQuery selector
                var template = kendo.template($("#javascriptTemplate").html());

                //console.log(result);
                var results = template(results); //Execute the template
                //console.log(results);
                $("#example").html(results); //Append the result

            }
        })

</script>

Can someone please tell me as to how to print the data as I am not getting any data in the table.

Answer 1

Considering your this data

{"Data":[{"CustomerID":1,"CustomerAltID":"IMI-001","CustomerName":"Henry Ford","Gender":"M"}],"Total":15,"AggregateResults":null,"Errors":null}

Problem: Is you are not assigning the correct data to the template..

var results = template(results); //results are not the expected object

Solution: You need to pass results.Data to your template. So use this line.

var results = template(results.Data); //pass data to the template.