Unplanned
Last Updated: 13 Nov 2023 18:01 by Michael

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.

 

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.
Planned
Last Updated: 19 Oct 2023 12:30 by ADMIN
Scheduled for 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>

---

Unplanned
Last Updated: 04 Oct 2023 08:39 by ADMIN
Created by: Naveed
Comments: 6
Category: MultiSelect
Type: Feature Request
51

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


Unplanned
Last Updated: 14 Aug 2023 08:22 by ADMIN
Created by: Oscar
Comments: 7
Category: MultiSelect
Type: Feature Request
8
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.
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>

 

 

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
27

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.

Unplanned
Last Updated: 01 Feb 2023 13:17 by Kalpeshkumar
Our issue is when we are using OnRead for fetching data based on the entered text, the keyboard navigation is not working. The scroll mode is virtual. The volume of data will be large.
Unplanned
Last Updated: 26 Dec 2022 15:04 by Hiren

Testing this Select All Checkbox sample in Safari produces a different result compared to other browsers.

Click on the CheckBox in the MultiSelect Header Template closes the popup in Safari. In other browsers (e.g. Chrome, Firefox) the popup remains open after checking the SelectAll CheckBox.

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: 16 Nov 2022 14:03 by Meindert
Created by: Meindert
Comments: 0
Category: MultiSelect
Type: Feature Request
3

Please add group header template for the MultiSelect. There are two goals:

  • Customize the group items' appearance.
  • Implement custom behaviors, for example - batch select or unselect of all items in the group by clicking on the group header.
Unplanned
Last Updated: 04 Nov 2022 06:02 by Neil
Created by: Patrik Madliak
Comments: 2
Category: MultiSelect
Type: Bug Report
1

Description

In Firefox, there are occasions in which multiple items remain focused (k-focus class is not removed from the blurred item)

Reproduction (if bug)

  1. Create a multiselect and set AutoClose="false".
  2. Open the component and select a few items.
  3. Close the component.
  4. Open the component and select a new item.
  5. Two items have the k-focus class.

Second related case:

  1. Create a multiselect and set AutoClose="false".
  2. Open the component and navigate up and down with the keyboard arrows.
  3. Select an item.
  4. The last focused item with the arrows is focused as well as the newly selected item.

REPL for reproduction

Expected (if bug)

Only one item should have the k-focus class at a time.

Browser (if bug)

Firefox

Broken Telerik UI for Blazor version (if bug)

3.5.0

Completed
Last Updated: 23 Sep 2022 09:06 by ADMIN
Release 3.6.1 (26 Sep 2022)

To reproduce:

  • Use the Local Data code snippet
  • Open the popup
  • Scroll down
  • Close the popup
  • Open the popup again
  • Blank space will be rendered above the visible 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).
Completed
Last Updated: 02 Jun 2022 13:07 by ADMIN
Release 3.4.0
The MultiSelect does not update its tags when selecting items with the keyboard when the component is housed in the ContextMenu
Unplanned
Last Updated: 02 Mar 2022 15:43 by ADMIN

The following, took a bit of effort to identify where the behaviour was failing for a screen reader.

 

for all scenarios below the multi-select component currently has items (more than one) in it as selected.

 

GOOD

if keyboard focus is on text edit, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab keys) all selected items are read out correctly

 

BAD

if keyboard focus is on selected item, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab key) the focused (selected) item is not read out correctly.

(sorry example read out not provided)


GOOD

selected items are read out correctly when;

  • closing items panel w/ escape key,
  • closing items panel when selecting an item

 

BAD

delete item;

  • remove all selected items w/ escape key does not inform a screen reader user of the outcome; that no item is now selected (should state something).
  • removing last item with backspace does not inform screen reader of the outcome; that no item is now selected (should state something). I swear this worked once with firefox.

the following behaviour also occurs after removing all items via a keyboard, the keyboard focus becomes lost;

  • (BAD) most times u can't press a right / down key into the text section of the multi-select (experienced w/ firefox too)
  • (GOOD) most times can press alt+down to bring the panel (experienced w/ firefox too)
  • (GOOD) u can still tab out to next clickable object
1 2