Hi Consensu Soluções,
Greetings from Syncfusion support.
Query: “I have two grids, and depending on the size of
the screen, only the first or only the second appears. But even if only one is
visible, both of them make calls to the server.”
We have checked your query and we would like to inform that
we can render the Grid inside the if condition. So that based on the browser
height it will render the specific Grid alone. Here we have changed the browser
height based on the checkbox click and we have rendered the SfGrid based on the
browser height Kindly check the attached code snippet and sample for your
reference.
|
<SfCheckBox Label="Change" @onchange="onChange" @bind-Checked="isChecked"></SfCheckBox>
<div>
<div style="height: @heightValue">
@if (heightValue ==
"calc(100vh - 9rem)")
{
<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="@isChecked" AllowPaging="true" Height="100%">
...
</SfGrid>
}
else{
@*Change the 7rem value based on your browser page layout*@
<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="@isChecked" AllowPaging="true" Height="100%">
...
</SfGrid>
}
</div>
</div>
@code{
SfGrid<Order> Grid;
public List<Order> Orders { get;
set; }
private bool
isChecked = false;
string heightValue
{ get; set;} = "calc(100vh - 7rem)";
private void
onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
{
if(args.Value.ToString() == "True")
{
heightValue = "calc(100vh - 9rem)";
} else
{
heightValue = "calc(100vh - 7rem)";
}
}
}
|
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-224575998-593353800.zip
Kindly get back to us if you have further queries or if we
misunderstood your query.
Regards,
Monisha
