Bug report

The DropDownList stretches to adapt to the length of the selected item.

Reproduction of the problem

1. Run this Dojo
2. Change the selected item

Expected/desired behavior

The width of the DropDownList should be consistent.

Environment

• Kendo UI version: 2023.1.314

Can you include the "HtmlAttributes" option in the "SelectListItemBuilder" class?

For example:

@(Html.Kendo().DropDownList()
    .Name("color")
    .Items(items =>
    {
        items.Add().Text("First Item").Value("1").HtmlAttributes(new { ... });
        items.Add().Text("Second Item").Value("2");
    })
)

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"))
                                            )

Having a floating label functionality similar to the one available for the native Vue DropDownList, would be nice to have.

https://www.telerik.com/kendo-vue-ui/components/dropdowns/floating-labels/

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:

Bug report

The data attributes are not rendered for the DropDownlist when bound to Model in Razor Pages.

Reproduction of the problem

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.

Current behavior

The data attributes are not being rendered.

Expected/desired behavior

The data attributes should be rendered.

Environment

• Kendo UI version: 2019.2.619
• jQuery version: x.y
• Browser: [all]

Hi there

I am using MongoDb database and storing much of the data as complex objects.

Like this

Company

string     Name

string     Phone

object[]    Addresses

                   object Id

                   string name

                   string line2

                   string town

So the addresses are not stored in normalised tables such as you would have in a typical sql setup

Also I am using Razor pages and not using view models but binding to page model properties

mostly matching the database document. 

One thing I am wanting to do is make the best of such a plan as it saves a lot of coding time.

If I have a telerik control such as a dropdownlist you would typically return an Id and keep the Id

in the database table.  However in the new style of document database it is common to store

the entire object and not just the Id so the problem is if the control returns only the Id then

the developer has to obtain the rest of the object to store away adding the the complexity of the code.

Telerik allows very easy binding of an object to a control and the whole object remains available to use

such as in a dropdownlist to show a name and return say the Id.

An improvement for those using Document style databases with denormalised data would be the option

to simply return the whole object.

@(Html.Kendo().DropDownList()
                .Name("ToBranch") 
                .DataValueField("Id") 
                .DataTextField("Name") 
                .BindTo((Company.Addreses) 
)

So in addition to DataValueField have something like DataReturnObject(true) or something like that

which would send back all the data for the item which you already have sitting right there.

This would very nicely serialise into the pagemodel complex object property and allow proper model validation

which is a problem when you return an Id but the property expects the full object.

I understand all this can be overcome but just a little tweaking by Telerik would be a significant benefit

where your customers are using document style databases such as MongoDb and Azure Cosmos

So..

1 That is my suggestion.

2 Can I currently achieve this somehow?