Dropdownlist - CSS class values cause razor NullReferenceException with v2024.4.1112

[Mike]

I have upgraded our libraries to version 2024.4.1112 and we are experiencing a NullReferenceException when we do this:

<kendo-dropdownlist for="Id" datatextfield="Name" datavaluefield="Id" auto-width="true" class="form-control w-75" required>

If I remove the class declaration and the required tag, page renders just fine.

Stack Trace: NullReferenceException: Object reference not set to an instance of an object. on Microsoft.AspNetCore.Razor.Language.TagHelperMatchingConventions.TryGetFirstBoundAttributeMatch

The breaking change listed on the release notes references a backward compatibility page but has no information specific to the dropdownlist control.

What am I missing?

[Mihaela]

Hi Mike, 

Would you please share the complete DropDownList declatation? I have tested the case, and it appears that both the class and "required" attribute are applied as expected at my end:

REPL sample: https://netcorerepl.telerik.com/QIFFwFlz43CJhPgC57

In regards to the breaking change related to the DropDownList, thank you for your report. We will ensure that the backward compatibility page is updated with the respective change. There is a rendering change in the DropDownList - the loading icon is now rendered as a separate span element (<span class="k-input-loading-icon k-icon k-i-loading"></span>) before the button ("k-input-button"):

Best,
Mihaela

[Mike]

Here is the full declaration.  ID is for data binding to a model declared.

@model ViewModel

<kendo-dropdownlist for="Id" datatextfield="Name" datavaluefield="Id" auto-width="true" class="form-control w-75" required>
    <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" page-size="0">
        <transport>
            <read url="@Url.Action("Get", "Controller")" datatype="json" />
        </transport>
    </datasource>
</kendo-dropdownlist>

Just to reiterate, if I do the following, the page renders:

<kendo-dropdownlist for="Id" datatextfield="Name" datavaluefield="Id" auto-width="true">
    <datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax" page-size="0">
        <transport>
            <read url="@Url.Action("Get", "Controller")" datatype="json" />
        </transport>
    </datasource>
</kendo-dropdownlist>

Edit - I've attached a screen shot of the error.

Also, here are the files I am using as of this writing:

    <link rel="stylesheet" href="~/_content/lib/kendo/styles/classic-main.css" />
    <link rel="stylesheet" href="~/_content/lib/kendo/styles/kendo.mobile.all.min.css">
    <link rel="stylesheet" href="~/_content/lib/kendo/styles/kendo-theme-utils.css">
    <script type="text/javascript" asp-append-version="true" src="~/_content/lib/kendo/js/kendo.all.min.js"></script>
    <script type="text/javascript" asp-append-version="true" src="~/_content/lib/kendo/js/kendo.aspnetmvc.min.js"></script>

[Mihaela]

Thank you for the shared code snippets, Mike.

Would you ensure that the referenced Kendo UI scripts and theme file are updated to version 2024.4.1112, as well? For example:

<link href="https://kendo.cdn.telerik.com/themes/10.0.1/classic/classic-main.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>

Also, I am attaching a a runnable ASP.NET Core application that uses the latest Telerik UI for ASP.NET Core version, where you can test the example locally. 

Best,
Mihaela

[Mike]

I took your previous code and placed into a simple test project and I still get the same result.  I should note that I flipped the declaration to an HTML helper and it worked perfectly.

@(Html.Kendo().DropDownList()
    .Name("ddlTest")
    .DataTextField("Name")
    .DataValueField("Value")
    .BindTo(data)
    .HtmlAttributes(new { @class = "form-control w-50" })
    )

*Edit - I found what the issue is and I was able to replicate the problem in your latest test project.  My project is configured for runtime compilation.  If you change the following:

builder.Services.AddControllersWithViews();

to:

builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();

The error will present itself.  It does feel as though this is related to this issue reported a few versions ago.

[Mihaela]

Hi Mike, 

Thank you for taking the time to review the sample app and diagnose the issue. It is greatly appreciated!

I have discussed the case with the developers and they confirmed the regression bug. I have logged it in our Public Feedback Portal on your behalf. You can follow the item here and receive status updates:

https://feedback.telerik.com/aspnet-core-ui/1672053-adding-attributes-and-classes-in-taghelper-dropdownlist-causes-nullreferenceexception-when-runtime-compilation-is-enabled

The item is flagged with the highest priority, so the bug should be resolved soon.

We sincerely thank you for finding the bug.  As a token of gratitude, I have updated your Telerik account points.  

While the official fix is available, I would suggest adding the custom class with jQuery:

<kendo-dropdownlist for="Id" datatextfield="Name"  datavaluefield="Id"  auto-width="true">
 ...
</kendo-dropdownlist>

<script>
$(document).ready(function(){
    $("#Id").addClass("form-control w-75"); // add the class to the hidden input element
    $("#Id").attr("required", "required");
    $("#Id").closest("span.k-dropdownlist").addClass("form-control w-75"); // add the class to the wrapper element
});
</script>

Here is the updated REPL for your reference: https://netcorerepl.telerik.com/movvmZFv180zTiFH20

If any other questions arise, please let me know.

Best,
Mihaela

[Mike]

Thank you for addressing it.  The work around is a no-go since each control may have its own possible display set up and a page with multiple of these would require to have to touch every single page for every single control.  Since this is a hard fail to any page that may have the control on its page (and this is a common control), I would have expected it to be part of a point release, not have to wait for it until the next general release.

[Mihaela]

Hi Mike, 

My manager confirmed that the fix will be available in the upcoming release in February (2025 Q1). Meanwhile, I would recommend switching to the HtmlHelper version of the DropDownList.

Thank you for your understanding regarding the matter. If you have any other queries, you are more than welcome to share them.

Best,
Mihaela