Grid duplicating calls to query endpoint for each column visibility change

We have a page that queries data based on a page parameter called 'ViewId'. Because of this we must utilize the OnParametersSetAsync method to regenerate the data. The column visibilities for the view can also change so we must make another call to get the 'true/false' values (the sample below just randomizes them for demo purposes). The problem is that for every column visibility change, a duplicated QUERY call is made to the endpoint "customview/query". In this example, up to 5 additional calls are made each time the 'ViewId' url property changes. Please see the below code/screenshot.

<SfGrid @ref="Grid" TValue="ModelType"
        Query="QueryCustomizations" ID="ViewRows"
        AllowFiltering="true" AllowSorting="true"
        AllowMultiSorting="true" AllowTextWrap="true">
   <SfDataManager @ref="DataManager" Adaptor="Adaptors.ODataV4Adaptor" Url="customview/query"/>
   <GridColumns>
      <GridColumn Field=@nameof(ModelType.Id) IsPrimaryKey="true" Visible="false" />
      <GridColumn Field=@nameof(ModelType.Prop1) HeaderText="Prop 1" MinWidth="100" Visible=@PropVisibilities[0] />
      <GridColumn Field=@nameof(ModelType.Prop2) HeaderText="Prop 2" MinWidth="140" Visible=@PropVisibilities[1] />
      <GridColumn Field=@nameof(ModelType.Prop3) HeaderText="Prop 3" MinWidth="140" Visible=@PropVisibilities[2] />
      <GridColumn Field=@nameof(ModelType.Prop4) HeaderText="Prop 4" MinWidth="200" Visible=@PropVisibilities[3] />
      <GridColumn Field=@nameof(ModelType.Prop5) HeaderText="Prop 5" MinWidth="200" Visible=@PropVisibilities[4] />
   </GridColumns>
</SfGrid>

@code {
   [Parameter] public Guid ViewId { get; set; }
   bool[] PropVisibilities = new bool[5];
   protected override Task OnParametersSetAsync()
   {
      QueryCustomizations = new Query()
         .Sort("AccountNumber", null)
         .AddParams("ViewId", ViewId);

      PropVisibilities[0] = Random.Shared.Next(2) == 1;
      PropVisibilities[1] = Random.Shared.Next(2) == 1;
      PropVisibilities[2] = Random.Shared.Next(2) == 1;
      PropVisibilities[3] = Random.Shared.Next(2) == 1;
      PropVisibilities[4] = Random.Shared.Next(2) == 1;
      return Task.CompletedTask;
    }
}

sf_grid_1.png

So, our question is how can we control the query calls made, OR is this a bug that needs to be addressed? How should this work as this will be an ocurring theme throughout our project.

Our first thought was to see if we can control the query calls manually (instead of Synfusion determining when to make them). However, we do not know how to tell the DataManager to stop making all calls and allow us to make the call manually (especially when the call needs to include an oData syntax for the query url).


8 Replies

JV Jeff Voigt July 25, 2022 01:44 PM UTC

Please ignore the .Sort("AccountNumber", null) method on the QueryCustomizations as that should either be removed or changed to an appropriate property.  I tried to "EDIT" the original post but there is a reoccurring bug that will not show ALL of the code sample, therefore making it near impossible to trust the editing.



RS Renjith Singh Rajendran Syncfusion Team July 26, 2022 03:41 PM UTC

Hi Jeff,


Greetings from Syncfusion support.


We are not clear about the exact scenario you are facing the reported problem. We checked this by creating a sample based on your shared codes, but the odata GET request is made only one time with the sample from our side at initial grid rendering.


We are attaching the sample which we have tried for your reference. Kindly download and refer the sample attached in this ticket. If you are still facing difficulties then the following details would be helpful for us to proceed further.


  1. Share a simple issue reproducing sample for us to validate.
  2. If possible reproduce the reported problem with the attached sample and share with us for further analysis.
  3. Share a video demo showing the replication procedure of the problem you are facing.
  4. Share the exact scenario you are facing the reported problem.
  5. Share the Syncfusion version details.


The provided information will help us analyze the problem, and provide you a solution as early as possible.


Regards,

Renjith R


Attachment: ClientApp_b3a8fda0.zip


JV Jeff Voigt July 26, 2022 04:33 PM UTC

I was able to replicate the issue while making the following changes:


Index.razor


@page "/test/{ViewId:int}"
[Parameter] public int ViewId { get; set; }


NavMenu.razor

Change links to the following:

<NavLink class="nav-link" rel='nofollow' href="test/1" Match="NavLinkMatch.All">
   <span class="oi oi-home" aria-hidden="true"></span> Test Link 1
</NavLink>
<NavLink class="nav-link" rel='nofollow' href="test/2" Match="NavLinkMatch.All">
   <span class="oi oi-home" aria-hidden="true"></span> Test Link 2
</NavLink>


When you run the app, make sure to click on the Test Link 1 and then Test Link 2.  As you go back and forth, when the page reloads it will exhibit the original issue.  For each visibility change, the query call is duplicated.


Thanks,

-JV



RS Renjith Singh Rajendran Syncfusion Team July 27, 2022 11:46 AM UTC

Hi Jeff,


We have further analyzed this scenario. Based on this scenario we suggest you to use the ShowColumnsAsync, HideColumnsAsync methods to programmatically hide/show grid columns instead of using variable binding for the Visible property. We are attaching the modified sample for your reference in this ticket.


Kindly download and refer the attached sample and check this from your side. Please refer the codes below. We have called the ShowColumnsAsync, HideColumnsAsync methods inside the OnDataBound event handler based on the array values(ShowColumnItems, HideColumnItems) generated from OnParametersSetAsync.


 

<GridEvents OnDataBound="DataBound" TValue="Order"></GridEvents>

 

    public async Task DataBound()

    {

        //based on ShowColumnItems and HideColumnItems array call the methods

        await Grid.ShowColumnsAsync(ShowColumnItems.ToArray());

        await Grid.HideColumnsAsync(HideColumnItems.ToArray());

        HideColumnItems = new List<string>();

        ShowColumnItems = new List<string>();

    }

 

    protected override Task OnParametersSetAsync()

    {

        QueryCustomizations = new Query().AddParams("ViewId", ViewId);

        //assign columns to be hidden to HideColumnItems and visible columns to ShowColumnItems array

        if (new Random().Next(2) == 1)

        {

            HideColumnItems.Add("Order ID");

        }

        else

        {

            ShowColumnItems.Add("Order ID");

        }

        if (new Random().Next(2) == 1)

        {

            HideColumnItems.Add("Customer Name");

        }

        else

        {

            ShowColumnItems.Add("Customer Name");

        }

        ...

       return Task.CompletedTask;

    }

 


Reference :

https://blazor.syncfusion.com/documentation/datagrid/columns#showhide-columns-by-external-button

https://blazor.syncfusion.com/documentation/datagrid/events#ondatabound


Regards,

Renjith R


Attachment: ClientApp_11b4672.zip


JV Jeff Voigt July 27, 2022 12:42 PM UTC

I followed your example, but the column visibilities do not appear to change.  Also, the data doesn't seem to bind when running the code against the OnDataBound event.  I tried running against both events (OnDataBound and DataBound) one at a time to be sure.  Please make sure you do not have issues before throwing out suggestions.


Also, when will this bug be tracked/fixed?  Here are my code changes for reference:


<GridEvents TValue="Order" OnDataBound="DataBound" />

Random Random = new Random((int)DateTime.Now.Ticks);
public List<string> ShowColumns = new();
public List<string> HideColumns = new();
protected async Task DataBound()
{
var visibilities = new bool[4] {
Random.Next(2) == 1,
Random.Next(2) == 1,
Random.Next(2) == 1,
Random.Next(2) == 1 };
if (visibilities[0]) ShowColumns.Add("Order ID"); else HideColumns.Add("Order ID");
if (visibilities[1]) ShowColumns.Add("Customer Name"); else HideColumns.Add("Customer Name");
if (visibilities[2]) ShowColumns.Add("Order Date"); else HideColumns.Add("Order Date");
if (visibilities[3]) ShowColumns.Add("Freight"); else HideColumns.Add("Freight");
await Grid.ShowColumnsAsync(ShowColumns.ToArray());
await Grid.HideColumnsAsync(HideColumns.ToArray());
ShowColumns = new();
HideColumns = new();
}


Thanks,

-JV



RS Renjith Singh Rajendran Syncfusion Team July 29, 2022 02:36 AM UTC

Hi Jeff,


We checked this with the sample shared from our previous update. The columns are hidden/shown properly based on the ViewId property change. We are attaching a video demo showing the behavior from our side.


We also checked this by modifying the sample attached in our previous update based on your shared code snippets. Still we could not face the reported issue from our side. We have also attached the sample which we have tried using your shared codes in this ticket.


Kindly refer the attachments and check this from your side. If you are still facing difficulties, then the following details would be helpful for us to proceed further.


  1. Share a video demo showing the replication of the problem you are facing.
  2. Share a issue reproducing sample for us to validate.
  3. Are you facing the reported issue with the sample shared from our side also?
  4. Share the exact scenario you are facing the reported problem.


The provided information will help us analyze the problem, and provide you a solution as early as possible.


Regards,

Renjith R


Attachment: Attachment_9ec26d7c.zip


JV Jeff Voigt July 29, 2022 12:42 PM UTC

The workaround you provided is ok for now.  However, in the future I would like to request the bug with the duplicate calls be resolved.  We have other Grids that need to dynamically change columns based on a call to the backend service which means we would need to use the following code to bind columns:

...
<GridColumns>
   @if( ViewColumns is not null )
   {
      <GridColumn Field=@nameof(ModelType.Id) IsPrimaryKey="true" Visible="false" />
      @foreach( var viewColumn in ViewColumns )
      {
         <GridColumn Field="@viewColumn.Property" HeaderText="@viewColumn.Header" MinWidth="140" />
      }

 </GridColumns>
..
IList<ViewColumn> ViewColumns; // changes OnParametersSetAsync()
...


This code will suffer the same duplicate consequences.




RS Renjith Singh Rajendran Syncfusion Team August 1, 2022 11:50 AM UTC

Hi Jeff,


Thanks for your update. Please follow up on the ticket which you have created for this query for future updates on this query.


Regards,

Renjith R


Loader.
Up arrow icon