Unplanned
Last Updated: 04 Oct 2021 07:04 by Dorian
Daniel
Created on: 20 Jul 2021 15:27
Category: MultiSelect
Type: Feature Request
3
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

3 comments
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