Blazor Grid - Use TagBox as a Column Editor

This example uses our Blazor TagBox Editor to modify column values (within the DevExpress Blazor Grid UI component). As you can see, our TagBox Editor allows users to select multiple values when editing cell values or specify multiple search criteria within our Grid’s Filter Row.

Implementation Details

To add our TagBox component to your Grid, you must specify appropriate data cell and/or Filter Row templates.

Cell Editor Template

To display the DevExpress Blazor TagBox within edited cells, you must:

1. Activate data editing in the DevExpress Blazor Grid component (EditRow or EditCell mode).
2. Place a DxTagBox editor into the DxGridDataColumn.CellEditTemplate.
3. Handle the editor's ValuesChanged event and assign selected values to context.EditModel.

<DxGridDataColumn FieldName="Privileges" Caption="System Privileges">
    <CellEditTemplate Context="editContext">
        @{
            var user = editContext.EditModel as User;
            <DxTagBox Data="@AvailablePrivileges"
                      TData="string"
                      TValue="string"
                      Values="@(user!.Privileges)"
                      ValuesExpression="@(() => user.Privileges)"
                      ValuesChanged="@((newValues) => OnPrivilegesChanged(user, newValues))"
                      NullText="Assign privileges..." />
        }
    </CellEditTemplate>
</DxGridDataColumn>

private void OnPrivilegesChanged(User user, IEnumerable<string> newValues) {
    user.Privileges = newValues.ToList();
}

Filter Row Template

To display the DevExpress Blazor TagBox component in a Filter Row cell, you must:

1. Activate the ShowFilterRow property to display the integrated DevExpress Grid Filter Row.
2. Place a DxTagBox editor into the DxGridDataColumn.FilterRowCellTemplate.
3. Handle the editor's ValuesChanged event and set context.FilterCriteria to custom filter criteria (based on selected values).

<DxGridDataColumn FieldName="Privileges" Caption="System Privileges" >
    <FilterRowCellTemplate>
        @{
            var items = TagBoxFilterRowUtils.GetValueByFunctionOperator(context.FilterCriteria, nameof(User.Privileges));
        }
        <DxTagBox TData="string"
                  TValue="string"
                  Data="AvailablePrivileges"
                  Values="items"
                  ValuesChanged="(newValues) => { context.FilterCriteria = TagBoxFilterRowUtils.CreateFilterCriteriaByValues(newValues, nameof(User.Privileges)); }" />
    </FilterRowCellTemplate>
</DxGridDataColumn>

public class TagBoxFilterRowUtils {
    public static IEnumerable<string> GetValueByFunctionOperator(CriteriaOperator criteria, string fieldName) {
        var aggregateOperand = criteria as AggregateOperand;
        if (aggregateOperand.ReferenceEqualsNull() || aggregateOperand.AggregateType != Aggregate.Exists)
            return null;
        if (aggregateOperand.CollectionProperty is not OperandProperty operandProperty || operandProperty.PropertyName != fieldName)
            return null;
        if (aggregateOperand.Condition is not InOperator inOperator)
            return null;
        return inOperator.Operands.OfType<OperandValue>().Select(r => r.Value?.ToString());
    }

    public static CriteriaOperator CreateFilterCriteriaByValues(IEnumerable<string> values, string fieldName) {
        if (values.Count() == 0)
            return null;
        return new AggregateOperand(fieldName, Aggregate.Exists, new InOperator("", values));
    }
}

Files to Review

• Index.razor
• TagBoxFilterRowUtils.cs
• DataService.cs
• User.cs

Documentation

• Editing and Validation in Blazor Grid
• Filter Data in Blazor Grid

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)