DxListBox<TData, TValue>.Columns Property

Allows you to add columns to the List Box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.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 ListBox control can display data across multiple columns. Follow the steps below to create columns:

1. Add a <Columns> tag to the component’s markup to declare the column collection.

2. Populate the Columns collection with DxListEditorColumn objects. These objects include the following properties:

   • Caption - Specifies the column’s caption text.
   • FieldName - Specifies the data source field that populates column items in multi-column editors.
   • SearchEnabled - Specifies whether the component can search text in cells of the current column.
   • Visible - Specifies whether the column is visible.
   • VisibleChanged - Fires when the column visibility changes.
   • VisibleIndex - Specifies a column’s position among other columns.
   • VisibleIndexChanged - Fires when the column’s visible index changes.
   • Width - Specifies the column’s width.

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; }
    }
}