Hello everyone,

We have opened this Feature Request to gather your insights on the addition of disabled items for the DropDownList.

For the time being, you can make items look disabled via DropDownListItemTemplate. Also, prevent clicks with @onclick and use the ValueChanged event to skip disabled items during keyboard navigation.

UPDATE: The associated built-in feature is the OnItemRender event, which can help style specific items without a template.

<TelerikDropDownList Data="@Products"
                     TItem="@Product"                     
                     TValue="@(int?)"
                     Value="@SelectedProductId"
                     ValueField="@nameof(Product.Id)"
                     TextField="@nameof(Product.Name)"
                     DefaultText="Select Product..."
                     ValueChanged="@( (int? newValue) => SelectedProductChanged(newValue) )"
                     Width="200px">
    <DropDownListSettings>
        <DropDownListPopupSettings Class="disabled-items" />
    </DropDownListSettings>
    <ItemTemplate>
        @{ var p = context as Product; }
        <div class="item-div @( !p.Active ? "disabled" : "" )"
             @onclick:preventDefault="@(!p.Active)"
             @onclick:stopPropagation="@(!p.Active)">
            @p.Name
        </div>
    </ItemTemplate>
</TelerikDropDownList>

<style>
    /* remove default item padding to prevent selection outside the template div */
    .disabled-items .k-list-item {
        padding: 0;
    }
    /* add back inner padding */
    .disabled-items .item-div {
        padding: 4px 8px;
    }
    /* style disabled items */
    .disabled-items .disabled {
        cursor: not-allowed;
        width: 100%;
        color: #ccc;
    }
</style>

@code {
    private List<Product> Products { get; set; }

    private int? SelectedProductId { get; set; }

    private async Task SelectedProductChanged(int? newValue)
    {
        var newProduct = Products.FirstOrDefault(x => x.Id == newValue);

        if (newProduct?.Active == true || !newValue.HasValue)
        {
            // select only active items or DefaultText
            SelectedProductId = newValue;
        }
        else
        {
            // skip disabled items during keyboard navigation
            var oldProductIndex = Products.FindIndex(x => x.Id == SelectedProductId);
            var newProductIndex = Products.FindIndex(x => x.Id == newValue);

            if (newProductIndex > oldProductIndex)
            {
                // skip forward
                SelectedProductId = Products[++newProductIndex].Id;
            }
            else
            {
                // skip backward
                SelectedProductId = Products[--newProductIndex].Id;
            }
        }
    }

    protected override void OnInitialized()
    {
        Products = new List<Product>();

        for (int i = 1; i <= 7; i++)
        {
            var active = i % 3 != 0;

            Products.Add(new Product()
            {
                Id = i,
                Name = (active ? "" : "Disabled ") + "Product " + i,
                Active = active
            });
        }

        base.OnInitialized();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool Active { get; set; }
    }
}

Clicking on the <label> opens the dropdown, but clicking on its main element does not

Selected value: @selectedValue
<br />
<label>some label for the dropdown, open it and test whether clicking outside closes it
    <TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue">
    </TelerikDropDownList>
</label>

@code {
    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; } = 3; //usually the current value should come from the model data
}

Before, the Value from the first item in the Data was populated through @bind-Value to the view model. It no longer is.

In the following snippet, I expect to see "1" in the initial load of the page, but I see "0" - the default value for the integer.

@selectedValue

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue">
</TelerikDropDownList>

@code {
    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; }
}

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!

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)

As stated in the documentation the Event OnChange for DropDownList is shown by intellisense but should not be used. However, in some situations it would be very useful to bind the value of the DropDownList and additionally have an event when the value changes, e.g. show additional inputs when a value is selected.

Currently it is either possible to have data binding to value by @bind-Value or listen for the changed event by using Value and ValueChanged.

Is it possible to drop dropDownList from outside, for example after its data has been changed, without clicking on it ?

ADMIN EDIT:

This feature is also applicable to ComboBox, AutoComplete, Multiselect, Date and Time Pickers components.

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

Hi,

Is it possible to implement search/look-ahead in the current version of the DropDown component? If not, will you be adding this feature soon?

Thank you.

Ben

When bound to a nullable GUID, the DropDownList invokes validation and shows validation messages as soon as the view loads.

Expected: the same behavior as with nullable int - validation is to be triggered by the form submission or selection from the dropdown.

Worked as expected in 1.2.0.

Reproducible:

This will allow the dropdown to be large enough to fit a reasonable number of items without a scrollbar. Alternatively, you could limit it through a pixel value you can set, or through the MaxPopupHeight property if it gets implemented: https://feedback.telerik.com/blazor/1412653-maxpopupheight.

Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.

But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.

My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.

Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.

***Admin Edit***

Released in 3.0.0 through PopupSettings tag: https://docs.telerik.com/blazor-ui/upgrade/breaking-changes/3-0-0#popup-settings

***Admin Edit***

When the Value you bind to the DropDownList is null (for example, because it is a model that is not filled in by the user yet, and you need to perform validation), the component throws a null reference exception.

This does not happen for a nullable integer (example here)

Posting this feature request as per your suggestion in my original forum post at: https://www.telerik.com/forums/data-source-using-scalar-list

I would like the DropDownList component to support lists of scalar values as data source. I.e:

<TelerikDropDownList Data="@MyList" bind-Value=@MyItem>

</TelerikDropDownList>
 
@functions {
    protected List<string> MyList = new List<string>() { "a", "b", "c" };
 
    protected string MyItem { get; set; } = "b";
}

The DropDownList would infer the scalar type from the Data property. The TextField items shown in the list (and the associated ValueField) would be the same: i.e. the value of each scalar in the list.