DxListBox<TData, TValue>.Columns Property

Allows you to add columns to the List Box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.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:

   • FieldName - Specifies the data source field that populates column items.
   • Caption - Specifies the column header.
   • Visible - Specifies column visibility.
   • VisibleIndex - Specifies column position.
   • Width - Specifies column 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; }
    }
}