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 DropDownList stretches to adapt to the length of the selected item.
The width of the DropDownList should be consistent.
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.
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"))
)