Unable to print data in grid

Question

I am trying to print my data coming from controller in a table but unable to do so. I am using Kendo UI template in order to print. I am attaching the code below along with the error that I am getting.

<div id="example"></div>

<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 data = template(result); //Execute the template
                    $("#example").html(data); //Append the result

                }
            })

</script>

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

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

</script> 

What i am doing in the above code is making an ajax call to the action method and getting the results in JSON. Here's my controller method:

public ActionResult KendoDataAjaxHandle([DataSourceRequest]DataSourceRequest request)
        {
            IQueryable<Customer> products = db.Customers;
            DataSourceResult result = products.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Error that I am getting on executing the code is: result is undefined. However on consoling the results returned after ajax call, I get an object which has all the values.

How do I print those values coming back in the table? Also please correct me if I have done something wrong here. Thank in advance.

Answer 1

Try changing the the variable name referenced inside the template from "result" to "data" as that is what Kendo uses in its template execution code.

Example: http://dojo.telerik.com/@Stephen/ENUze

Updated Example Showing how to iterate the object's fields(based on comment): http://dojo.telerik.com/@Stephen/oXOJU

NOTE: this assumes that the fields are listed in the order you have specified in your comment. If the fields don't come back in this order, you will have to add code to map the field name to the column index instead of just blindly looping.

Update 2:

Updated example using exact format of returned data:

http://dojo.telerik.com/@Stephen/ipeHec

Note: you have to deal with the CustomerAltID that is in the returned data but not in the table somehow. My example chooses to remove it from list of keys to process. How you deal with it is up to you.