### Bug report
When the project is configured for runtime compilation, and the TagHelper DropDownList has custom classes or attributes, NullReferenceException is thrown.
### Reproduction of the problem
1. Create a .NET 8 project and install the Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet package.
2. Define a TagHelper DropDownList and add a custom class:
//Program.cs
builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();
builder.Services.AddMvc().AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
builder.Services.AddKendo();
//View
<kendo-dropdownlist for="Id" datatextfield="Text" datavaluefield="Value" auto-width="true" class="form-control w-75">
<datasource type="Kendo.Mvc.UI.DataSourceTagHelperType.Ajax">
<transport>
<read url="@Url.Action("GetData", "Home")"/>
</transport>
</datasource>
</kendo-dropdownlist>
3. Run the application and observe the exception: "NullReferenceException: Object reference not set to an instance of an object."
4. When using the HtmlHelper version of the DropDownList or removing the custom class from the TagHelper declaration, the error does not occur.
### Expected/desired behavior
The TagHelper DropDownList must exhibit the same behavior as the HtmlHelper DropDownList.
### Workaround
Add 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>
Alternatively, switch to the HtmlHelper version of the DropDownList.
### Environment
* **Telerik UI for ASP.NET Core version: 2024.4.1112
* **Browser: [all]
The DropDownList stretches to adapt to the length of the selected item.
The width of the DropDownList should be consistent.
Hi Support Team,
When we use filter in the dropdownlist the WAVE is complaining of the missing Label inside the list box (for the search box). Please advise for the fix.
Below is the code, when add the attribute of Filter then WAVE complains about that as shown below screen shot from Telerik Demo site
@(Html.Kendo().DropDownListFor(m => m.OfficerIDTypeID)
.DataValueField(nameof(ReferenceCodeDTO.ID))
.DataTextField(nameof(ReferenceCodeDTO.Label))
.Filter(FilterType.Contains)
.HtmlAttributes(new { style = "width: 100%", tabindex = ++tabIndex })
.ValuePrimitive(true)
.OptionLabel("")
.HtmlAttributes(new { style= "aria-labelledby:OfficerIDTypeID" })
.BindTo(await refCodeLookupHelper.GetCodesByReferenceCodeType("PersonIdentifierTypeKey"))
.Events(e => e.Change("onChangeOfficerTypeId"))
)
If there is a text binding to the item that has a script tag injected, the Core component will break its initialization instead of encoding it as it is done for the Telerik UI for ASP.NET MVC DropDownList helper.
@(Html.Kendo().DropDownList()
.Name("DDL")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select...")
.DataTextField("text")
.DataValueField("value")
.Height(310)
.BindTo(new List<object> {
new { text = "Test", value = 0 },
new { text = "<script>alert(123)</script>", value = 0 }
})
)
Result:
The data attributes are not rendered for the DropDownlist when bound to Model in Razor Pages.
View:
@page
@model TelerikAspNetCoreApp12.Pages.IndexModel
<form>
@(Html.Kendo().DropDownList()
.Name("fabric")
.OptionLabel("Select...")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.Data)
.Filter("contains")
)
<input type="submit" />
</form>
Back end:
namespace TelerikAspNetCoreApp12.Pages
{
public class IndexModel : Microsoft.AspNetCore.Mvc.RazorPages.PageModel
{
public List<TestModel> Data { get; set; } = new List<TestModel>();
public void OnGet()
{
for (int i = 1; i <= 100; i++)
{
Data.Add(new TestModel() { Text = "product" + i, Value = i.ToString() });
}
}
}
}
Model:
namespace TelerikAspNetCoreApp12.Models
{
public class TestModel
{
[Required(ErrorMessage = "Please select")]
public string Text { get; set; }
public string Value { get; set; }
}
}
Inspect the input field for the DropDownList. It does not have data-val and data-val-required attributes.
The data attributes are not being rendered.
The data attributes should be rendered.