DxListBox<TData, TValue>.ShowSelectAllCheckbox Property

Specifies whether to display the Select All checkbox.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public bool ShowSelectAllCheckbox { get; set; }

Property Value

Type	Description
Boolean	true to display the Select All checkbox; otherwise, false.

Remarks

You can embed the Select All checkbox into the List Box. This checkbox allows users to select/deselect all available items. It does not affect items hidden by a filter or disabled items.

Follow the steps below to enable the Select All functionality:

1. Set the SelectionMode property to ListBoxSelectionMode.Multiple to enable multiple selection in the List Box.
2. Set the ShowCheckboxes property to true.
3. Set the ShowSelectAllCheckbox property to true.

Razor

@using StaffData

<DxListBox Data="@Staff.DataSource"
           TextFieldName="@nameof(Person.Text)"
           SelectionMode="ListBoxSelectionMode.Multiple"
           ShowCheckboxes="true"
           ShowSelectAllCheckbox="true"
           @bind-Values="@Values">
</DxListBox>

@code {
    IEnumerable<Person> Values { get; set; }
}

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

The Select All checkbox can have 3 states:

Unchecked

No available items are selected.

Checked

All available items are selected.

Indeterminate

The checkbox has this state in the following cases:

• Several available items are selected.
• You bind the List Box to a custom data and activate virtual scrolling (ListRenderMode is set to Virtual). In this case, the Select All checkbox stays in the Indeterminate state. When a user clicks the checkbox, a pop-up displays two options: Select All and Deselect All.

Run Demo: List Box - Multiple Selection