Question 87134 in ASP.NET Question posted in
The official documentation can be found here.

Kendo datasource parse Json as undefined – Asp.net

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;
}
Tags:

2

Answers


  1. 0

    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);
        }
      }
    }
  }
});
    Login or Signup to reply.
  2. 0

    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) {
                    // Here you can check what 'data' really is
                    console.log(data);
                    return JSON.parse(data);
                }
            }
        },
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search