Back to Devexpress

DxTagBox<TData, TValue>.EmptyDataAreaTemplate Property

blazor-devexpress-dot-blazor-dot-dxtagbox-2-0d030e36.md

latest5.1 KB
Original Source

DxTagBox<TData, TValue>.EmptyDataAreaTemplate Property

Specifies the template used to display custom content in the TagBox if there is not items to display.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[Parameter]
public RenderFragment<TagBoxEmptyDataAreaTemplateContext> EmptyDataAreaTemplate { get; set; }

Property Value

TypeDescription
RenderFragment<TagBoxEmptyDataAreaTemplateContext>

The empty data area template.

|

Remarks

The TagBox displays an empty data area in the following cases:

  • The Data property is unset.
  • The specified data source is empty.
  • None of the TagBox items matches the current search and filter condition.
  • You use the DataAsync property or the CustomData property to bind the TagBox to a data source. The component sends the first request to a remote data source and waits for a response.

Use the EmptyDataAreaTemplate property to customize content displayed in this empty region. The template’s context parameter includes the IsDataLoading property that allows you to determine whether the TagBox is still loading data.

razor
@inject NwindDataService NwindDataService

<DxTagBox Data="@DataItems"
          @bind-Values="@Items"
          CssClass="cw-480"
          NullText="Select an order..."
         >
    <EmptyDataAreaTemplate>
        @if (!context.IsDataLoading) {
            <div class="empty-data-area-template">
                <div class="d-flex flex-column">
                    No orders found
                </div>
            </div>
        }
    </EmptyDataAreaTemplate>
</DxTagBox>

@code {
    IEnumerable<string> DataItems { get; set; }
    IEnumerable<string> Items { get; set; }
}
css
.empty-data-area-template {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    padding: 2rem 0;
}
csharp
using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

public partial class Employee {
    public Employee() {
        this.Orders = new List<Order>();
    }
    public int EmployeeId { get; set; }
    public string LastName { get; set; }
    public string FirstName { get; set; }
    public string Title { get; set; }
    public string TitleOfCourtesy { get; set; }
    public Nullable BirthDate { get; set; }
    public Nullable HireDate { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string HomePhone { get; set; }
    public string Extension { get; set; }
    public byte[] Photo { get; set; }
    public string Notes { get; set; }
    public Nullable<int> ReportsTo { get; set; }
    public string PhotoPath { get; set; }
    public string GroupName { get; set; }
    public virtual ICollection<Order> Orders { get; set; }
    public string Text => $"{FirstName} {LastName} ({Title})";
    public string FullName => $"{FirstName} {LastName}";
    public string ImageFileName => $"employees/{EmployeeId}.jpg";
}
csharp
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Employee>> GetEmployeesAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}
csharp
public class Startup {
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddScoped<NwindDataService>();
    }
}

Run Demo: TagBox - Empty Data Area Template

Implements

DevExpress.Blazor.ITagBox<TData, TValue>.EmptyDataAreaTemplate

See Also

DxTagBox<TData, TValue> Class

DxTagBox<TData, TValue> Members

DevExpress.Blazor Namespace