Unplanned
Last Updated: 27 Nov 2024 11:43 by Ed
Created by: Ed
Comments: 0
Category: MultiSelect
Type: Feature Request
3

The MultiSelect displays initially selected items in the order in which the items occur in the data source. For example:

  • The MultiSelect contains items 1, 2, 3, 4, 5.
  • The user selects 4, 1, 3 in this order.
  • The next time the user visits the MultiSelect page, the component will show 1, 3, 4 as selected.

In some scenarios it's important to preserve the original order of the selected items, so that it matches the users' personal preferences, perceived item importance or simply the selection history.

In the meantime, a possible workaround is to reorder the data source items, which are initially selected:

https://blazorrepl.telerik.com/GIblPeuN077ScRTt53

Unplanned
Last Updated: 20 Nov 2024 14:49 by Tim
When the multiselect is partially hidden by a scrollbar and you try to remove an item from the top, it will move the focus to the bottom of the control and open the dropdown, but it will not remove the item that you just tried to remove. 
Completed
Last Updated: 14 Nov 2024 09:29 by ADMIN
Release 7.0.0

The OnBlur event does not fire after removing an item wehn using TagMode="@MultiSelectTagMode.Single"

I used this snippet in the Blazor REPL to reproduce the issue:


<p>@OnBlurMessage</p>
<TelerikMultiSelect Data="@Countries"
                    @bind-Value="@SelectedCountries"
                    TagMode="@MultiSelectTagMode.Single"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" 
                    ClearButton="true"
                    AutoClose="false"
                    OnBlur="OnBlurHandler">
</TelerikMultiSelect>

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

    private List<string> SelectedCountries { get; set; } = new List<string>();
    string OnBlurMessage {get; set;} = "";
    int i;

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

    void OnBlurHandler()
    {
        OnBlurMessage = $"OnBlurHandler touched {++i} times";
    }
}

Steps to reproduce:

  1. Select an item from the list then click out of the control.  Note that the comments shows "OnBlurHandler touched 1 times".
  2. Click the x for the "1 item(s) selected" tag then click outside of the control.  Note that the comment still shows "OnBlurHander touched 1 times".
  3. Click into the control then outside of control.  Note that the comment is updated to show "OnBlurHandler touched 2 times".

The OnBlur event should fire after step 2.

Attached is a short video clip of what I see.

Completed
Last Updated: 14 Nov 2024 09:27 by ADMIN
Release 7.0.0

By design, the filter should be cleared when the user blurs the component. The filter is currently persisted and this is not correct.

Reproducible in the filtering demo.

Completed
Last Updated: 14 Nov 2024 09:25 by ADMIN
Release 7.0.0

When @bind-Value is used, the tags are ordered in the way the user chose them, which is the expected behavior.

When you don't use two-way binding, but alter the Value in the ValueChanged event (to implement some logic), the tags get reordered according to the their occurrence in the data source.

I would expect that they remain the user order in all cases.

Unplanned
Last Updated: 02 Sep 2024 14:44 by ADMIN
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).
Duplicated
Last Updated: 06 Aug 2024 14:18 by ADMIN

We are happy with PersistFilterOnSelect, now the filter is more useful for a multi selection.

It is not wanted that the filter text is still there if the selection list is closed!! Please allow clearing the filter value upon closing.

===

ADMIN EDIT

===

The only possible way to currently clear the filter is to force the component re-render upon closing.

Here is an example: https://blazorrepl.telerik.com/GeusuFbQ4971bi9S29.

Unplanned
Last Updated: 02 Jul 2024 05:51 by ADMIN
Created by: Naveed
Comments: 6
Category: MultiSelect
Type: Feature Request
65

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

---

Declined
Last Updated: 21 Jun 2024 06:17 by ADMIN

The https://feedback.telerik.com/blazor/1517344-filter-text-is-cleared-when-you-select-an-item ticket fixed a good usability issue with multiselect. Unfortunately, it creates a bug I ran into while starting to update my applications MultiSelects.

If you have PersistFilterOnSelect=true property set, but not AutoClose=false what happens is the user types '2' to filter the selection, selects something with the mouse and the drop down closes, but the filter doesn't clear so when next trying to select an item the old filter is still there, although it's not showing. The only way to clear the ghost filter seems to be to start typing a new thing to filter on and then backspace that which finally removes the ghost.

The docs kind of mention this with "To keep the filter upon selection, set the PersistFilterOnSelect parameter to true. It only applies when Filterable="true" and AutoClose="false"" but the ghost filter staying is clearly a bug. You can test this behaviour with a repl I made. Click the multiselect active, type for.ex. '2' and select an item with the mouse, the item is selected, the dropdown closed and the filter vanishes. Now click the multiselect again, the dropdown is already filtered as if '2' had been pressed, but it's not visible and can't be cleared without typing a new filter

Below is a screenshot where I typed 22 as the filter, selected Item 22 and then clicked the MultiSelect again

Completed
Last Updated: 15 May 2024 10:59 by Philipp
Release 2024 Q2 (May)
Created by: Oscar
Comments: 11
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.
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.

Completed
Last Updated: 14 Mar 2024 09:24 by ADMIN
Release 2024 Q2 (May)

I have set a small size to the MultiSelect. I noticed that the Summary Tag that contains the "1 more selected" text does not change - its size always remains the same regardless of the component size.

Reproduction: https://blazorrepl.telerik.com/cxFvPxvh58SMoekS04.

The Roundness setting of the MultiSelect also does not affect the summary tag.

 

Unplanned
Last Updated: 26 Jan 2024 12:19 by Paul
When I click on the CheckBox's label, "Select All," the dropdown closes. While if I click the TelerikCheckBox itself, it remains open.
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: 10 Nov 2023 14:48 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
If the Multiselect has items selected and is not focused, clearing one item does not focus the component while clearing all items does. Deselecting single item should focus the component as well.
Completed
Last Updated: 14 Sep 2023 15:29 by ADMIN

When AutoClose is set to false and you select more than one item, then only the first one will be highlighted in the popup. Items are selected and present in the input but are visually highlighted.

Reproduction 

1. Run this REPL sample
2. Select more than one item from the drop-down
3. Only the first selected item is highlighted as such
4. Video example

Current

Not all selected items are highlighted, which does not match the Input.

Expected

All selected items in the drop-down should be highlighted. 
Completed
Last Updated: 14 Sep 2023 15:26 by ADMIN
Release 4.6.0 (11 Oct 2023) (R3 2023)
Created by: Kevin
Comments: 0
Category: MultiSelect
Type: Bug Report
4
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: 18 Apr 2023 13:50 by ADMIN
Release 4.2.0 (04/26/2023)

I have a requirement to be able to select multiple values. I have filtering enabled, but I only want the user to be able to select valid values and not enter custom data. My approach would be to clear any invalid data when the control loses focus. I want the MultiSelect input to be cleared when it looses focus (similar to the ComboBox behavior).

 

=========================

ADMIN EDIT

=========================

In the meantime, such behavior could be achieved with a JavaScript function called through the JS Interop.

 

@inject IJSRuntime JsInterop

<TelerikMultiSelect Filterable="true" Data="@Countries"
                    @bind-Value="@Values"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true" 
                    AutoClose="false" OnBlur="@OnBlurHandler">
</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>();

    async Task OnBlurHandler()
    {
        await JsInterop.InvokeVoidAsync("clearMultiselectInput");
    }

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

 

 

You can include the following script tag in your index page or place the function in a separate JavaScript file in your project. This function will clear all instances of the Multiselect inputs, so you don't have to specify separate selectors for each of them. If you only want to work with one instance, you can use another approach.

 

<script>
        function clearMultiselectInput() {
            var inputs = document.querySelectorAll(".k-multiselect .k-input-values input");
            inputs.forEach(e => e.value = "")                     
        }
</script>

 

 

1 2 3