DxTagBox<TData, TValue>.ValuesChanged Event

Fires after a collection of selected values changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<IEnumerable<TValue>> ValuesChanged { get; set; }

Parameters

Type	Description
IEnumerable<TValue>	A collection of selected values.

Remarks

The ValuesChanged event fires each time the Values collection changes. To handle this event, specify TData and TValue properties explicitly:

<DxTagBox Data="@Staff.DataSource"
          TData="Person" 
          TValue="@Person"
          TextFieldName="@nameof(Person.Text)"
          Values="@Values"
          ValuesChanged="@ValuesChanged">
</DxTagBox>

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

    void ValuesChanged(IEnumerable<Person> values)
    {
        Values = values;
    }
}

Alternatively, you can define the event argument type and handle the event as follows:

<DxTagBox Data="@Staff.DataSource"
          TextFieldName="@nameof(Person.Text)"
          Values="@Values"
          ValuesChanged="@((IEnumerable<Person> e) => ValuesChanged(e))">
</DxTagBox>

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

    void ValuesChanged(IEnumerable<Person> values){
       Values = values;
    }
}

The code below demonstrates a sample implementation of the Person class.

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.)";
}

View Example: Use the DxTagBox control as a filter for a Grid column