Telerik MVC grid huge data set not binding

Question

I'm trying to bind a huge data set to my grid using a DataTable, but no luck. For this example I'm using 500 columns and 500 rows.

On DataSource read, I only put data in Col_1 but still binding is not successful.

It does not throw any binding error that's why I can't narrow down the cause.

What am I missing?

public class MyController : Controller
{
    public static DataTable db = new DataTable();

    public ActionResult Sample()
    {
        db = new DataTable();

        for (int i = 1; i <= 500; i++)
        {
            DataColumn dc = new DataColumn();
            dc.ColumnName = "Col_" + i.ToString();
            dc.Caption = "Col_" + i.ToString();
            dc.DataType = typeof(string);

            db.Columns.Add(dc);
        }

        return View(db);
    }

    public JsonResult gridRead_Sample([DataSourceRequest] DataSourceRequest request)
    {
        db = new DataTable();

        for (int i = 1; i <= 500; i++)
        {
            DataColumn dc = new DataColumn();
            dc.ColumnName = "Col_" + i.ToString();
            dc.Caption = "Col_" + i.ToString();
            dc.DataType = typeof(string);

            db.Columns.Add(dc);
        }

        for (int i = 1; i <= 500; i++)
        {
            DataRow row = db.NewRow();
            row["Col_1"] = "Some String 123";

            db.Rows.Add(row);
        }

        return Json(db.ToDataSourceResult(request));
    }
}

Telerik Grid Setup:

@model System.Data.DataTable @(Html.Kendo().Grid<dynamic>()
    .Name("gridSample")
    .ToolBar(toolbar =>
    {
        toolbar.Search();
    })
    .Columns(column =>
    {
        foreach (System.Data.DataColumn dcolumn in Model.Columns)
        {
            column.Bound(dcolumn.ColumnName).Hidden(false).Width(100).HtmlAttributes(new { @class = dcolumn.ColumnName.ToLower() });
        }
    })
    .Height(487)
    .Sortable()
    .Scrollable(s => s.Virtual(GridVirtualizationMode.RowsAndColumns).Height("auto"))
    .Filterable()
    .Pageable(p =>
    {
        p.Numeric(false);
        p.Info(true);
        p.Refresh(true);
        p.PreviousNext(false);
    })
    .Resizable(r => r.Columns(true))
    .AutoBind(true)
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Batch(false)
        .ServerOperation(false)
        .Model(model =>
        {
            model.Id("Col_1");
            foreach (System.Data.DataColumn column in Model.Columns)
            {
                model.Field(column.ColumnName, column.DataType).Editable(false);
            }
        })
        .Events(events =>
        {
            events.Error("error_handler");
        })
        .Read(read => read.Action("gridRead_Sample", "MyController"))
    )
)

<script>
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>