Unplanned
Last Updated: 29 Nov 2022 14:44 by ADMIN
Daniel
Created on: 20 Jul 2021 15:27
Category: MultiSelect
Type: Feature Request
21
TagTemplate for multi select

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

7 comments
ADMIN
Dimo
Posted on: 29 Nov 2022 14:44

@Kasim - it seems that your last message is more relevant to this feature request about a single TagMode.

Kasim
Posted on: 29 Nov 2022 04:17

I would like a slightly different implementation of Tag Template. A property to set as maximum chips to be displayed. Based on the property in-case the selected items are more than the maximum chips to be displayed, it should show "x more selected", on click expands to display all.

In-case all items selected, it should show only one chip saying "All Selected". On click expands to show all.

ADMIN
Svetoslav Dimitrov
Posted on: 05 Oct 2022 08:34

Hello James,

The Template will be available once this feature request is implemented. The best way to be notified when the status changes is to click the Follow button which will send you email notifications. 

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

n/a
Posted on: 28 Sep 2022 20:18
Marin - How can we create a template for the selected items that appear inside the TelerikMultiSelect component itself? Like the duplicate ticket, this template could have markup, tooltips, etc.
Dorian
Posted on: 04 Oct 2021 07:04
Thank you very much Marin. It works well !
ADMIN
Marin Bratanov
Posted on: 02 Oct 2021 09:50

Hello Dorian,

You can see how to use enums here: https://docs.telerik.com/blazor-ui/knowledge-base/dropdown-kb-bind-to-enum and here is a sample I made for you based on it that does not require templates:

@if (selectedValues != null && selectedValues.Count() > 0)
{
    @selectedValues[0]
    <br />
    @* in this case the value is the enum type *@
    @selectedValues[0].GetType()
}
<br />

<TelerikMultiSelect Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValues"
                 ClearButton="false" Filterable="true">
</TelerikMultiSelect>

@code {
    public class EnumDdlModel
    {
        public Telerik.Blazor.AnimationType MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    List<Telerik.Blazor.AnimationType> selectedValues { get; set; }
    List<EnumDdlModel> myDdlData { get; set; } = new List<EnumDdlModel>();

    protected override void OnInitialized()
    {
        //prepare instances of the model from the list of enum values and a desired string representation for the user
        foreach (Telerik.Blazor.AnimationType item in Enum.GetValues(typeof(Telerik.Blazor.AnimationType)))
        {
            myDdlData.Add(new EnumDdlModel { MyTextField = item.ToString(), MyValueField = item });
        }

        base.OnInitialized();
    }
}

If the plain string representation does not suit your needs, use the preferred approach (like using a display name attribute) when creating the data source. Putting the desired text in the TextField of the multiselect is the way to have it automatically show up on the tag and on the dropdown.

Once a tag template becomes available you would be able to use a similar approach of getting the value, casting to your enum, and obtaining data annotations from it, but for the time being preparing the data source is the way to go, and that would continue working after a tag template is implemented.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Dorian
Posted on: 01 Oct 2021 15:33

I have an issue close to this one with the MultiSelect component. 

I use the DisplayNameAttribute with an ItemTemplate, which works well:

        <ItemTemplate>
                  @(((MyEnum)context).GetDisplayName())
        </ItemTemplate>

But the tag of the selected items does not show the DisplayName, which make the ItemTemplate not usable in my case:

image