Completed
Last Updated: 11 Sep 2022 11:13 by ADMIN
Release 3.6.0 (14 Sep 2022) (R3 2022)
Svetoslav
Created on: 01 Jul 2020 08:15
Category: DropDownList
Type: Feature Request
23
Add support for disabled items

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; }
    }
}

 

4 comments
ADMIN
Marin Bratanov
Posted on: 29 Mar 2022 19:19

Hi Andy,

 

I recommend you open a private support ticket where we can discuss your options and feedback.

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Andrew
Posted on: 28 Mar 2022 16:47

Hi Marin,

I appreciate that, here's the rub from my perspective. I've recommended to a client that we go with Blazor and we stick with Telerik as you say it's had three years of investment.

Yet things like ghosting tool tips and this makes for a very poor user experience, and some things cannot be worked around easily (already had to find workarounds for other issues).

My ask is that these things are prioritised over and above adding new features, great that there are 100 components but not if the basics are missing. More than happy to have a conversation with a product manager about this. Reality is that if these things don't get addressed there are more and more components in the open source community that will meet these needs.

Best,

Andy

ADMIN
Marin Bratanov
Posted on: 28 Mar 2022 16:36

Hi Andrew,

The UI for Blazor suite is a brand new set of native components we are building from the ground up to target the Blazor framework specifically. Thus, since they are not wrappers over jQuery widgets, implementing all the features you have seen in older suites will take some time - even though we are working very actively. In about 3 years we are already at about 100 components that cover the core scenarios as well as some of the advanced ones. At the same time, suites like WebForms or jQuery are >10 years old, so it will be natural that they have a head start.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Andrew
Posted on: 27 Mar 2022 12:28
Sure this functionality is available in Razor Pages - so am wondering why it's not implemented. Is there a reason why the basics are being overlooked?