Add the ability to make the drop down list expanded contents wider than the closed control, or just automatically determine appropriate width (doesn't always work well for very long text fields, so you need both properties).

See:  https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/dropdownconfigurator/defaultcs.aspx

Hello,

Initial I want no item to be selected to let the user select a value. I thought it would be enough if my bindvalue would be of a nullable type. I'm getting an exception when trying. If this is not supported, how can I do it?

     <div class="form-group col-md-2">
        <label class="col-form-label" for="ddReleaseType">Fönstertyp</label>
        <TelerikDropDownList Data="@ReleaseTypeFilterOptions" @bind-Value="FilterState.ReleaseType" TextField="DisplayText" ValueField="ReleaseType" Class="max-width form-control" @ref="ddReleaseType"></TelerikDropDownList>
    </div>

     public enum ReleaseType : int
    {
        All = 0,
        Category = 1,
        Season = 2,
        Misc = 3
    }

        protected Telerik.Blazor.Components.TelerikDropDownList<ReleaseTypeFilterModel?, SessionState.ReleaseType?> ddReleaseType;
 

        protected class ReleaseTypeFilterModel
        {
            public SessionState.ReleaseType ReleaseType { get; set; }
            public string DisplayText { get { return ReleaseType.ToString(); } }
        }
 

An unhandled exception occurred while processing the request.

Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)

• • Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)

  • Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.set_CurrentValueAsString(string value)

  • Telerik.Blazor.Components.TelerikDropDownListBase<TItem, TValue>.OnParametersSet()

  • Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()

  • Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task)

  • Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewComponentFrame(ref DiffContext diffContext, int frameIndex)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InitializeNewSubtree(ref DiffContext diffContext, int frameIndex)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.InsertNewFrame(ref DiffContext diffContext, int newFrameIndex)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange(ref DiffContext diffContext, int oldStartIndex, int oldEndIndexExcl, int newStartIndex, int newEndIndexExcl)

  • Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff(Renderer renderer, RenderBatchBuilder batchBuilder, int componentId, ArrayRange<RenderTreeFrame> oldTree, ArrayRange<RenderTreeFrame> newTree)

  • Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessPendingRender()

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToRenderQueue(int componentId, RenderFragment renderFragment)

  • Microsoft.AspNetCore.Components.ComponentBase.StateHasChanged()

  • Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()

  • Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.HandleException(Exception exception)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.AddToPendingTasks(Task task)

  • Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterView parameters)

  • Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(int componentId, ParameterView initialParameters)

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.CreateInitialRenderAsync(Type componentType, ParameterView initialParameters)

  • Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)

  • Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext+<>c__11<TResult>+<<InvokeAsync>b__11_0>d.MoveNext()

  • Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, object parameters)

  • Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)

  • Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, int i, int count)

  • ReleaseCalendar.Pages.Pages__Host.<ExecuteAsync>b__14_1() in _Host.cshtml

    +
    18.     <app><component type="typeof(App)" render-mode="ServerPrerendered" /></app>

  • Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperExecutionContext.SetOutputContentAsync()

  • ReleaseCalendar.Pages.Pages__Host.ExecuteAsync()

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, bool invokeViewStarts)

  • Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)

  • Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, string contentType, Nullable<int> statusCode)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|29_0<TFilter, TFilterAsync>(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext<TFilter, TFilterAsync>(ref State next, ref Scope scope, ref object state, ref bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, object state, bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(ref State next, ref Scope scope, ref object state, ref bool isCompleted)

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()

  • Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)

  • Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)

  • Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

Hi!

When i use combination of LINQ inside TelerikDropDownLists Data attribute and TelerikGrid 's GridEditMode.Popup mode, i get weird behavior when i try to select an item from TelerikDropDownLists - everything freezes. Please check the solution. Everything works fine if i don't use LINQ or GridEditMode.Popup mode.

Thank you!

I have two cascaded dropdownlists, in attached example car brands and selectable colors. The dependent dropdown has defaulttext option. After the parent dropdown has changed, in its event handler I reload the dependent data source and set a new valid value. If the data source does not contain the previous (!) value, the dropdownlist calls the valuechanged callback with default value. In next round when dependent dropdown holds the default value, after reloading datasource it works as expected. And parent changes again, if the updated datasource does not contain the previous dependent value the dropdownlist sets its value to default.

When I do not pass defaulttext parameter, the dependent dropdown selects the first element from the updated datasource. In my case it is not acceptable because I want to set a specific value (in this example the default color), not the first and not the default.

This feedback drives me to try setting value to default and wait for re-render the descendant dropdownlist before set the wanted value. 

Is there any way to avoid this behaviour of the dropdownlist?

<TelerikDropDownList TItem="Brand"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@BrandList"
			 Value="@Data.BrandId"
			 ValueChanged=@OnBrandChanged />

<TelerikDropDownList TItem="Color"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@FilteredColorList"
			 Value="@Data.ColorId"
			 ValueChanged="@OnColorChanged"
			 DefaultText="select color ..." />

async Task OnBrandChanged(int brandId)
{
	Data.ColorId = default;
	await Task.Delay(5);
	Data.BrandId = brandId;
	Data.ColorId = GetDefaultColor(brandId);
	FilteredColorList = GetFilteredColorList(brandId);
}

The drop down list component does not allow the user to associate a label with the underlying html select input control, which goes against accessibility standards. It appears that most, if not all, of the other components follow the accessibility standards. Please fix the drop down list and/or allow attribute splatting so that developers can apply their own attributes (like aria-label) to meet accessibility standards.

Hello,

If I scroll the page down and open a filterable DropDownList, the page will scroll up.

Here is a REPL test page

UI for Blazor 2.30 works as expected. This broke in version 3.0.0. The issue exists only in WebAssembly apps.

The DropDownList remains open after tabbing and does not fire. It also won't fire OnBlur and OnChange in this case. The problem occurs only if the component was opened by clicking exactly on its arrow.

Here is a test page: https://blazorrepl.telerik.com/cxEfFVPq042owTt616

The workaround is to wrap the component in a <span> that handles @onfocusout and closes the component programmatically: https://blazorrepl.telerik.com/cnafPCYL21aT3fpD05

Using DropDownList with Filter enabled will lost track of Focus when an item from dropdown is selected or tabbing away from filter input.

Steps to reproduce:

1. Open a DropDownList with filter enabled
2. Press TAB

Expected Behavior:

Focus in the next focusable element

Actual Behavior:

Focus is lost, and will go to the browser buttons

It is possible to reproduce in the demos:

https://demos.telerik.com/blazor-ui/dropdownlist/filtering

Hello,

i am trying to add a Clear Button inside the DropDownList-Component.

I tried to follow the instructions provided here: How do I add a Clear button to a DropDownList? in UI for Blazor | Telerik Forums respectiveley here: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

But unfortunateley, the button is never inside the component. It's always next to it or under the component.

In your example provided above, the button is inside the component.

I would love to have any solution for this one. A clear button is needed quite often.

I also have attached our custom component, where we use the Telerik DropDownList Component.

Thank you

Bug report

Reproduction of the problem

(bug report only)
The DropDownList (and other dropdown components - ComboBox, MultiColumnComboBox, etc.) render a redundant attribute in their popup ul element: aria-live="polite". Listboxes that use aria-activedescendant for tracking should not also announce via a live region — this creates duplicate/conflicting announcements by screen readers.

Current behavior

(optional)
The popup’s ul element renders aria-live=”polite”.

Expected/desired behavior

Either render aria-live=”off” (e.g., Kendo Angular DropDownList), or don’t render the aria-live attribute at all.

Environment

• Kendo/Telerik version:
• jQuery version: x.y
• Browser: [all]