Unplanned
Last Updated: 14 Dec 2020 08:53 by ADMIN
Ankit
Created on: 08 Dec 2020 07:52
Category: MultiSelect
Type: Feature Request
8
Add a Tag Mode (summary tag mode)

I would like to add a feature similar to the Tag Mode in the Kendo suite 

 

===========

ADMIN EDIT

===========

In the meantime, you can 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();
    }
}


 
0 comments