This is a migrated thread and some comments may be shown as answers.

Cascading dropdowns show 'Undefined'

1 Answer 753 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Yvette
Top achievements
Rank 1
Yvette asked on 28 Dec 2019, 09:04 PM

hello, I'm working through a trial of UI for .NET Core and not having much luck with a very simple task. I'm following the example in the demo for cascading dropdowns and I can't even get the first dropdownlist to load. It just shows a list of items marked Undefined.

 

Here's the code from the View (Create.cshtml):

 

 <div class="form-group">
                <label asp-for="CategoryID" class="control-label"></label>
                @(Html.Kendo().DropDownList()
             .Name("categories")
             .HtmlAttributes(new { style = "width:100%" })
             .OptionLabel("Select category...")
             .DataTextField("CategoryName")
             .DataValueField("CategoryID")
             .DataSource(source =>
                     {
                  source.Read(read =>
                         {
                      read.Action("LoadCategories", "Groups");
                  });
             })
                )
                <span asp-validation-for="CategoryID" class="text-danger"></span>
            </div>


            <div class="form-group">
                <label asp-for="SubcategoryID" class="control-label"></label>
                
                @(Html.Kendo().DropDownList()
              .Name("subcategories")
              .HtmlAttributes(new { style = "width:100%" })
              .OptionLabel("Select subcategories...")
              .DataTextField("SubcategoryName")
              .DataValueField("SubcategoryID")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("LoadSubcategories", "Groups")
                          .Data("filterSubcategories");
                  })
                  .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("categories")
                )

                <span asp-validation-for="SubcategoryID" class="text-danger"></span>
            </div>

            <script>
                function filterSubcategories() {
                    return {
                        categories: $("#categories").val()
                    };
                }
            </script>

 

 

Here's the code from GroupsController.cs:

 

public JsonResult LoadCategories()
        {
            List<Category> categories = new List<Category>();

            var catQuery = from d in _context.Category
                             where d.IsActive
                             orderby d.CategoryName // Sort by name.
                             select d;


            categories = catQuery.ToList();

            return new JsonResult(categories);
        }

        public JsonResult LoadSubcategories(int? categories)
        {
            List<Subcategory> subcategories = new List<Subcategory>();

            var catQuery = from d in _context.SubCategory
                           where d.CategoryID == categories.GetValueOrDefault()
                           orderby d.SubCategoryName // Sort by name.
                           select d;


            subcategories = catQuery.ToList();

            return new JsonResult(subcategories);
        }

 

I get the same result when using code in GroupsController LoadCategories more similar to your demo source code:

return Json(_context.Category
                     .Select(c => new { CategoryID = c.CategoryID, CategoryName = c.CategoryName }).ToList());

 

 

1 Answer, 1 is accepted

Sort by
1
Plamen
Telerik team
answered on 02 Jan 2020, 06:37 AM

Hi,

In such case I would recommend you to inspect what is the format of the returned data in the development tool of the browser. One possible reason for getting undefined is for example if the returned data is transformed and come with lowercase. In such case the DataTextField and  DataValueField will have to be set to "categoryName" and "categoryID" respectively.

Regards,
Plamen
Progress Telerik

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
Carlos
Top achievements
Rank 1
commented on 03 Jun 2021, 06:57 AM | edited

Thanks. It worked!
Melinda
Top achievements
Rank 1
commented on 01 Feb 2022, 10:14 AM

Thank you! It worked for me too! 
Tags
DropDownList
Asked by
Yvette
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Share this question
or