Skip to main content

DxGridCommandColumn.ClearFilterButtonVisible Property

Specifies whether the command column displays the Clear button.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(true)]
[Parameter]
public bool ClearFilterButtonVisible { get; set; }

Property Value

Type Default Description
Boolean true

true to display the Clear button; otherwise, false.

Remarks

To display a command column in the Grid, declare a DxGridCommandColumn object in the Columns template. This column contains CRUD-related buttons (New, Edit, and Delete) and the Clear button that resets values in the filter row.

For information on how to enable data editing, refer to the following topic: Edit Data and Validate Input. For information on how to filter data, see the ShowFilterRow property description.

Blazor Grid Command Column

To hide unnecessary command buttons, disable the following options:

The following example hides the Clear command button:

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        KeyFieldName="EmployeeId"
        ShowFilterRow="true">
    <Columns>
        <DxGridCommandColumn ClearFilterButtonVisible="false"/>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        @{
            var employee = (Employee)editFormContext.EditModel;
        }
        <DxFormLayout>
            <DxFormLayoutItem Caption="First Name:">
                <DxTextBox @bind-Text="@employee.FirstName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                <DxTextBox @bind-Text="@employee.LastName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:">
                <DxTextBox @bind-Text="@employee.Title" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                <DxDateEdit @bind-Date="@employee.HireDate" />
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Employee)e.EditModel;
        var dataItem = e.IsNew ? new Employee() : Northwind.Employees.Find(editModel.EmployeeId);
        if (dataItem != null) {
            dataItem.FirstName = editModel.FirstName;
            dataItem.LastName = editModel.LastName;
            dataItem.Title = editModel.Title;
            dataItem.HireDate = editModel.HireDate;
            if (e.IsNew)
                await Northwind.AddAsync(dataItem);
            await Northwind.SaveChangesAsync();
            GridDataSource = await Northwind.Employees.ToListAsync();
        }
    }

    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        var dataItem = Northwind.Employees.Find((e.DataItem as Employee).EmployeeId);
        if (dataItem != null) {
            Northwind.Remove(dataItem);
            await Northwind.SaveChangesAsync();
            GridDataSource = await Northwind.Employees.ToListAsync();
        }
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Command Column

See Also