DxListBox<TData, TValue>.ItemClick Event

Fires when a user clicks/taps a list box item or focuses it and presses Enter.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

Declaration

[Parameter]
public EventCallback<ListBoxItemClickEventArgs<TData, TValue>> ItemClick { get; set; }

Parameters

Type	Description
ListBoxItemClickEventArgs<TData, TValue>	A ListBoxItemClickEventArgs<TData, TValue> object that contains data for this event.

Remarks

You can handle the ItemClick event in response to the following actions:

• A user clicks a list box item with a pointing device.
• A user focuses a list box item with keyboard navigation (↑/↓ keys) and presses Enter.

In a handler, you can use the following ListBoxItemClickEventArgs<TData, TValue> argument properties:

InputDevice

Determines which action triggered the event.

DataItem

Allows you to access the processed item.

VisibleIndex

Returns the clicked item’s visible index.

ListBox

Allows you to access List Box APIs.

AltKey, CtrlKey, ShiftKey

Specify whether the Alt, Ctrl/Option, or Shift keys were pressed when the ItemClick event fired. For more information, refer to Item Selection | Select Items in the UI.

Note

By default, the List Box triggers item selection when a user clicks an item or focuses it and presses the Space key. You can handle the ItemClick event to also treat Enter as a selection key.

The following code determines which action triggers the ItemClick event. If a user presses the Enter key, the List Box selects the corresponding item.

Razor

<DxListBox Data="@Staff.DataSource"
           TData="Person"
           TValue="Person"
           @bind-Value="ListBoxValue"
           ItemClick="@OnItemClick">
    <Columns>
        <DxListEditorColumn FieldName="@nameof(Person.FirstName)" Caption="First Name" />
        <DxListEditorColumn FieldName="@nameof(Person.LastName)" Caption="Last Name" />
        <DxListEditorColumn FieldName="@nameof(Person.Department)" />
    </Columns>
</DxListBox>

@code {
    Person ListBoxValue;

    void OnItemClick(ListBoxItemClickEventArgs<Person, Person> args) {
        if (args.InputDevice == InputDevice.Keyboard) {
            args.ListBox.BeginUpdate();
            args.ListBox.Value = args.DataItem;
            args.ListBox.EndUpdate();
        }
    }
}

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 override int GetHashCode() {
            return HashCode.Combine(Id, FirstName, LastName);
        }
    }

    public enum Department { Motors, Electronics, Software }
}