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.
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
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.
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:
- User starts typing in the input of the component.
- Popup of the MultiSelect opens.
- Skeleton is shown:
- Data processing starts.
- 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>---
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();
}
}
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
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