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.
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>