Unplanned
Last Updated: 04 Oct 2021 07:04 by Dorian
Created by: Daniel
Comments: 3
Category: MultiSelect
Type: Feature Request
3

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

Declined
Last Updated: 30 Sep 2021 09:20 by ADMIN

When user is inside list of selected options/items, navigating amongst the items with keyboard left/right keys, it states "item # of # of items of level 1". 
what is "of level 1"? (is items selected in level 1 and level 2 is the text editable section?)

i am expecting the screen reader to state item "<value/label/title>" when i set focus to an item via keyboard left or right.

The issue did not occur in firefox. Sorry, i have not provided the firefox readout w/ the screen reader for comparison.

 

however, for the most likely user scenario the behaviour with the screen reader is correct.

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

 

tested in Chrome and firefox using NVDA.

 

 

 

Under Review
Last Updated: 29 Sep 2021 15:48 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
Duplicated
Last Updated: 29 Sep 2021 05:47 by ADMIN

Hi team,

I just upgraded Blazor version to 2.25 and the primary button in FooterTemplate of MultiSelect started behaving differently. This was shown correctly prior to update. Also, normal button where Primary="true" is shown with correct styling.

I have written a little code snippet to demonstrate.


            <div class="row">
                <div class="col-2">
                    <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                                   Icon="k-icon k-i-add"
                                   Primary="true">
                        New Value
                    </TelerikButton>
                </div>

                <div class="col-10">
                    <TelerikMultiSelect Data="@(
                                            new List<SelectListItem>()
                                            {
                                                { new SelectListItem { Text = "Text 1", Value = "Value1" } },
                                                { new SelectListItem { Text = "Text 2", Value = "Value2" } },
                                                { new SelectListItem { Text = "Text 3", Value = "Value3" } },
                                                { new SelectListItem { Text = "Text 4", Value = "Value4" } }
                                            })"
                                        FilterOperator="StringFilterOperator.Contains"
                                        Filterable="true"
                                        TItem="SelectListItem"
                                        TValue="string"
                                        TextField="Text"
                                        ValueField="Value">
                        <FooterTemplate>
                            <TelerikButton ButtonType="Telerik.Blazor.ButtonType.Button"
                                           Icon="k-icon k-i-add"
                                           Primary="true">
                                New Value
                            </TelerikButton>
                        </FooterTemplate>
                    </TelerikMultiSelect>
                </div>
            </div>

 

As it can be seen the the code for button is exactly same in both places but the output is different.

Please have a look into this.

Many thanks,

 

 

Unplanned
Last Updated: 22 Sep 2021 14:08 by ADMIN
Created by: Johan
Comments: 1
Category: MultiSelect
Type: Feature Request
2

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: 17 Sep 2021 15:46 by ADMIN

When re-visiting the input when it has options selected as badges, using keyboard;

Completed
Last Updated: 17 Sep 2021 15:46 by ADMIN

First visit of options in drop down, using keyboard:

  • each option is read as 'blank' in screen reader
  • number of options not read out

Declined
Last Updated: 17 Aug 2021 16:39 by ADMIN
Created by: Matt
Comments: 4
Category: MultiSelect
Type: Bug Report
0
On focus via keyboard all options are not available. User has to type a char, filters options. User has to hit alt+down, spacebar or enter key would be a better approach to trigger all options (but all options should be listed by default on focus).
Unplanned
Last Updated: 27 Jul 2021 15:45 by ADMIN
Created by: Kevin
Comments: 0
Category: MultiSelect
Type: Feature Request
4

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: 09 Jul 2021 10:28 by ADMIN
Created by: Ankit
Comments: 1
Category: MultiSelect
Type: Feature Request
11

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:

 

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

 

 

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-multiselect-wrap) 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 .k-multiselect-wrap.k-floatwrap {
        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();
    }
}


Need More Info
Last Updated: 25 May 2021 12:27 by ADMIN

 

Hi,

When displaying a MultiSelect control on a TelerikWindow (modal), the dropdown of items is displayed behind the dialog:

 

How can I change the Z-Index of the dropdown?

Unplanned
Last Updated: 28 Apr 2021 08:40 by ADMIN
Created by: Oscar
Comments: 0
Category: MultiSelect
Type: Bug Report
2
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: 17 Mar 2021 11:03 by ADMIN
Created by: Adam
Comments: 0
Category: MultiSelect
Type: Feature Request
1

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".

---

Unplanned
Last Updated: 15 Mar 2021 13:20 by Endy
Created by: Naveed
Comments: 2
Category: MultiSelect
Type: Feature Request
20

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

---

Unplanned
Last Updated: 12 Mar 2021 10:38 by ADMIN

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-wrap .k-searchbar input");
            inputs.forEach(e => e.value = "")                     
        }
</script>

 

 

Completed
Last Updated: 02 Mar 2021 13:01 by ADMIN
Release 2.23.0

At the moment, the OnChange even fires when:

  • the user selects an item from the dropdown
  • the user blurs the input
  • the user presses enter in the input

The problem with the multiselect is that we have two extra actions:

  • remove an already selected item from its own [x] button - OnChange does not fire even though the value changes
  • clear all items with the ClearAll button - OnChange does not fire even though the value changes
  • delete items with the backspace key

 

Completed
Last Updated: 04 Dec 2020 16:32 by ADMIN
Release 2.21.0
If the AutoClose parameter is set to false and the selected items span across multiple lines the popup does not update its position accordingly.
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.

1 2