Make Datagrid scroll automatically

[Amanda]

Hello,

I am using the SfGrid component at my Blazor project and I want to make the SfGrid scroll automatically at a specific row by the click of a button.

Any ideas on how to implement this automatic scroll?

Thanks in advance!

[Rahul Narayanasamy]

Hi Amanda,

Greetings from Syncfusion.

You want to scroll the Grid content to a particular index and view the records. If yes, you can achieve your requirement by using the ScrollIntoViewAsync method of the Grid. To scroll the grid content in the horizontal direction set the EnableVirtualization and EnableColumnVirtualization properties as true. To scroll the grid content in the vertical direction, set the EnableVirtualization property as true.

Reference:

https://blazor.syncfusion.com/documentation/datagrid/virtualization#scroll-the-content-by-external-button

Please let us know if you have any concerns.

Regards,

Rahul

[Sandip Mane]

Hi,

I have a similar requirement and tried suggestion from this thread. But, when I use  EnableVirtualization and EnableColumnVirtualization properties as true, my grid starts behaving weirdly like showing blank rows etc. Blazor documentation for enabling virtualization lists few limitations and there could be 1 or more limitations causing my grid not work as expected.

Basically, I have grid with lot of columns with first column frozen and hence have a horizontal scrollbar to allow user to scroll horizontally across columns and also have a vertical scrollbar to scroll across rows. I have a requirement to update entire data displayed in the grid when user selects radio buttons outside grid. I have achieved this condition by changing grid's datasource in radio button change event and it works by showing new data in the grid. But, both scrollbars do not go back to their initial position and hence it confuses end user. Please 

[Prathap Senthil]

Before proceeding with the reported requirement, we need some additional clarification from your end. Please share the following details to help us proceed further:

• Could you please share the grid code snippet along with the model class?
• Could you provide a simple sample that replicates the issue with duplicate data, or attempt to reproduce the issue using the attached sample?
• Could you please video demonstration of the issue with replication steps ?

Above-requested details will be very helpful in validating the reported

Sample: https://blazorplayground.syncfusion.com/embed/VjBIZqrFUhYMiTkD?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Sandip Mane]

Hello,

Please see attached zip that contains required files to replicate the problem.

PerfDataServiceTest.cs - this file contains a singleton class used to load test data.

Test3.razor - page that displays grid. Grid uses  PerfDataServiceTest data to display data in the table.

Grid displays radio buttons at grid top and whole grid data gets refreshed upon selection of a new radio button option. This works as expected.

Problem - When data is displayed in the grid, if user scrolls data horizontally to the right, and selects new radio button, then data is refreshed but scrollbars (both at top and bottom of grid) do not come to their original leftmost position.

When I tried with  EnableVirtualization option in the grid, grid data display is not consistent (you can test by going to different page numbers, scrolling up/down, scrolling left/right etc.).

Attachment: SyncfusionScrollbarProblem_32b8eb16.zip

[Sandip Mane]

any update please

[Prathap Senthil]

Based on the reported issue, we would like to clarify that when the data source is changed dynamically while horizontally scrolling to the right, the scroll position is retained by default. This is the expected behavior. However, if you want the Grid to scroll back to the original leftmost position, we recommend using a boolean property to destroy and re-render the Grid to achieve this requirement. Please refer to the provided code snippet and sample for more details.

<ContentTemplate>

                                                          <div id="scrollWrapper">

                                                                                                    

                                                                        @if(Gridren)

                                                                        {

                                                                                      <div id="wrapper1">

                                                                                                     <div id="div1"></div>

                                                                                      </div>

 

                                                                                      <SfGrid TValue="ExpandoObject" ID="Grid" @ref="Grid" Height="100%" Width="100%" RowHeight="30" AllowSorting="true" AllowPaging="true" AllowFiltering="true" AllowSelection="true" EnableStickyHeader="true" Toolbar=@Toolbaritems>

                                                                                                     <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

                                                                                                     <GridPageSettings PageSize="65"></GridPageSettings>

                                                                                                     <GridEvents DataBound="bound" OnActionComplete="ActionComplete" TValue="ExpandoObject" RowSelecting="RowSelecting"></GridEvents>

                                                                                                     <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>

                                                                                                     <GridColumns>

                                                                                                                   <GridColumn Field="1" HeaderText="&nbsp;&nbsp;&nbsp;1" HeaderTextAlign="TextAlign.Left" TextAlign="TextAlign.Left" IsPrimaryKey="false" ValidationRules="@(new ValidationRules{ Required=true, Number=false})" Width="120" AllowEditing="false" IsFrozen="true" Freeze="FreezeDirection.Left" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="2" HeaderText="2" TextAlign="TextAlign.Center" ValidationRules="@(new ValidationRules { Required=true, Number=false})" Width="70" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="3" HeaderText="3" TextAlign="TextAlign.Center" ValidationRules="@(new ValidationRules { Required=true, Number=false})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="4" HeaderText="4" TextAlign="TextAlign.Center" Format="N4" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="65" AllowEditing="false" AllowSorting="false" AllowFiltering="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="5" HeaderText="5" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="6" HeaderText="6" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="7" HeaderText="7" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="8" HeaderText="8" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="9" HeaderText="9" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="10" HeaderText="10" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="11" HeaderText="11" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="12" HeaderText="12" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="12" HeaderText="13" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="14" HeaderText="14" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="15" HeaderText="15" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="16" HeaderText="16" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="17" HeaderText="17" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="18" HeaderText="18" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                                   <GridColumn Field="19" HeaderText="19" TextAlign="TextAlign.Center" Format="N2" ValidationRules="@(new ValidationRules { Required=true, Number=true})" Width="60" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "style", "white-space: normal;" } })"></GridColumn>

                                                                                                     </GridColumns>

                                                                                      </SfGrid>

                                                                        }

                                                          </div>

private RenderFragment AditionalOps => @<div>

              <SfRadioButton TChecked="string" Label="E" Name="SchemeTypeOptions" CssClass="e-info" Value="e" @bind-Checked="@schemeTypeCheckedValue" onchange="@OnSchemeTypeRadioButtonChange">

                             </SfRadioButton>

              <SfRadioButton TChecked="string" Label="H" Name="SchemeTypeOptions" CssClass="e-info" Value="h" @bind-Checked="@schemeTypeCheckedValue" onchange="@OnSchemeTypeRadioButtonChange">

                             </SfRadioButton>

              <SfRadioButton TChecked="string" Label="D" Name="SchemeTypeOptions" CssClass="e-info" Value="d" @bind-Checked="@schemeTypeCheckedValue" onchange="@OnSchemeTypeRadioButtonChange">

                             </SfRadioButton>

              <SfRadioButton TChecked="string" Label="S" Name="SchemeTypeOptions" CssClass="e-info" Value="s" @bind-Checked="@schemeTypeCheckedValue" onchange="@OnSchemeTypeRadioButtonChange">

                             </SfRadioButton>

              <SfRadioButton TChecked="string" Label="O" Name="SchemeTypeOptions" CssClass="e-info" Value="o" @bind-Checked="@schemeTypeCheckedValue" onchange="@OnSchemeTypeRadioButtonChange">

                             </SfRadioButton>

              </div>

;
              private async void OnSchemeTypeRadioButtonChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)

              {

                             schemeTypeCheckedValue = args.Value as string ?? string.Empty;

                             //dataTable = await GetData();

                             this.Gridren =false;

                             isFirsttimerenderfortopscrollbar = true;

                             await Task.Yield();

 

                             dataTable = PerfDataServiceTest.GetMFPerfData(schemeTypeCheckedValue);

                             DataSource = ToQueryableCollection(dataTable);

                            

                             this.Gridren = true;

                             await InvokeAsync(StateHasChanged);

 

 

              }

Attachment: DataGridDynamicDataSource_3ecf095f.zip