When using SfDataManager await gridRef.FilterByColumnAsync causes multiple calls to Server

[Chris Marshall]

We are using a SfDataManager with our SfGrid and have added a DropDownList filter to the control.

When the page is first loaded the Predicate is applied correctly and a single call is made to the server to get the initial data.  However, when we use the dropdown to change the filter value we are seeing multiple calls made to the server to get the data.

Here is the grid definition

        <SfGrid @ref="gridRef" TValue="WaveIterationData" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Height="500px" AllowTextWrap="true">

            <SfDataManager Headers=@gridSourceHeaderData Url="@gridSourceUrl" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>


            <!-- Grid Selection Settings -->
            <GridSelectionSettings CheckboxOnly="false" PersistSelection="true" Type="Syncfusion.Blazor.Grids.SelectionType.Single"></GridSelectionSettings>


            <!-- Setup Pageing Options for Grid -->
            <GridPageSettings PageSize="12"></GridPageSettings>


            <!-- Setup Edit Options for Grid Cells/Rows -->
            <GridEditSettings AllowAdding="false" AllowDeleting="false" AllowEditing="false"></GridEditSettings>


            <GridEvents RowSelected="GridRowSelected" TValue="WaveIterationData"></GridEvents>


            <GridTextWrapSettings WrapMode="WrapMode.Content"></GridTextWrapSettings>


            <!-- Grid Columns -->
            <GridColumns>


                <GridFilterSettings>
                    <GridFilterColumns>
                        <GridFilterColumn Field="@(nameof(WaveIterationData.StatusText))" MatchCase=false Operator="Operator.Equal" Predicate="and" Value="@WaveFilterValue"></GridFilterColumn>
                    </GridFilterColumns>
                </GridFilterSettings>


                <GridColumn Field="@(nameof(WaveIterationData.WaveName))" HeaderText="Wave Name" />
                <GridColumn Field="@(nameof(WaveIterationData.DefinitionName))" HeaderText="Definition Name" />
                <GridColumn Field="@(nameof(WaveIterationData.OrderNumbers))" HeaderText="Tasks" Width="300" AllowFiltering="false"/>
                <GridColumn Field="@(nameof(WaveIterationData.CreationDateString))" HeaderText="Creation Date" AllowFiltering="false" />
                <GridColumn Field="@(nameof(WaveIterationData.StatusText))" HeaderText="Status">
                    <FilterTemplate>
                        <SfDropDownList Placeholder="All" ID="Text" Value="@((string)(context as PredicateModel).Value)" DataSource="@WaveStatuses" TValue="string" TItem="DropDownListItem">
                            <DropDownListEvents TItem="DropDownListItem" ValueChange="Change" TValue="string"></DropDownListEvents>
                            <DropDownListFieldSettings Value="Text" Text="Text"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </FilterTemplate>
                </GridColumn>


                <GridColumn HeaderText="" AllowFiltering="false" AutoFit="true">
                    <FilterTemplate></FilterTemplate>
                    <Template>
                        <OfRow CssClass="actionGridColumn">
                            @{
                                var data = (context as WaveIterationData);
                                if (data != null)
                                {
                                    selectedModel = data;
                                }


                                if (data.Active && !data.Completed)    // Only allow edit for Active Incomplete Items
                                {
                                    <div class="ofImageButton" title="Edit" @onclick="EditIteration">
                                    <OfIcon CssClass="ofIcon ofGridColumnIcon" IconName="edit"></OfIcon>
                                    </div>
                                }


                                <div class="ofImageButton" title="Delete" @onclick="(e => DeleteIteration(data))">
                                <OfIcon CssClass="ofIcon ofGridColumnIcon" IconName="delete"></OfIcon>
                                </div>
                            }
                        </OfRow>
                    </Template>
                </GridColumn>
            </GridColumns>
        </SfGrid>

​
Here is the code that is executed when the filter is changed

        await gridRef.FilterByColumnAsync(nameof(WaveIterationData.StatusText), "equal", args.Value);

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

[Sarveswaran Palani]

Hi Chris,

Greetings from Syncfusion support.

Based on your query and provided code snippet, it appears that the multiple calls to the server are occurring due to the FilterByAsync method in the URL adaptor. We have developed a sample based on your requirements, but we were unable to reproduce the reported issue on our end. For your reference, we have attached the sample and code snippet.

<SfGrid ID="Grid" @ref="@Grid" TValue="Order" Height="315" AllowSorting="true" AllowFiltering="true" AllowPaging="true"  Toolbar="@(new List<string>() { "Add", "Edit","Update","Delete","Cancel" })">

  <SfDataManager Url="/api/DataGrid" InsertUrl="/api/DataGrid/Insert" UpdateUrl="/api/DataGrid/UpdateOrder" RemoveUrl="/api/DataGrid/DeleteOrder" Adaptor="Adaptors.UrlAdaptor" ></SfDataManager>

   <GridPageSettings PageSize="7"></GridPageSettings>

<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridColumns>

       <GridColumn Field="OrderID"  HeaderText="OrderID" IsPrimaryKey="true">

       <FilterTemplate>

            <SfDropDownList ID="OrderID" DataSource="@IntList" TValue="int" TItem="IntField">

                <DropDownListEvents ValueChange="@IntChange" TItem="IntField" TValue="int"></DropDownListEvents>

                <DropDownListFieldSettings Value="value" Text="Text"></DropDownListFieldSettings>

            </SfDropDownList>

        </FilterTemplate>

       </GridColumn>

    </GridColumns>

</SfGrid>

@code{

  SfGrid<Order>?  Grid { get; set; }

  

    public class IntField

    {

        public string Text { get; set; }

        public int value { get; set; }

    }

 

    List<IntField> IntList = new List<IntField>

    {

        new IntField(){Text="All", value=0},

        new IntField(){Text="10258", value=10258},

        new IntField(){Text="10270", value=10270},

        new IntField(){Text="10275", value=10275}

    };

 

    public async void IntChange(@Syncfusion.Blazor.DropDowns.ChangeEventArgs<int, IntField> args)

    {

        if (args.Value == null)

        {

            await Grid.ClearFilteringAsync();

        }

        else

        {

            await Grid.FilterByColumnAsync("OrderID", "equal", args.Value);

        }

    }

 

}

Note : After connecting the database we need to copy the path of the database and change the connection string with the copied path in OrderContext.cs file based on the NORTHWND.MDF file

If you have any further queries, please get back to us.

Regards,
Sarvesh

Attachment: UrlAdaptorFiltering_8e0d65f5.zip

[Lars Sv?gaard Jensen]

Hi Sarvesh,

I have experienced a similar behavior to @Chris Marshall.

I get additional API calls in situations where I attempt to apply both filtering and sorting to the Grid.

I added a line of code to the "IntChanged(...)" method in the sample project that was supplied by Sarvesh.
The added line of code will result in an additional API call.

Is there any way of applying both sorting and filtering to a Grid, without causing an additional API call?

Best Regards

[Sarveswaran Palani]

Hi Lars,

We want to inform you that, for performing data operations, the ReadAsync method is invoked each time. In your shared code snippet, you have externally performed sorting and filtering operations, resulting in the Read method being called twice. This behavior aligns with the default functionality of the grid. If you have any further questions or need additional clarification, feel free to ask.

Regards,
Sarvesh