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