TagInfo<T>.DataItem Property
Gets the tag’s bound data item.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v23.1.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.
<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">×</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" };
}
}
See Also