How To make Common Filter Component in Blazor Web Assembly project

Azizullah Ali 0

Please Describe How i make Common filter component

AgaveJoe 26,201 Reputation points

2024-03-14T12:04:04.1666667+00:00

Your question is too vague to answer. Please provide the use case and sample code.
Jerry Fu - MSFT 561 Reputation points Microsoft Vendor

2024-03-14T12:11:47.7533333+00:00

Could you specify what is the function of the filter component, Is it to filter a table?

Azizullah Ali 0

Hello AgaveJoe and Jerry Fu - MSFT
Thank You for reply,
below is the Use Case
The filter should handle parent-child DDL
Data will be fetched from the Database(Call Services)

I am giving code for a better understanding

below is the filter component code

@using Winit.UIModels.Common.Filter

@using Winit.Shared.Models.Common

@using Winit.Shared.Models.Events

@if (showFilter)

{

@if (IsSearchCriteriaNeeded)

{

    <div class="search-criteria">

        Search Criteria: @GetSearchCriteriaDisplay()

    </div>

}

<div class="search-container">

    <div class="row">

        @for (int i = 0; i < ColumnsForFilter.Count; i++)

        {

            var columnName = ColumnsForFilter[i].ColumnName;

            <div class="col-md-3">

                <div class="form-group">

                    <label for="@($"filter{i}")">@ColumnsForFilter[i].Label:</label>

                    @if (ColumnsForFilter[i].FilterType == "Text")

                    {

                        <input type="text" class="form-control" id="@($"filter{i}")"

                               value="@ColumnsForFilter[i].EnteredText"

                               @onchange="@(e => OnFilterChanged(columnName, e))" />

                    }

                    else if (ColumnsForFilter[i].FilterType == "DropDown")

                    {

                        <Winit.UIComponents.Common.CustomControls.DropDown @ref="DropDownRef" DataSource="ColumnsForFilter[i].DropDownValues"

                                                                           Title="@ColumnsForFilter[i].Label"

                                                                           IsButtonVisible=true

                                                                           OnSelect="@(e => HandleSelectionChange(columnName, e))"

                                                                           IsSearchable=true _SelectionMode="ColumnsForFilter[i].SelectionMode"

                                                                           IsSelected=ColumnsForFilter[i].IsSelected />

                    }

                </div>

            </div>

        }

        <div class="col-md-3 d-flex align-items-end">

            <div class="form-group search-buttons">

                <button class="btn btn-primary" style="background-color:#003898" @onclick="ApplyFilter">Search</button>

                <button class="btn btn-secondary ml-2" @onclick="ResetFilter">Reset</button>

            </div>

        </div>

    </div>

</div>

}

@code {

// public delegate void FilterAppliedEvent(List<SelectionItem> filterCriteria); // Delegate signature for the event

public delegate void FilterAppliedEvent(Dictionary<string, List<string>> filterCriteria); // Delegate signature for the event

[Parameter]

public FilterAppliedEvent OnFilterApplied { get; set; }

[Parameter]

public List<FilterModel> ColumnsForFilter { get; set; }

[Parameter]

public bool IsSearchCriteriaNeeded { get; set; }

private Dictionary<string, List<ISelectionItem>> filterValues = new Dictionary<string, List<ISelectionItem>>();

private List<SelectionItem> FilterCriteria = new List<SelectionItem>();

private bool showFilter = false;

private void OnFilterChanged(string columnName, ChangeEventArgs e)

{

    // string valueAsString = e.Value.ToString();

    // List<ISelectionItem> values = new List<string>() { valueAsString };

    // filterValues[columnName] = values;

}

// public async void OnselectRoue(DropDownEvent dropDown)

// {

// }

public Winit.UIComponents.Common.CustomControls.DropDown DropDownRef;

private Dictionary<string, List<string>> filtercriteria = new Dictionary<string, List<string>>();

public async Task ApplyFilter()

{

    foreach (var (columnName, valueList) in filterValues)

    {

        List<string> uids = new List<string>();

        foreach (var item in valueList)

        {

            uids.Add(item.UID);

        }

        filtercriteria.Add(columnName, uids);

    }

    OnFilterApplied?.Invoke(filtercriteria);

}

public bool IsUpdateneeded = true;

private void ResetFilter()

{

    SetFilterColumns();

}

public void SetFilterColumns()

{

    foreach (var column in ColumnsForFilter)

    {

        if (column.FilterType == "DropDown")

        {

            if (column.IsThisChildColumn)

            {

                column.DropDownValues.Clear();

            }

            else

            {

                foreach (var item in column.DropDownValues)

                {

                    item.IsSelected = false;

                }

            }

        }

        column.SelectedValue = null;

        filterValues[column.ColumnName] = new List<ISelectionItem>();

    }

    showFilter = !showFilter;

    filtercriteria = new Dictionary<string, List<string>>();

}

private string GetSearchCriteriaDisplay()

{

    var searchCriteria = new List<string>();

    foreach (var column in ColumnsForFilter)

    {

        var columnName = column.ColumnName;

        if (filterValues.ContainsKey(columnName))

        {

            var filterValueList = filterValues[columnName];

            string filterValue;

            if (filterValueList == null || filterValueList.Count == 0)

            {

                filterValue = "All";

            }

            else

            {

                filterValue = string.Join(", ", filterValueList);

            }

            searchCriteria.Add($"{column.Label}: {filterValue}");

        }

        else

        {

            searchCriteria.Add($"{column.Label}: All");

        }

    }

    return string.Join(", ", searchCriteria);

}

protected override Task OnInitializedAsync()

{

    return base.OnInitializedAsync();

}

[Parameter]

public EventCallback<ChildDropdownChangedEventArgs> OnChildDropdownChanged { get; set; }

public class ChildDropdownChangedEventArgs

{

    public string ParentColumnName { get; set; }

    public List<ISelectionItem> SelectionItems { get; set; }

}

public async void HandleSelectionChange(string columnName, DropDownEvent dropDownEvent)

{

    if (dropDownEvent != null)

    {

        filterValues[columnName] = dropDownEvent.SelectionItems;

        var selectedColumnDetails = ColumnsForFilter.FirstOrDefault(c => c.ColumnName == columnName);

        if (selectedColumnDetails != null)

        {

            selectedColumnDetails.IsSelected = false;

            if (selectedColumnDetails.HasChildDependency)

            {

                var args = new ChildDropdownChangedEventArgs

                    {

                        ParentColumnName = columnName,

                        SelectionItems = dropDownEvent.SelectionItems

                    };

                await OnChildDropdownChanged.InvokeAsync(args);

                foreach (var ddl in ColumnsForFilter)

                {

                    DropDownRef.UpdateDataSource(ddl.DropDownValues);

                }

            }

        }

       //showFilter = true;

    }

}

void HandleChildColumns(string childColumn)

{

    var childColumnDetails = ColumnsForFilter.FirstOrDefault(c => c.ColumnName == childColumn);

    if (childColumnDetails.HasChildDependency && childColumnDetails.ChildColumnName != null)

    {

        var nextchildColumn = ColumnsForFilter.FirstOrDefault(c => c.ColumnName == childColumnDetails.ChildColumnName);

        nextchildColumn.DropDownValues.Clear();

        HandleChildColumns(nextchildColumn.ColumnName);

    }

}

public async void ToggleFilter()

{

    SetFilterColumns();

}

}

AgaveJoe 26,201 Reputation points

2024-03-28T09:58:45.71+00:00

What problems are you having with the code? Is there anyway you can share code the community can actually test? Maybe you can commit your code base to Github?

1 answer

Pradeep M 240 Reputation points Microsoft Vendor

2024-04-19T12:48:04.2366667+00:00

Hi Azizullah Ali,

Thank you for reaching out to Microsoft Q & A forum.

When creating a filter component in a Blazor WebAssembly project, you'll want to ensure it can handle parent-child dropdowns and retrieve data from a database using services. Here's how you can go about it:

1.Designing the Component: Start by designing the user interface of your filter component. It should include elements for displaying filter options and buttons for applying or resetting filters.

2.Parameter Inputs: Define parameters that will be used to pass filter-related information to the component. This includes things like the columns available for filtering, whether search criteria are required, and a callback function to handle filter application events.

3.Implementing Filter Logic: Write the code to handle filter changes, application, and resetting. This involves updating filter values based on user interactions and triggering the appropriate events when filters are applied.

4.Managing Dropdowns: Handle changes in dropdown selections, making sure to update filter values and manage any parent-child relationships between dropdowns. You'll also need to update the UI to reflect these changes.

5.User Interaction: Make sure the user interface provides clear feedback on the current filter state and responds smoothly to user actions. This might involve displaying search criteria and providing intuitive controls for applying or resetting filters.

6.Initialization: Set up the component's initial state and any necessary data structures when it is first initialized. This ensures everything is ready to go when the component is rendered.

7.Handling Child Components: If your filter component interacts with child components, define methods and event handlers to facilitate communication between them. This might involve passing data from parent to child components or triggering updates in child components based on filter changes.

8.Testing and Refinement: Test your filter component thoroughly to ensure it behaves as expected in different scenarios. Make any necessary refinements to improve usability and performance based on your testing results.

Following these steps will help you create a versatile and reliable filter component for your Blazor WebAssembly project,

If you encounter any future issues, please feel free to contact us, and we will be pleased to assist you further.

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.

Thank you.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment