DropDownlist - All options are undefined (Razor Pages)

[Vakho]

So I just created a .NET 6 ASP.NET Core Web App (Razor Pages), added all telerik stuff according to the instructions (NuGet Packages, scripts and styles in _Layout.cshtml, @addTagHelper-s in _ViewImports.cshtml), and HTMLHelpers are rendering correctly. However, when I provide a data source to the DropDownList or ComboBox, all options show up as undefined.

Telerik version: 2022.2.621.   Bootstrap: V5.

Here's the code for DropDownList:

Index.cshtml

@page
@model IndexModel

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
@{
    ViewData["Title"] = "Home page";
}
--------------------------------------------------------------------------------
 
 
<div class="text-center">
    <h1 class="display-4">Welcome</h1>


         @(Html.Kendo().DropDownList()
            .Name("MyDropdownn")
            .DataTextField("Text")
            .DataValueField("Value")
            .HtmlAttributes(new { style = "width:300px;" })
            .AutoBind(false)
            .Filter(FilterType.Contains)      
            .DataSource(ds => ds
                .Custom()
                .Transport(transport => transport
                    .Read(r => r
                        .Url("/Index?handler=Sports")
                    ))
                    .ServerFiltering(false)
                )
            )

</div>

 

Index.cshtml.cs

        public JsonResult OnGetSports()
        {
            var allSports1 = db.Sports.Where(x => x.SportID > 0).Select(x => new DropDownModel
            {
                Text = x.Name,
                Value = x.SportID 
            }).ToList();

            return new JsonResult(allSports1);
        }

Proof that the data isn't empty/undefined

DropDownModel.cs (DropDownModel class)

    public class DropDownModel
    {
        public int Value { get; set; }
        public string Text { get; set; } = String.Empty;
    }

 

I've tried restarting everything, double-checking everything but nothing helped. Is there a bug with this version of telerik, is something incompatible with ,NET 6 or Bootstrap 5? Or am I doing something wrong? 

[Alexander]

Hi Vakho,

Thank you for reaching out.

The issue that you are facing may be caused by the JSON Serialization configuration that is used for the property name casing of data-bound components within the Telerik UI for ASP.NET Core suite. Having this in mind, if the serializer changes the casing to camelCase, but PascalCase is inspected instead, the component will not bind to the data, resulting in an unsuccessful attempt to display the fetched data.

You can verify this by inspecting the browser's console:

If this is the case, I would recommend setting the JSON Serialization to the initially added services within the integrated "Program.cs" file of the application. For example:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews()
            // Maintain property names during serialization. See:
            // https://github.com/aspnet/Announcements/issues/194
            .AddJsonOptions(options =>
                options.JsonSerializerOptions.PropertyNamingPolicy = null);

// Add Kendo UI services to the services container
builder.Services.AddKendo();

More in-depth information regarding this topic can be found in the following documentation:

• JSON Serialization

If the issue stills persists could you please share if there are any errors thrown within the browser console that could potentially indicate the cause of the issue?

Best Regards,
Alexander
Progress Telerik

[Anita]

I am having similar issues.

 

Controller:
                var jsonResult = Json(data);
                pt.Stop();
                return jsonResult;

data = Count = 240

 

Viewer:

                                        @(Html.Kendo().DropDownList().Name("selectImpersonate")
                                            .DataTextField("name")
                                            .DataValueField("caseID").Filter("contains")
                                            .OptionLabel("Select")
                                            .Filter(FilterType.Contains)
                                            .MinLength(2)
                                            .DataSource(source =>
                                            {
                                                source.Read(read =>
                                                {
                                                    read.Action("GetImpersonatableFacultyDropDown", "Common");
                                                }).ServerFiltering(true);
                                            })
                                            .AutoBind(false)
                                        )

Program.cs

var builder = WebApplication.CreateBuilder(args);


var mvcBuilder = builder.Services.AddRazorPages().AddJsonOptions(options =>
{
    options.JsonSerializerOptions.PropertyNamingPolicy = null;
    options.JsonSerializerOptions.WriteIndented = true;
});
if (builder.Environment.IsDevelopment())
{
    mvcBuilder.AddRazorRuntimeCompilation();
}
builder.Services.AddControllersWithViews();
builder.Services.AddKendo();

[Anita]

It is resolved by adding following lines in program.cs

builder.Services.AddControllersWithViews()
                    .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver());

[Mihaela]

Thank you for confirming that the issue is resolved, Anita.