Unplanned
Last Updated: 22 Mar 2024 10:38 by n/a

The dropdown (select) components such as ComboBox, MultiSelect etc. have a built-in loading indicator that includes several Skeleton instances.

I want to be able to remove that and add my custom loading indicator in the popup. Ideally, it would be a template so we could have some flexibility.

===

ADMIN EDIT

===

This request targets all the select components (AutoComplete, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect).

The DropDownList currently does not have a built-in loader but that will be added as well as a prerequisite for the current feature. See Add a loading indicator in the popup.

Planned
Last Updated: 19 Mar 2024 13:22 by ADMIN
Scheduled for 2024 Q2 (May)
Created by: Oscar
Comments: 10
Category: MultiSelect
Type: Feature Request
12
I would like to avoid that the component cleans the filter user input when an item is clicked and auto-close is set to false.

So, imagine I want to select every item which contains letter 'S'. I type 'S' then when I click on the first item containing 'S', the 'S' in the input is removed and all the items are shown. So I need to type S again and again 1 time for each Item I want to select.

I attach a gif showing the behavior.
Planned
Last Updated: 14 Feb 2024 06:51 by ADMIN
Scheduled for 2024 Q2 (May)
Created by: Naveed
Comments: 6
Category: MultiSelect
Type: Feature Request
55

Like https://docs.telerik.com/blazor-ui/components/combobox/custom-value and https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values/ so the user can input tags on their own without them being in the app data source.

---

ADMIN EDIT

The following sample may be useful in implementing this in the meantime: https://github.com/telerik/blazor-ui/tree/master/multiselect/add-new-item

---

Completed
Last Updated: 22 Jan 2024 16:06 by ADMIN
Release 5.1.0 (31 Jan 2024) (R1 2024)
Created by: Adam
Comments: 4
Category: MultiSelect
Type: Feature Request
60

I'm seeing a scroll bar appear then disappear as I type. Repeatedly typing "a" in the box will show/hide the scroll bar. Also typing "a" then backspace has the same behavior.

<TelerikMultiSelect Filterable="true" Data="@Countries"
                    @bind-Value="@Values"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true"
                    AutoClose="false">
</TelerikMultiSelect>


@if (Values.Count > 0)
{
    <ul>
        @foreach (var item in Values)
        {
            <li>@item</li>
        }
    </ul>
}

@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();   

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");      

        base.OnInitialized();
    }
}

 

---

ADMIN EDIT:

Currently, the component works the following way:

  1. User starts typing in the input of the component.
  2. Popup of the MultiSelect opens.
  3. Skeleton is shown:
  4.  Data processing starts.
  5. After the data is processed, the skeleton is replaced with the actual data.

The scrollbar is shown by the skeleton and is always present (visible on step 3). The tricky part is that If the user is typing very fast, the Blazor framework bundles 2 renderings together and thus the scrollbar is not visible. The result is that the user sees a very brief flicker with the skeleton. Adding a small delay before showing the skeleton on step 3 will prevent the user from seeing the skeleton and thus remove the impression of seeing a "flicker".

As a workaround, you can hide the skeleton with CSS. This is applicable for all "select" components

<TelerikMultiSelect>
    <MultiSelectSettings>
        <MultiSelectPopupSettings Class="no-skeleton"></MultiSelectPopupSettings>
    </MultiSelectSettings>
</TelerikMultiSelect>

<TelerikComboBox>
    <ComboBoxSettings>
        <ComboBoxPopupSettings Class="no-skeleton"></ComboBoxPopupSettings>
    </ComboBoxSettings>
</TelerikComboBox>

<style>
    .no-skeleton .k-skeleton {
        display: none;
    }
</style>

---

Completed
Last Updated: 25 Aug 2023 12:03 by ADMIN
Release 4.5.0 (08/30/2023) (R3 PI2)
Created by: Ankit
Comments: 2
Category: MultiSelect
Type: Feature Request
35

I would like to add a feature similar to the Tag Mode in the Kendo suite 

 

===========

ADMIN EDIT

===========

In the meantime, there are two possible workarounds:

1. Mimic the desired 'single' TagMode behavior and display the number of selected items inside the MultiSelect, instead of the selected items themselves.

This approach uses custom CSS, which hides the list of selected items and displays a dynamically updated count value. The most important bits are highlighted:

UI for Blazor 2.30

<TelerikMultiSelect Data="@Products" Class="single-tag-mode"
                    @bind-Value="@SelectedProductIDs"
                    ValueField="@nameof(Product.ProductID)"
                    TextField="@nameof(Product.ProductName)"
                    Placeholder="Select Products">
</TelerikMultiSelect>

<style>
    .single-tag-mode ul.k-reset {
        float: left;
    }

    .single-tag-mode ul.k-reset li.k-button {
        display: none;
    }

    .single-tag-mode ul.k-reset:before {
        content: "Selected items: @SelectedProductIDs.Count";
        display: inline-block;
        line-height: 1.8em;
        padding: 0 7px;
        vertical-align: bottom;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: #f5f5f5 linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
    }
</style>

@code {
    List<Product> Products = new();
    List<int> SelectedProductIDs = new();

    protected override async Task OnInitializedAsync()
    {
        for (int i = 1; i <= 10; i++)
        {
            Products.Add(new Product()
            {
                ProductID = i,
                ProductName = "ProductName " + i
            });
        }

        await base.OnInitializedAsync();
    }

    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
    }
}

 

UI for Blazor 3.0

 

<TelerikMultiSelect Data="@Products" Class="single-tag-mode"
                    @bind-Value="@SelectedProductIDs"
                    ValueField="@nameof(Product.ProductID)"
                    TextField="@nameof(Product.ProductName)"
                    Placeholder="Select Products">
</TelerikMultiSelect>

<style>
    .single-tag-mode .k-input-values {
        float: left;
    }

    .single-tag-mode .k-input-values .k-chip {
        display: none;
    }

    .single-tag-mode .k-input-values:before {
        content: "Selected items: @SelectedProductIDs.Count";
        display: inline-block;
        line-height: 1.8em;
        padding: 0 7px;
        vertical-align: bottom;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: #f5f5f5 linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
    }
</style>

@code {
    List<Product> Products = new();
    List<int> SelectedProductIDs = new();

    protected override async Task OnInitializedAsync()
    {
        for (int i = 1; i <= 10; i++)
        {
            Products.Add(new Product()
            {
                ProductID = i,
                ProductName = "ProductName " + i
            });
        }

        await base.OnInitializedAsync();
    }

    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
    }
}

 

 

2. Restrict the component's size and allow scrolling to see all selected items.

Use some custom CSS to set desired height of the container holding the selected items (.k-chip-list) and to control its overflow. You can use the Class parameter of the Multiselect to set your custom CSS class to the main wrapping container of the component and style a specific instance of the component, not all instances on the page/app.

In terms of controlling the container's height, you can:

  • Set fixed height : the container will have fixed height and if its content exceeds it, a scrollbar will appear.

  • Set max-height: when filled with content, the container will expand until it reaches its max height. Scrollbar will appear afterwards.
<style>
    .my-multiselect{
        overflow: auto;
        max-height: 60px;
    }
</style>

<TelerikMultiSelect Class="my-multiselect"
                    Data="@Countries"
                    @bind-Value="@Values"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true" AutoClose="false">
</TelerikMultiSelect>

@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");

        base.OnInitialized();
    }
}


Completed
Last Updated: 11 Aug 2023 12:57 by ADMIN
Release 4.5.0 (08/30/2023) (R3 PI2)
Created by: Daniel
Comments: 11
Category: MultiSelect
Type: Feature Request
34

In the MultiSelect Component you have Item, Footer, and Header Template sub components. I see no way of providing a template for the selected items. This would be a very nice feature to have. 

My specific use case it that I would like to add a tool tip to the selected tags. 

 

Thanks

Completed
Last Updated: 13 Mar 2023 13:53 by ADMIN
Release 4.1.0 (15/03/2023)
Created by: Kevin
Comments: 0
Category: MultiSelect
Type: Feature Request
29

I would like to have the ability to refresh the Multiselect Popup.

Currently, if the AutoClose="false" feature is applied and the items are programmatically selected, you cannot display them as selected while the Popup is opened. You need to close it first to accordingly update the selected items collection in it.

Duplicated
Last Updated: 05 Dec 2022 16:40 by ADMIN
Created by: Kasim
Comments: 1
Category: MultiSelect
Type: Feature Request
2

Telerik Multi Select to have optional top level header item with check box & title "Select All" [Localizable]. 

If all items are selected, the display box of the Multi-Select should show "All Selected" instead of list of selected items.

Unplanned
Last Updated: 13 Jul 2022 12:28 by Eugene
Created by: Eugene
Comments: 0
Category: MultiSelect
Type: Feature Request
2
My question is regarding MultiSelect. I would like to order the groups inside the MultiSelect as follows:

Category 2

- Item 1

- Item 2

Category 1

- Item 3

- Item 4

But the MultiSelect control seems to order the category name alphabetically (Category 1, Category 2, etc).
Unplanned
Last Updated: 22 Sep 2021 14:08 by ADMIN
Created by: Johan
Comments: 1
Category: MultiSelect
Type: Feature Request
24

Hi,

I would like checkbox support including the check all checkbox on the multiselect component like: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support

The url below shows how to create custom checkboxes in the multiselect component but adding a check all checkbox in the headertemplate does not update the multiselect popup

https://docs.telerik.com/blazor-ui/knowledge-base/multiselect-checkbox-in-dropdown?_ga=2.50111909.206897922.1631541466-694624900.1630583797&_gac=1.246637872.1631604077.EAIaIQobChMI8PnX6Pb98gIVkwCLCh381AjMEAAYASAAEgLROPD_BwE

Declined
Last Updated: 17 Sep 2021 16:58 by ADMIN

In drop down panel colour indicates which option has been selected (is it the dark colour or is the light colour). Suggestion: having an icon of tick would assist.

 

As an alternative option - Blazor MultiSelect - Templates | Telerik UI for Blazor this would be great if you could template selected and non-selected items, but at the moment there is just the one item template.

Completed
Last Updated: 01 Oct 2020 14:09 by ADMIN
Release 2.18.0

Based on my testing and the online demos, each selection of an item in the dropdown for the Blazor MultiSelect closes the dropdown.

 

Is there a way to keep the dropdown open for the user to make multiple selections? The user could then click outside of the dropdown to close the dropdown.

 

The behavior I am describing is similar to the Kendo UI for jQuery MultiSelect "autoClose" configuration property.

https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/configuration/autoclose

Unplanned
Last Updated: 04 Aug 2020 18:18 by ADMIN

I have a custom ICollection which I wanted to use with the MultiSelect control, however, the Value property is of type List<T>. This is very restrictive; the property should implement an interface for flexibility.

ADMIN EDIT: When voting, please add your comment on what you would prefer so we can gauge the needs people have and act accordingly.

Completed
Last Updated: 11 Jun 2020 06:30 by ADMIN
Created by: IneqeDevTeam
Comments: 1
Category: MultiSelect
Type: Feature Request
1

Hi

Recently we were building a feature that allows the optional selection of multiple items, and decided to use the Telerik Multiselect component. A subcomponent of the feature reads from a file, and pre-selects items in the multiselect based on data in the file similarly to this sample:

foreach(string item in file)
{
    selectedItemsList.Add(item);
}

At the moment, however, it seems that the Telerik Multiselect does not refresh its state when selected items are added and removed programatically, only when they are added or removed via user interaction. Would it be possible to have the Telerik Multiselect support the usage of ObservableCollection?

Thanks in advance!

Michael