Binding Kendo Data Source with Async $.ajax calling from C# MVC Controller Action

Question

This is my action in controller. Which return a List> converting into DataSourceResult.and also Serializing into Json.

[HttpPost]
public ActionResult GetMissingShiftData([DataSourceRequest]DataSourceRequest request)
{
    DataTable dtResponse = new DataTable();
    var dynamicList = new List<dynamic>();
    var myMainList = new List<List<dynamic>>();
    List<DataSourceResult> viewResultList = new List<DataSourceResult>();

    string RigNumber = string.IsNullOrWhiteSpace( resultData.Filter.SelectedRig.RigNumber) ||  resultData.Filter.SelectedRig.RigNumber == "ALL" ? "" :  resultData.Filter.SelectedRig.RigNumber;

    DataSet response = MissingShiftsReportData.GetData(Convert.ToDateTime(resultData.Filter.DateStart), Convert.ToDateTime(resultData.Filter.DateEnd), ConnString, RigNumber);


    foreach (DataTable dt in response.Tables)
    {

        dtResponse = dt;

        string[] columnNames = dtResponse.Columns.Cast<DataColumn>().Select(x => x.ColumnName).ToArray();


        foreach (DataRow dr in dtResponse.Rows)
        {
            dynamic myObj = new ExpandoObject();
            var p = myObj as IDictionary<string, object>;
            Regex rgx = new Regex("[^a-zA-Z0-9]");
            for (int i = 0; i < columnNames.Length; i++)
            {
                string name = dr.Table.Columns[i].ColumnName.Replace(" ", String.Empty);
                name = name.Replace(".", String.Empty);
                name = name.Replace("(", String.Empty);
                name = name.Replace(")", String.Empty);
                name = rgx.Replace(name, "");
                p[name] = dr[i];

            }
            dynamicList.Add(p);
        }
        myMainList.Add(dynamicList);


    }
    DataSourceResult viewResult = myMainList.ToDataSourceResult(request);

    string JsonViewData = JsonConvert.SerializeObject(viewResult.Data);           
    return new ContentResult { Content = JsonViewData, ContentType = "application/json", ContentEncoding = Encoding.UTF8 };
}

And this is the async call I am doing with Jqery.while I am trying to bind a data source it shows "data[0].Data" is "undefined". How can I make use of 'data'.

$.ajax({
    url: "GetMissingShiftData",
    type: "post",
    datatype: 'json',
    success: function (data) {
        var list = data[0].Data;
        var dataSource = new kendo.data.DataSource({
            data: data[0].Data
        });
        dataSource.read();
        return false;
    },
    error: function (msg) {
        toastr.error("Error: " + msg.statusText);
    }
});

Answer 1

You are serializing an array (the Data property) and don't need to use the Data field at the client-side:

$.ajax({
    url: "GetMissingShiftData",
    type: "post",
    datatype: 'json',
    success: function (data) {
        var dataSource = new kendo.data.DataSource({
            data: data
        });
        dataSource.read();
        return false;
    },
    error: function (msg) {
        toastr.error("Error: " + msg.statusText);
    }
});