CODEWITHSUNDEEP
c#blazorblazor-webassemblymudblazor
bgriffy
bgriffy

Reputation: 43

How to add custom filters to datagrid?

I'm using the MudDataGrid component:

I'm trying to add a custom filter that lets you select from a list of items using checkboxes to filter by that column. It would work exactly the same as what you see here (click button in column header): https://blazor.syncfusion.com/demos/datagrid/checkbox-filter/

I haven't been able to find any examples of something like this using the MudDataGrid component. The component already provides a "Filter" button on each column, I just cant figure out how to control what pops up when you hit that button. Any help at all would be much appreciated!

Upvotes: 3

Views: 10008

Answers (2)

Dorian
Dorian

Reputation: 983

here You have it https://mudblazor.com/components/datagrid#advanced-filtering check out code section

 <PropertyColumn Property="x => x.Sign">
            <FilterTemplate>
                <MudIconButton OnClick="@OpenFilter" Icon="@_icon" Size="@Size.Small" />
                <MudOverlay Visible="@_filterOpen" OnClick="@(() => _filterOpen = false)" />
                <MudPopover Open="@_filterOpen" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter"
                    Style="width:150px">
                   <MudStack Spacing="0">
                       <MudCheckBox T="bool" Label="Select All" Size="@Size.Small" Value="@_selectAll" ValueChanged="@SelectAll" />
                       <MudStack Spacing="0" Style="overflow-y:auto;max-height:250px">
                           @foreach (var item in context.Items)
                           {
                                <MudCheckBox T="bool" Label="@($"{item.Sign}")" Size="@Size.Small" Value="@(_selectedItems.Contains(item))"
                                             ValueChanged="@((value) => SelectedChanged(value, item))" />
                           }
                       </MudStack>
                       <MudStack Row="true">
                            <MudButton OnClick="@(() => ClearFilterAsync(context))">Clear</MudButton>
                            <MudButton Color="@Color.Primary" OnClick="@(() => ApplyFilterAsync(context))">Filter</MudButton>
                       </MudStack>
                   </MudStack>
                </MudPopover>
            </FilterTemplate>
        </PropertyColumn>

enter image description here

Upvotes: 0

SteveL
SteveL

Reputation: 107

Maybe late but if I understand correctly your needs, look at this sample, they do exactly what you searching for. Open the custom filter for the Sign columns. I hope it will helps you.

https://mudblazor.com/components/datagrid#advanced-filtering

Upvotes: -1

Related Questions