Kendo ui网格下拉编辑器不加载数据

Question

Can not load data to kendo dropdown list. It gets data from backend but list is empty. BackEnd looks like:

    [HttpPost]
    public ActionResult GetCities(DataSourceRequest command)
    {
        var cityModel = _uow.Cities.GetAll().ToList();


        var gridModel = new DataSourceResult
        {
            Data = cityModel.Select(PrepareCityModelForList),
            Total = cityModel.Count
        };

        return Json(gridModel);
    }

Front end

            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "Id",
                    fields: {
                        Name: { editable: true, type: "string" },
                        City: { defaultValue: { CityId: 0, CityName: "Select City" } },
                        Address: { editable: true, type: "string" },
                        Tel: { editable: true, type: "string" },
                        Fax: { editable: true, type: "string" },

                    }
                }
            },
           ......
        columns: [...
        {
            field: "City.Name",
            title: "City",
            editor: cityDropDownEditor,
            template: "#=City.CityName#",
            width: 200
        }
 ....


function cityDropDownEditor(container, options) {
    $('<input required data-text-field="CityName" data-value-field="CityId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: {
                transport: {
                    read:
                    {
                        url: "@Html.Raw(Url.Action("GetCities", "Contact"))",
                        type: "POST",
                        dataType: "json"
                    }
                }
            }
        });
}

The city model has CityName (string), CityId (int) and CityPostalCode (string) fields. The only error in console is "Uncaught TypeError: e.slice is not a function"

upd* Code for PrepareCityModelForList

    protected virtual CompanyCityModel PrepareCityModelForList(City city)
    {

        return new CompanyCityModel()
        {
            CityId = city.Id,
            CityName = city.Name,
            PostalCode = city.PostalCode
        };
    }

upd*: returned JSON

{"ExtraData":null,"Data":[{"CityId":3,"CityName":"Minsk","PostalCode":"220000"},{"CityId":4,"CityName":"Brest","PostalCode":"224000"},{"CityId":5,"CityName":"Vitebsk","PostalCode":"210000"},{"CityId":6,"CityName":"Gomel","PostalCode":"246000"}],"Errors":null,"Total":4}

Answer 1

The problem was in json, that was passed by ajax. You have to ensure your json is simple like:

      {[
          {"CityId":3,"CityName":"Minsk","PostalCode":"220000"}, 
            "CityId":4,"CityName":"Brest","PostalCode":"224000"}, 
            "CityId":5,"CityName":"Vitebsk","PostalCode":"210000"}, 
            "CityId":6,"CityName":"Gomel","PostalCode":"246000"}
      ]}