Kendo datasource parse Json as undefined-CodePudding

I tried to binding remote DataSource for my Kendo DropDownList, but the Kendo Datasource could parse the json response correctly. The result turns out to be "undefined" and recognize every single charachter in the data as a selection. I have no idea where the bug is, please help me!

Responce from controllor:

"[{"CODE_ID":"A","CODE_NAME":"Free"},{"CODE_ID":"B","CODE_NAME":"Borrowed"},{"CODE_ID":"U","CODE_NAME":"Unable"},{"CODE_ID":"C","CODE_NAME":"To be Borrowed"}]"

HTML Result

Front-end js code for Kendo DropDownList

$(document).ready(function () {
    $("#search_category").kendoDropDownList({
        dataTextField: "CODE_NAME",
        dataValueField: "CODE_ID",
        dataSource: {
            transport: {
                read: {
                    type: "GET",
                    url: "/BookData/GetDataList",
                    data: { name: "category" },
                    dataType: "json"
                }
            },
        },
    });
}

BookDataControllor

[HttpGet()]
public JsonResult GetDatalist(string name)
{
    string result;
    try
    {
        switch (name)
        {
            case "category":
                result = codeService.GetDataList("CODE_ID, CODE_NAME",
                "BOOK_CODE", "CODE_TYPE = 'BOOK_STATUS'");
                break;
            default:
                return Json(false);
         }
         return Json(result, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(false);
    }
}

back-end class CodeService

private DataTable GetDataTable(string sql)
{
    DataTable dt = new DataTable();
    using (SqlConnection conn = new SqlConnection(this.GetDBConnectionString()))
    {
        conn.Open();
        SqlCommand cmd = new SqlCommand(sql, conn);
        SqlDataAdapter sqlAdapter = new SqlDataAdapter(cmd);
        sqlAdapter.Fill(dt);
        conn.Close();
    }

    return dt;
}

public string GetDataList(string col, string src, string cond)
{
    DataTable dt = GetDataTable(string.Format(@"SELECT {0} FROM {1} WHERE {2}",
                                    col, src, cond).ToUpper());
    string result = JsonConvert.SerializeObject(dt);
    return result;
}

CodePudding user response：

You are returning CODE_ID and CODE_NAME in your controller, but the values you're referencing on the front-end are Category_Name and Category_ID. Change them to reference the correct column names:

$('#search_category').kendoDropDownList({
  dataTextField: 'CODE_NAME',
  dataValueField: 'CODE_ID',
  dataSource: {
    transport: {
      read: {
        type: 'GET',
        url: '/BookData/GetDataList',
        data: { name: 'category' },
        dataType: 'json',
        success: function (response) {
          console.log(response);
        }
      }
    }
  }
});

CodePudding user response：

It seems that even returning your data with Json(result) as JsonResult, the response content could be a string, which the DataSource is not handling the right way.

Try enrusing that it will be json with parse method:

$(document).ready(function () {
    $("#search_category").kendoDropDownList({
        dataTextField: "CODE_NAME",
        dataValueField: "CODE_ID",
        dataSource: {
            transport: {
                read: {
                    type: "GET",
                    url: "/BookData/GetDataList",
                    data: { name: "category" },
                    dataType: "json"
                }
            },
            schema: {
                parse: function(data) {
                    // You may check here what 'data' actually is
                    console.log(data);
                    return JSON.parse(data);
                }
            }
        },
    });
}