Kendo UI DropDown List does not accept JSON data?

Question

Using Kendo DropdownList for MVC, trying to identify why the DropdownList will not accept this data.

@(Html.Kendo().DropDownList()
         .Name("CompanyList") //The name of the DropDownList is mandatory. It specifies the "id" attribute of the widget.
         .DataTextField("Table")
         .DataValueField("COM_NAME")
         .DataSource(source =>
        {
            source.Custom()   //  Read(read =>
            .Type("json")
            .Transport(transport =>
                {
                    transport.Read("GetallCompanies", "Home");
                })

            .ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
        })
        .SelectedIndex(0) //Select the first item.

)

The raw data from the SQL action has this format:

"{\"Table\":[{\"ORG_ID\":265498,\"COMPORGID\":239597,\"COM_NAME\":\"ABC Rentals \"},{\"ORG_ID\":164929,\"COMPORGID\":239698,\"COM_NAME\":\"Asbury Machine Shop \"}]}"

Have referenced the Kendo docs and other SO examples. Put the JSON into a validator tool, says its correctly formatted.

In the page, the drop down has a left curly brace, { as the top item, and when clicking there are dozens of: Undefined.

The DataTextField was called "Table" because of the "Table" in the JSON array, but it was set to COM_NAME. The Controller Method,

 [HttpGet]
    public JsonResult GetallCompanies()
    {
        var ddx = CompInfo.GetAllCompanies(); //returns dataset
        string thedata = JsonConvert.SerializeObject(ddx);
        return Json(thedata, JsonRequestBehavior.AllowGet);
    }

Originally it was returning the JSON shown there starting with "Table\", but per the answer I changed it to take out the SerializeObject, so now it returns a DataSet with a single Table[0] and many rows. — rogersbra1

Sandman Sandman · Accepted Answer · 2017-05-10T10:51:52

I don't think you need to use SerializeObject on ddx aswell as the Json method before returning to the client. Can you try changing GetAllCompanies to:

[HttpGet]
public JsonResult GetallCompanies()
{
    var ddx = CompInfo.GetAllCompanies(); //returns dataset
    //string thedata = JsonConvert.SerializeObject(ddx);
    return Json(ddx);
}

Summary of the Json method:

Creates a Microsoft.AspNetCore.Mvc.JsonResult object that serializes the specified data object to JSON.

Kendo UI DropDown List does not accept JSON data?

2 Answers