We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
I have a SfGrid which works fine. However, I'd like to set the RowRenderingMode from code something like:
RowRenderingMode="@direction"
protected RowDirection direction;
protected override void OnAfterRender(bool firstRender)
{
if(condition)
direction = RowDirection.Vertical;
else
direction = RowDirection.Horizontal
}
I also found that using EnableAdaptiveUI did not work as the grid overflow across the footer and I was unable to find a way to keep the footer below the grid.
I'M NOT FROM SUPPORT, but here's my opinion:
1) Create a reference to the object like this:
<SfGrid TValue="myTval" @ref="MyGrid" etc...>
2) Create a variable (property) to hold the reference:
private SfGrid<myTval> MyGrid { get; set; }
3) Set the value from any method you may like, on button click or anything:
<button class="btn btn-primary" @onclick="ChangeDirection">Click me!</button>
@code{
private void ChangeDirection(){
MyGrid.RowRenderingMode = RowDirection.Horizontal;
}
}
Hope that helps you.
Thank you for your rapid response - much appreciated. Sadly, this does not work as it generates a BL0005 warning (https://docs.microsoft.com/en-us/aspnet/core/diagnostics/bl0005?view=aspnetcore-6.0 ) and, even if the warning is ignored, the mode does not change. I'll keep tearing some hair out!
|
[Index.razor]
<button class="btn btn-primary" @onclick="ChangeVerticalDirection">ChangeVerticalDirection!</button>
<button class="btn btn-primary" @onclick="ChangeHorizontalDirection">ChangeHorizontalDirection!</button>
<div class="required-container">
@if (Mode == "Vertical")
{
<div class="content-wrapper e-bigger e-adaptive-demo">
<div class="e-mobile-layout">
<div class="e-mobile-content">
<DataGrid GridRowDirection="RowDirection.Vertical"></DataGrid>
</div>
</div>
</div>
}
else
{
<DataGrid GridRowDirection="RowDirection.Horizontal"></DataGrid>
}
</div>
@code{
public string Mode { get; set; } = "Horizontal";
private void ChangeVerticalDirection()
{
Mode = "Vertical";
StateHasChanged();
}
private void ChangeHorizontalDirection()
{
Mode = "Horizontal";
StateHasChanged();
}
} |
|
[DataGrid.razor]
@if (canchange)
{
<SfGrid DataSource="@Orders" AllowFiltering="true" Toolbar="@(new List<string>() { "Search" })" EnableAdaptiveUI="true" RowRenderingMode="GridRowDirection" AllowPaging="true" Height="315">
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
. ..
</SfGrid>
}
@code{
public string Mode { get; set; }
public bool canchange { get; set; }
[Parameter]
public RowDirection GridRowDirection { get; set; }
public List<Order> Orders { get; set; }
. ..
}
|
Thank you! I shall try it out and let you know how it goes.
Can't this be added as a feature?
to automatically change the RowRenderingMode and set it to vertical on small screens?
This should be a default feature because
the vertical mode is suitable for small screens and the horizontal is suitable for larger screens.
Hi Medupi,
Greetings from Syncfusion support.
We have checked your requirement and we would like to inform that we already considered as improvement and will be included in our upcoming 2022 volume 2 release.
Please find the feedback link here.
Please get back to us if you need further assistance.
Regards,
Naveen Palanivel.
Thank you!
Hi Medupi,
Welcome
Regards,
Naveen Palanivel.
