DxListBox<TData, TValue>.Columns Property

Allows you to add columns to the List Box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment	A (render fragments) that allow you to declare List Box columns.

Remarks

The DevExpress Blazor ListBox 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.

Razor

@using StaffData

<DxListBox Data="@Staff.DataSource"
           @bind-Values="@Values">
    <Columns>
        <DxListEditorColumn FieldName="Id" Width="50px" />
        <DxListEditorColumn FieldName="FirstName" Caption="Name"/>
        <DxListEditorColumn FieldName="LastName" Caption="Surname"/>
    </Columns>
</DxListBox>

@code {
    IEnumerable<Person> Values { get; set; } = Staff.DataSource.Take(1);
}

StaffData

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: List Box – Multiple Columns

Note that if you implement custom logic to arrange columns based on specified conditions, the List Box places conditional columns last. The following code demonstrates conditional render for columns:

<DxListBox TData="@(WebApiLookup)"
            TValue="string"
            Data="@_data"
            CssClass="cw-400 chi-220">
    <Columns>
            @if(ShowColumn) {
                <DxListEditorColumn FieldName="Text"></DxListEditorColumn>
            }
            <DxListEditorColumn FieldName="Value"></DxListEditorColumn>
    </Columns>
</DxListBox>

<DxButton Text="ShowColumn" Click="@ShowHideColumn"></DxButton>

@code {
    IEnumerable<WebApiLookup> _data;

    bool ShowColumn {  get; set;  }

    void ShowHideColumn() {
        ShowColumn = !ShowColumn;
    }

    protected override Task OnInitializedAsync() {
        _data = Enumerable.Range(0, 100).Select(id => new WebApiLookup { Text = $"Text-{id}", Value = $"Value_{id}" });
        return base.OnInitializedAsync();
    }

    public class WebApiLookup {
        public string Text { get; set; }
        public string Value { get; set; }
    }
}