Back to Devexpress

DxTagBox<TData, TValue>.Columns Property

blazor-devexpress-dot-blazor-dot-dxtagbox-2-869db867.md

latest4.8 KB
Original Source

DxTagBox<TData, TValue>.Columns Property

Allows you to add columns to the TagBox.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[Parameter]
public RenderFragment Columns { get; set; }

Property Value

TypeDescription
RenderFragment

A collection of columns (UI fragments).

|

Remarks

The DevExpress Blazor TagBox control can display data across multiple columns. Follow the steps below to create columns:

  1. Add <Columns>...</Columns> tag to the component’s markup to declare the column collection.
  2. Populate the column collection with DxListEditorColumn objects. Each object corresponds to a separate column.
  3. For each DxListEditorColumn object, specify the data source field that populates column cells.
  4. Specify the DxListEditorColumn properties to customize the column’s appearance as needed.

To format tag values, use the EditFormat property.

razor
@using StaffData

<DxTagBox Data="@Staff.DataSource"
          @bind-Values="@SelectedStaff"
          EditFormat="{1} {2}">
    <Columns>
        <DxListEditorColumn FieldName="Id" Width="50px" />
        <DxListEditorColumn FieldName="FirstName" Caption="Name"/>
        <DxListEditorColumn FieldName="LastName" Caption="Surname"/>
    </Columns>
</DxTagBox>

@code {
    IEnumerable<Person> SelectedStaff { get; set; } = new List<Person>() { Staff.DataSource[0] };
}
csharp
namespace StaffData {
    public static class Staff {
        private static readonly Lazy<List<Person>> dataSource = new Lazy<List<Person>>(() => {
            var dataSource = new List<Person>() {
                new Person() { Id= 0 , FirstName="John", LastName="Heart", Department=Department.Electronics },
                new Person() { Id= 1 , FirstName="Samantha", LastName="Bright", Department=Department.Motors },
                new Person() { Id= 2 , FirstName="Arthur", LastName="Miller", Department=Department.Software },
                new Person() { Id= 3 , FirstName="Robert", LastName="Reagan", Department=Department.Electronics },
                new Person() { Id= 4 , FirstName="Greta", LastName="Sims", Department=Department.Motors },
                new Person() { Id= 5 , FirstName="Brett", LastName="Wade", Department=Department.Software },
                new Person() { Id= 6 , FirstName="Sandra", LastName="Johnson", Department=Department.Electronics },
                new Person() { Id= 7 , FirstName="Edward", LastName="Holmes", Department=Department.Motors },
                new Person() { Id= 8 , FirstName="Barbara", LastName="Banks", Department=Department.Software },
                new Person() { Id= 9 , FirstName="Kevin", LastName="Carter", Department=Department.Electronics },
                new Person() { Id= 10, FirstName="Cynthia", LastName="Stanwick", Department=Department.Motors },
                new Person() { Id= 11, FirstName="Sam", LastName="Hill", Department=Department.Electronics }};
            return dataSource;
        });
        public static List<Person> DataSource { get { return dataSource.Value; } }
    }

    public class Person {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Department Department { get; set; }
        public string Text => $"{FirstName} {LastName} ({Department} Dept.)";
        public override bool Equals(object obj) {
            if (obj is Person typedObj) {
                return (this.Id == typedObj.Id) && (this.FirstName == typedObj.FirstName) && (this.LastName == typedObj.LastName)
                && (this.Department == typedObj.Department);
            }
            return base.Equals(obj);
        }
    }

    public enum Department { Motors, Electronics, Software }
}

Run Demo: TagBox – Multiple Columns

See Also

DxTagBox<TData, TValue> Class

DxTagBox<TData, TValue> Members

DevExpress.Blazor Namespace