DxTagBox<TData, TValue>.TagTemplate Property

Specifies the template to display a tag’s content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<TagInfo<TData>> TagTemplate { get; set; }

Property Value

Type	Description
RenderFragment<TagInfo<TData>>	The template content for an object of the TagInfo<T> type that provides information about a tag (the text, bound data item, whether or not the tag is custom, etc.)

Remarks

Use the TagTemplate property to customize an individual tag’s content. For more information on the customizable parameters, refer to TagInfo<T>.

The code below demonstrates how to customize a tag appearance according to its type and text.

Razor

<DxTagBox Data="@DataSource"
          TextFieldName="@nameof(City.CityName)"
          TData="City"
          TValue="City"
          AllowCustomTags ="true"
          @bind-Tags="@Tags">
            <TagTemplate Context="tagInfo">
                @{
                    var styleMode = tagInfo.IsCustom ? ButtonRenderStyleMode.Contained: GetModeByID(tagInfo.DataItem.CountryId);
                    var style = tagInfo.IsCustom ? ButtonRenderStyle.Dark : ButtonRenderStyle.Primary;
                    <DxButton RenderStyle="@style"
                              RenderStyleMode="@styleMode"
                              Text="@tagInfo.Text"
                              style="display:inline-block">
                        @context
                        <span @onclick="@tagInfo.RemoveTagAction">&times;</span>
                    </DxButton>
                }
            </TagTemplate>
</DxTagBox>

@code {
    List<City> DataSource { get; set; }
    IEnumerable<string> Tags { get; set; }

    ButtonRenderStyleMode GetModeByID(int countryId) {
        switch (countryId) {
            case 0: return ButtonRenderStyleMode.Contained;
            case 1: return ButtonRenderStyleMode.Outline;
            default: return ButtonRenderStyleMode.Text;
        }
    }

    protected override void OnInitialized() {
        base.OnInitialized();
        DataSource = CityData.Cities;
        Tags = new List<string>() { "Los Angeles", "Tokyo", "Moscow" };
    }
}

City

public class City {
    public int Id { get; set; }
    public int CountryId { get; set; }
    public string CityName { get; set; }
}

public static class CityData {
    private static readonly Lazy<List<City>> cities = new Lazy<List<City>>(() => {
        return new List<City>() {
            new City() { Id = 0, CountryId = 0, CityName = "Washington" },
            new City() { Id = 1, CountryId = 0, CityName = "New York" },
            new City() { Id = 2, CountryId = 0, CityName = "Los Angeles" },
            new City() { Id = 3, CountryId = 1, CityName = "Berlin" },
            new City() { Id = 4, CountryId = 1, CityName = "Munich" },
            new City() { Id = 5, CountryId = 1, CityName = "Hamburg" },
            new City() { Id = 6, CountryId = 2, CityName = "Tokyo" },
            new City() { Id = 7, CountryId = 2, CityName = "Osaka" },
            new City() { Id = 8, CountryId = 2, CityName = "Yokohama" }
        };
    });
    public static List<City> Cities { get { return cities.Value; } }
} 

Run Demo: TagBox - Tag Template