Back to Devexpress

DxListBox<TData, TValue>.ShowCheckboxes Property

blazor-devexpress-dot-blazor-dot-dxlistbox-2-b82697f6.md

latest4.4 KB
Original Source

DxListBox<TData, TValue>.ShowCheckboxes Property

Specifies whether to display item checkboxes.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

TypeDescription
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); }
    }
}
csharp
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

See Also

DxListBox<TData, TValue> Class

DxListBox<TData, TValue> Members

DevExpress.Blazor Namespace