How to bind JSON to Kendo Grid datadource in MVC
<p>I'm trying to dynamically bind the JSON response to grid. I have set <code>autobind = false</code> so I can control when to call <code>ReadData()</code>.</p>

<p>I have a simplified example below that I can't get to work.</p>

<p>In the view(cshtml)</p>

<pre><code>@(Html.Kendo().Grid&lt;MyModel&gt;()
    .Name("GridDetail")
    .AutoBind(false)
    .DataSource(ds =&gt;
    {
        ds.Ajax().Read(r =&gt;
        {
            r.Action("ReadData", "Home"); //action in Home controller
        });
    })
    .Columns(c =&gt;
    {
        c.Bound(m =&gt; m.Name);
        c.Bound(m =&gt; m.Age);
    })
)

@section Scripts{
    &lt;script type="text/javascript"&gt;
        $(function () {
            var grid = $("#GridDetail").data("kendoGrid");
            grid.dataSource.read();
        });

    &lt;/script&gt;   
}
</code></pre>

<p>In the controller i have</p>

<pre><code>public ActionResult ReadData()
{
    var model = new[]
    {
        new MyModel
        {
            Name = "Abc",
            Age = 10
        }, 
        new MyModel
        {
            Name = "PersonName",
            Age = 25
        }, 
    };
    return Json(model, JsonRequestBehavior.AllowGet);
}
</code></pre>

<p>Using the developer tools in chrome I can see that the response for the <code>ReadData()</code> is <code>[{"Name":"Abc","Age":10},{"Name":"PersonName","Age":25}]</code> however the rendered grid is only showing the column names but no data columns.</p>

<p>MyModel is a simple class :</p>

<pre><code>public class MyModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}
</code></pre>