DxListBox<TData, TValue>.ShowCheckboxes Property

Specifies whether to display item checkboxes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
Boolean	true to display item checkboxes; otherwise, false.

Remarks

You can embed checkboxes into List Box items to allow users to check/uncheck individual items. If the ShowCheckboxes property is set to true, users can click the items or corresponding checkboxes to select the items.

Note

The ShowCheckboxes property should only be used if SelectionMode is set to Multiple.

Razor

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

@code {
    IEnumerable<Person> Values {
        get => Values;
        set { Values = value; InvokeAsync(StateHasChanged); }
    }
}

DataSource

using System;
using System.Collections.Generic;

namespace BlazorProject.Data {
    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 Description => $"{FirstName} {LastName} ({Department} Dept.)";

        public override bool Equals(object obj) {
            if(obj is Person person) {
                if(person.Id != Id)
                    return false;
                return string.Equals(person.FirstName, FirstName) && string.Equals(person.LastName, LastName);
            }
            return false;
        }

        public override int GetHashCode() {
            return HashCode.Combine(Id, FirstName, LastName);
        }
    }
}

Run Demo: List Box - Multiple Selection

Implements

DevExpress.Blazor.IListBox<TData, TValue>.ShowCheckboxes