Hello, 
I have implemented searching, multiselect using telerik multiselect for multiple values. And relationship between multiselect is maintained between multiple multiselect. Also, i have used getter setter to set "All" option when there is no value selected. While Searching, i have implemented an api call and get the desired output.

Issue: Whenever I select a value from multiselect and search for other value and immediately remove the values using backspace, blank is shown in the respective multiselect. But when i click outside "All" is retained in the multiselect.

I have managed to retrieve the search text from MultiSelectReadEventArgs args using OnRead, as shown below:

"dynamic item = args.Request.Filters.FirstOrDefault();
var searchText = (string)item.Value; "

Expected Result : Whenever I select a value from multiselect and search for other value and immediately remove the selected values and text using backspace, "All" should be shown in the respective multiselect. But when i click outside "All" is retained in the multiselect. Is there anyway that I could achieve it?

Here is an example of Getter setter implementation as :

@page "/multiselect/overview"

<HobbiesTemplate>
    <TelerikMultiSelect Data="@Hobbies"
                        @bind-Value="@SelectedHobbyIds"
                        ValueField="@nameof(HobbiesDto.HobbyId)"
                        TextField="@nameof(HobbiesDto.HobbyName)"
                        Placeholder="Select your favourite sport..."
                        Id="products-multiselect" Width="100%">
    </TelerikMultiSelect>
</HobbiesTemplate>

@code {
    public List<int> SelectedHobbyIds { get{return SelectedHobbyIds;}
                        set {
                                // if nothing and 'All' option should be selected 
                                if (value.Count == 0 || (value.Any(x => x == 0) && !SelectedHobbyIds.Any(x => x == 0)))
                                {
                                    SelectedHobbyIds = new List<int>() { 0 };
                                }
                                else
                                {
                                    // if other option selected then remove 'All' option
                                    if (value.Count() > 1 && value.Any(x => x == 0))
                                    {
                                        SelectedHobbyIds = value.Where(x => x != 0).ToList();
                                    }
                                    else
                                    {
                                        SelectedHobbyIds = value;
                                    }
                                }
                            }

            }

    public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
    {
        new HobbiesDto(0,"All"),
        new HobbiesDto(1, "Basketball"),
        new HobbiesDto(2, "Golf"),
        new HobbiesDto(3, "Baseball"),
        new HobbiesDto(4, "Table Tennis"),
        new HobbiesDto(5, "Volleyball"),
        new HobbiesDto(6, "Football"),
        new HobbiesDto(7, "Boxing"),
        new HobbiesDto(8, "Badminton"),
        new HobbiesDto(9, "Cycling"),
        new HobbiesDto(10, "Gymnastics"),
        new HobbiesDto(11, "Swimming"),
        new HobbiesDto(12, "Wrestling"),
        new HobbiesDto(13, "Snooker"),
        new HobbiesDto(14, "Skiing"),
        new HobbiesDto(15, "Handball"),
    };

    public class HobbiesDto
    {
        public int HobbyId { get; set; }
        public string HobbyName { get; set; }

        public HobbiesDto() { }

        public HobbiesDto(int id, string name)
        {
            HobbyId = id;
            HobbyName = name;
        }
    }
}

this is my hobbiestemplate.razor page

<div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
    <div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
        <span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>

        <div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
            <span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
            <span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
        </div>

        <div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
            <div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
        </div>

    </div>

    <div class="main-container k-pb-8 k-d-flex k-flex-col">
        <div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
            <span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
            <h4 class="k-h4 k-opacity-20 k-font-bold">Hobbies</h4>
        </div>
        <span class="k-d-inline-block">Favourite sport</span>
        @ChildContent
        <span class="hint k-font-size-sm k-font-italic k-mt-1.5">Add your favourite sport, if it is not in the list.</span>

        <div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="k-skeleton k-opacity-30 k-rounded-md k-h-8"></span>
        </div>

        <div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
            <span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
            <span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-14"></span>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    }

Hello,

I am looking to incorporate search functionality, multiselect, and grouping in Telerik MultiSelect. Additionally, I need to make API calls for every character entered during searching. Although the OnRead parameter in TelerikMultiSelect seems to provide these arguments, I have encountered difficulty achieving grouping in Telerik MultiSelect using this parameter.

Is there a way to obtain the SearchText inside a function whenever the user is typing, allowing me to make API calls? Alternatively, can I utilize the OnRead parameter in TelerikMultiSelect to achieve grouping, searching, and multiselect simultaneously?

I have managed to retrieve the search text from MultiSelectReadEventArgs args using OnRead, as shown below:

"dynamic item = args.Request.Filters.FirstOrDefault();
var searchText = (string)item.Value; "

The code for TelerikMultiSelect is as follows:

<TelerikMultiSelect Data="@Data"
                 @bind-Value="@SelectedProducts"
                 GroupField="Category.CategoryName"
                 TextField="ProductName"
                 ValueField="ProductId"
                 Placeholder="Select a product">
</TelerikMultiSelect>

@code {
    public IEnumerable<Product> Data { get; set; }
    public List<int> SelectedProducts { get; set; } = new List<int>();

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = $"Product {i}",
                Category = new Category() { CategoryId = i % 5, CategoryName = $"Category {i % 5}" }
            });
        }

        Data = products;

        base.OnInitialized();
    }

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

    public class Category
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
    }
}

Hello Telerik Team,

When i tried to bound Grid to a ExpandoObject or DataTable  I can't use filter properties .It throws unhandling Exception error. How to sort out this issue.

Is there a way to increase the height/size of the suggestion list for the TelerikMultiSelect control? There does not appear to be a Height property on the control. Thanks.

Hi, I'm using TelerikMultiSelect with grouping. I tried to create a custom filter on the group field, but the value entered by the user cannot be read. Do you know how to read the value?

Petr

Hi there.
I'm using the MultiSelect component and limiting how many items the user can select from the drop-down list.
I've used the following guide to achieve that goal (specifically the first code snippet in the "Solution" section): https://docs.telerik.com/blazor-ui/knowledge-base/multiselect-always-select-item-limit-total#solution
Adding the AutoClose="false" instruction in the TelerikMultiSelect element and selecting more than one item will create a mismatch between what is seen in the drop-down list VS what is seen in the input box.
Losing focus of the component and then regaining focus of it will show the correct items that have been selected, but deselecting the items in this state will also create the mismatch mentioned.
The following gif showcases both situations: https://i.gyazo.com/9ad670d9b3cffc3d0b43cb457bb57a6d.mp4

Here is the REPL link: https://blazorrepl.telerik.com/cdkCbXcm22boLMeV33

The issue does not happen because of the "static item" used in the example; here is a REPL link which has the code about the "static item" removed: https://blazorrepl.telerik.com/mHEsFjwQ26ywR1tD29

Hi,

I'm trying to create a combobox which can select multiple values or a multiselect with tagging functionality like the one in the Angular suite of controls (https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values/). We are migrating our codebase at the moment and there is no adequate substitute to replicate the same behavior. I did come across the proposed solution (https://github.com/telerik/blazor-ui/tree/master/multiselect/add-new-item/MultiSelectAndAddButton) but its implementation feels very inorganic. Is there some way this can be incorporated into the control and have a cleaner implementation from a consuming-developer's point of view?

Hello. I'm building a TelerikForm, and I need to show a TextField if 'Other' is selected.

The conditional rendering seems to work perfectly when the 'parent' item is a TelerikMultiSelect, but does not work with the auto-generated Enum field. 

I have verified that the field in question is indeed being set to CompanyType.Other, yet the "Other Legal Entity Type" field is not showing.

What am I missing?

 <FormGroup LabelText="Legal Information" Columns="2" ColumnSpacing="15px">
            <FormItem Field="@nameof(formInfo.LegalEntity)"></FormItem>
            @if (formInfo.LegalEntity == CompanyType.Other) // this does not work
            {
                <FormItem LabelText="Other Legal Entity Type" Field="@nameof(formInfo.OtherLegalEntityType)"></FormItem>
            }
        </FormGroup>
        <FormGroup LabelText="Operations" Columns="2" ColumnSpacing="15px">
            <FormItem Field="@nameof(formInfo.ProductDelivery)">
                <Template>
                    <TelerikMultiSelect Data="formInfo.productDeliveryOptions" @bind-Value="formInfo.ProductDelivery" />
                </Template>
            </FormItem>
            @if (formInfo.ProductDelivery.Contains("Other")) // this works as expected
            {
                <FormItem LabelText="Other Product Delivery Type" Field="@nameof(formInfo.OtherProductDeliveryType)"></FormItem>
            }
        </FormGroup>

I'd like to be able to programmatically filter only the values shown in the popup list of the MultiSelect. Is there a way to do this that does not use the built in filtering, which is clunky?

I tried the suggestion here (Blazor MultiSelect Demos - Custom Filtering | Telerik UI for Blazor), but the issue with that is the OnRead mechanism filters not only the values shown in the popup list, but also all the values available to the MultiSelect itself.

This means that if items are already selected in the MultiSelect, then the popup list is shown, then I filter the popup list using OnRead (and the filter does not include the values already selected in the MultiSelect), the MultiSelect loses those existing selections and they disappear. So the OnRead mechanism does not work for only filtering the popup list. When using the default filtering, that filtering only filters the popup list and keeps any existing selection in the MultiSelect, which is the correct behavior I'm looking for, but programmatically done.

So, bottom line, I'd like a mechanism to programmatically filter only the items displayed in the popup list that works separately from the default filtering of the MultiSelect.

I have a MultiSelect bound to a Dictionary<int, SerialNumberEntry> SNEList

<TelerikMultiSelect Data="SNEList" Value="@SelectedSerialNumberEntryIds" ValueExpression="@(() => SelectedSerialNumberEntryIds)" ValueChanged="@((List<int> newValues) => SelectSerialNumberEntryChanged(newValues))" AutoClose="false" Placeholder="Select Serial Numbers" ValueField="Key" TextField="Value.SerialNumber" @ref="SerialNumberMultiSelect" >
	<HeaderTemplate>
		<div class="select-all-item">
			<TelerikCheckBox TValue="bool"
				Value="@IsAllSerialNumbersSelected()"
				ValueChanged="@( (bool v) => ToggleSelectAllSerialNumbers(v) )"
				Id="ms-select-all-checkbox">
			</TelerikCheckBox>
			<label for="ms-select-all-checkbox">&nbsp;Select All</label>
		</div>
	</HeaderTemplate>
	<ItemTemplate>
		<input type="checkbox"
			id="@( "cb" + context.Key )"
			class="k-checkbox k-rounded-md k-checkbox-md"
			checked="@GetChecked(context.Value)">
		@context.Value.SerialNumber
	</ItemTemplate>
</TelerikMultiSelect>

and when I select an entry, it displays the "ToString()" result of the KeyValuePair<int, SerialNumberEntry>

Why does 

TextField="SerialNumber"

work if it's a List<SerialNumberEntry> but it's ignoring the 

TextField="Value.SerialNumber"

when it is a Dictionary<int, SerialNumberEntry>?  Can it not bind to child properties?  There's no template that I can find to override this behavior.