TagInfo<T>.DataItem Property

Gets the tag’s bound data item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public T DataItem { get; }

Property Value

Type	Description
T	The data item type.

Remarks

Use the DataItem property to access the tag’s bound data item. If the tag is custom, the DataItem property returns NULL. To check whether the tag is custom, use the IsCustom property.

Use the TagInfo instances to define tags to be customized via templates (TagTemplate).

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