Unplanned
Last Updated: 30 Jun 2022 01:30 by Chris
Chris
Created on: 10 Jun 2022 07:42
Category: ComboBox
Type: Feature Request
5
[All dropdowns]: Add an event that fires only when the user selects an item from the dropdown

I would like to use an event that fires only when the user clicks on an item from the dropdown. 

=====

ADMIT EDIT:

Here is a possible way to achieve this now:

<TelerikComboBox @bind-Value=@SelectedValue
                 Data="@ComboBoxData"
                 ValueField="ProductId"
                 TextField="ProductName">
    <ItemTemplate>
        @{
            var currentItem = context as Product;

            <div onclick="@(() => OnClickHandler(currentItem))" style="width:100%">
                @currentItem.ProductName
            </div>
        }
    </ItemTemplate>
</TelerikComboBox>

@code {
    private void OnClickHandler(Product item)
    {
        //the application logic here
    }

    public IEnumerable<Product> ComboBoxData { get; set; }
    public int SelectedValue { get; set; } = 2;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 1; i < 10; i++)
        {
            products.Add(new Product()
                {
                    ProductId = i,
                    ProductName = $"Product {i}",
                    UnitPrice = (decimal)(i * 3.14)
                });
        }

        ComboBoxData = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

Duplicated Items
6 comments
Chris
Posted on: 30 Jun 2022 01:30
Thanks dimo! The solutions provided will work for now! Appreciate your help and hopefully this enhancement will be picked up soon. thanks again
ADMIN
Dimo
Posted on: 28 Jun 2022 12:06

Hi Chris,

OK, I will leave this item open for future consideration. In the meantime, here is another way to achieve the same behavior (direct textbox filtering + explicit confirmation) - use a MultiSelect and restrict it to single selection:

<TelerikMultiSelect Data="@MultiSelectData"
                    Value="@MultiSelectValues"
                    TItem="@MultiSelectModel"
                    TValue="@int"
                    ValueChanged="@((List<int> newValues) => OnMultiValueChanged(newValues))"
                    TextField="@nameof(MultiSelectModel.Text)"
                    ValueField="@nameof(MultiSelectModel.Id)"
                    Width="200px" />

@code{
    List<int> MultiSelectValues { get; set; }
    List<MultiSelectModel> MultiSelectData { get; set; }

    async Task OnMultiValueChanged(List<int> newValues)
    {
        if (newValues.Any())
        {
            MultiSelectValues = new List<int>() { newValues.LastOrDefault() };
        }
        else
        {
            MultiSelectValues = new List<int>();
        }
    }

    protected override void OnInitialized()
    {
        MultiSelectData = new List<MultiSelectModel>();

        for (int i = 1; i <= 7; i++)
        {
            MultiSelectData.Add(new MultiSelectModel()
            {
                Id = i,
                Text = "Item " + i
            });
        }

        base.OnInitialized();
    }

    public class MultiSelectModel
    {
        public int Id { get; set; }
        public string Text { get; set; }
    }
}

Regards,
Dimo
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.

Chris
Posted on: 22 Jun 2022 03:58

Dear Dimo,

I'm afraid it doesn't. The dropdown list does work as part of the intended solution, however we would like to expose the search bar without clicking on the dropdown list.

It should work like google search, whereby suggestion will be shown whilst the user is typing the query, then user can proceed to select the search they want and then trigger a call to search that particular suggested search text.

The combobox search is exactly what we need, just need to have an extra event (OnItemSelected) that only triggers when user select / enter on desired result.

Warm Regards,

Chris

ADMIN
Dimo
Posted on: 15 Jun 2022 10:28

Hi Chris,

Thanks for the clarification.

So this looks like a UX task.

Is the filterable DropDownList component suitable for this scenario? Even if you type (part of) the value in the textbox, you still need to hit Enter or select an item. This should qualify as an explicit confirmation from the user.

Regards,
Dimo
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.

Chris
Posted on: 15 Jun 2022 02:25

Hi Dimo,

I'm currently developing a trading application.

I've created a symbol search component that consist of combobox searching through list of symbols from backend system.

I would like to ensure the user explicitly confirm it's selection before firing the event out to other components (e.g. watchlist) that will add the new symbol to the watchlist.

I want to avoid possibility of firing the event when the user tab away or focuses on other element/component which might cause confusion for user.

Hope this clarifies the requirement!

Thanks,

Chris

ADMIN
Dimo
Posted on: 14 Jun 2022 11:46

Hello Chris,

This thread is directly focused on the requested end result, but we want to understand your scenario better. This will help us decide what is the best way to approach the task.

Can you explain what is your scenario and what problem are you trying to solve? Why do you need to distinguish dropdown item clicks from other ways to select an item?

Regards,
Dimo
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.