How To bind nested json to Kendo Dropdownlist asp .net core?

Question

i tried server binding in kendo dropdownlist asp dot net core. But the data do not get bind if the returned json is in nested format

public async Task<IActionResult> GetListOfMenuCategory()
            {
                try
                {
                    var Categories = (await _menuCategoryRepo.GetAllAsync().ConfigureAwait(true));

                var menuCategoriesResponseData = Categories.Select(i => new
                { categoryId = i.CategoryId, name = i.Name}).ToList();
                return await this.SendSuccess(menuCategoriesResponseData).ConfigureAwait(true);
            }
            catch (Exception Ex)
            {
                _logger.LogError(Ex, Ex.Message);
                return await this.SendError(Ex.Message).ConfigureAwait(true);
            }
        }

it returns json in this format

"data":[{"categoryId":1,"name":"Momo"}]}

MY View code to bind data to kendo dropdownlist

 @(Html.Kendo().DropDownListFor(a => a.MenuCategoryId)
                                .HtmlAttributes(new {style = "width:100%"})
                                .OptionLabel(new {
                                    name = "All",
                                    categoryId = 0})
                                .DataTextField("name")
                                .DataValueField("categoryId")
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("GetListOfMenuCategory", "MenuCategory");
                                    });
                                })
                                )

the output is empty drodown...can anyone help me on this.

Answer 1

Please modify your backend code, the correct json should be:

[{"categoryId":1,"name":"Momo"}]

Result:

My backend testing code:

public async Task<IActionResult> GetListOfMenuCategory()
{
    var model = new List<Model>()
    {
        new Model(){ categoryId=1,name="Momo"}
    };
    return Json(model);
}

Update:

If you do not want to change the json, I am afraid that this is not supported by the Kendo MVC DropDownList. It always expects a JSON array from the server. Can be achieved by initializing the DropDownList through JavaScript and using the schema data option:

@Html.TextBoxFor(m => m.MenuCategoryId)
   
<script>
    $(function () {
        jQuery("#MenuCategoryId").kendoDropDownList({
            dataSource: {
                transport: {
                    read: {
                        url: "/MenuCategory/GetListOfMenuCategory"
                    }
                },
                schema: {
                    data: "data"     //the importance here
                },
                serverFiltering: true
            },
            dataTextField: "name",
            dataValueField: "categoryId",
            index: 0
        });
    });
</script>