Completely Custom Filter in grid

[Peter]

Hi Syncfusion,

I have already created the code for custom paging and I want to add filtering which will use the same custom code. I want on upper-right corner of grid to show the filter box but when I enter a value to use only my code for filtering. Below is parts of code related to filtering, retrieving data and paging. Based on this code I have noticed that when I enter some filter text, the code finds records and returns data, but the grid performs additional filtering and shows no records. How I use filter on toolbar but apply my custom filtering?
Thanks in advance, Syncfusion.

UI:

<SfGrid ID="contactsGrid" DataSource="@contactsData" @ref="contactsGrid" AllowPaging="true" AllowFiltering="false" AllowReordering="true" AllowResizing="true" AllowGrouping="true" AllowExcelExport="true" AllowSelection="true"

                AllowSorting="false" Toolbar="@(new List<string>() { "Add", "Edit", "ExcelExport", "Search"})" Height="370" Width="100%">

            <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="false" ></GridEditSettings>

            <GridPageSettings>

                <Template>

                    <SfPager @ref="@contactsGridPager" CurrentPage="@this.currentPage" PageSize="@this.pageSize" PageChanged="PageChanged"></SfPager>

                </Template>

            </GridPageSettings>

            <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Single" Mode="Syncfusion.Blazor.Grids.SelectionMode.Row"></GridSelectionSettings>

            <GridEvents OnToolbarClick="ToolbarClick" TValue="Data.DTOs.ContactDto" OnActionBegin="ActionBegin" OnRecordDoubleClick="RecordDoubleClickHandler"></GridEvents>

            <GridColumns>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.ContactId) HeaderText="Contact ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" AllowSearching="false" Width="120" Visible="false"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.LastName) [email protected]("LastName") ClipMode="ClipMode.EllipsisWithTooltip" MinWidth="120"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.FirstName) [email protected]("FirstName") ClipMode="ClipMode.EllipsisWithTooltip" MinWidth="120"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.PersonalEmail) [email protected]("Email") EditType="EditType.DatePickerEdit" ClipMode="ClipMode.EllipsisWithTooltip" TextAlign="TextAlign.Left" Width="130"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.HomeAddress) [email protected]("HomeAddress") TextAlign="TextAlign.Left" ClipMode="ClipMode.EllipsisWithTooltip" Width="60"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.WorkPhone) [email protected]("WorkPhone") TextAlign="TextAlign.Left" ClipMode="ClipMode.EllipsisWithTooltip" Width="60"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.Mobile1) [email protected]("Mobile1") TextAlign="TextAlign.Left" ClipMode="ClipMode.EllipsisWithTooltip" Width="60"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.County) [email protected]("County") TextAlign="TextAlign.Left" ClipMode="ClipMode.EllipsisWithTooltip" Width="80"></GridColumn>

                <GridColumn Field=@nameof(Data.DTOs.ContactDto.Afm) [email protected]("Afm") TextAlign="TextAlign.Left" ClipMode="ClipMode.EllipsisWithTooltip" Width="80"></GridColumn>

            </GridColumns>

        </SfGrid>

Code:
(the code below is called when retrieving data, when paging is changed and when filtering)

private async Task FillContactsGrid()

        {

            try

            {

                string filter = "";

                if (this.contactsGrid != null)

                {

                    filter = this.contactsGrid.SearchSettings.Key;

                }

                Task<PagedData<List<Data.DTOs.ContactDto>>> contactTask = new WebApiClient.ContactsWebApiClient(httpClient).GetContacts(null, filter, this.currentPage, this.pageSize);

                PagedData<List<Data.DTOs.ContactDto>> contactsPagedData = await contactTask;

                contactsData = contactsPagedData.Data;

                contactsGrid.PageSettings.PageCount = (int)Math.Ceiling(((decimal)contactsPagedData.TotalCount) / this.pageSize); 

                contactsGridPager.TotalItemsCount = contactsPagedData.TotalCount;

                contactsGridPager.UpdatePageSizeAsync(this.pageSize);

                this.StateHasChanged();

            }

            catch (Exception ex)

            {

                await dialogService.AlertAsync(Resources.GlobalResources.ErrorOccured, Resources.GlobalResources.AppTitle);

            }

        }

[Sarveswaran Palani]

Hi Peter,

Greetings from Syncfusion support.

Query: How I use filter on toolbar but apply my custom filtering?

From your query, we suspect that you want to do custom filtering within the upper-right corner side of the grid toolbar. We have already discussed about your requirement in our UG documentation. Kindly refer the attached documentation link for your reference. If we misunderstood your query, we request you to share more details about your requirement precisely, it’ll helpful for us to provide solution ASAP from our end.

Reference: https://blazor.syncfusion.com/documentation/datagrid/how-to/custom-control-in-grid-toolbar

If you have any further queries, please don’t hesitate to get back to us.

Regards,
Sarvesh

[Peter]

Hi Sarvesh,
Thank you for your fast reply, this is what I was needing to do. If there was a way to include in the same custom toolbar also some predefined commands like Add, Edit, ExcelExport, something like code below, then it will be 100% what I need.

Toolbar="@(new List<string>() { "Add", "Edit", "ExcelExport"}) ...

Thanks,
Petros

[Sarveswaran Palani]

Hi Peter,

From your query, we suspect that you want to render both built-in and custom items in toolbar. We have already documented your requirement in our UG documentation. Kindly refer the attached link for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/tool-bar#built-in-and-custom-items-in-toolbar

Regards,
Sarvesh