asp.net-coreasp.net-ajaxkendo-asp.net-mvckendo-dropdownkendo-ui-mvc

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


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.


Solution

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

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

    Result:

    enter image description here

    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>