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