Selection
diff --git a/blazor/datagrid/images/blazor-datagrid-frozen-column-virtualization.gif b/blazor/datagrid/images/blazor-datagrid-frozen-column-virtualization.gif
deleted file mode 100644
index d267aa5f2d..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-frozen-column-virtualization.gif and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-infinite-scrolling-cachemode.gif b/blazor/datagrid/images/blazor-datagrid-infinite-scrolling-cachemode.gif
deleted file mode 100644
index d53cda1405..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-infinite-scrolling-cachemode.gif and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-infinite-scrolling.gif b/blazor/datagrid/images/blazor-datagrid-infinite-scrolling.gif
deleted file mode 100644
index 222c353b3e..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-infinite-scrolling.gif and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-mask-row-virtualization.gif b/blazor/datagrid/images/blazor-datagrid-mask-row-virtualization.gif
deleted file mode 100644
index 4826de11ad..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-mask-row-virtualization.gif and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-scroll-virtualizationcontent.gif b/blazor/datagrid/images/blazor-datagrid-scroll-virtualizationcontent.gif
deleted file mode 100644
index 318bde560c..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-scroll-virtualizationcontent.gif and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-scrollbar-customization.png b/blazor/datagrid/images/blazor-datagrid-scrollbar-customization.png
deleted file mode 100644
index e7f9bba261..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-scrollbar-customization.png and /dev/null differ
diff --git a/blazor/datagrid/images/blazor-datagrid-sticky-header.gif b/blazor/datagrid/images/blazor-datagrid-sticky-header.gif
deleted file mode 100644
index f131e484e1..0000000000
Binary files a/blazor/datagrid/images/blazor-datagrid-sticky-header.gif and /dev/null differ
diff --git a/blazor/datagrid/infinite-scrolling.md b/blazor/datagrid/infinite-scrolling.md
index dce8339510..ecfc79a04e 100644
--- a/blazor/datagrid/infinite-scrolling.md
+++ b/blazor/datagrid/infinite-scrolling.md
@@ -1,224 +1,304 @@
---
layout: post
-title: Infinite Scrolling in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Infinite Scrolling in Syncfusion Blazor DataGrid component and much more details.
+title: Infinite Scrolling in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Infinite Scrolling in Syncfusion Blazor DataGrid and much more details.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Infinite Scrolling in Blazor DataGrid
+# Infinite scroll in Blazor DataGrid
-The Infinite Scrolling feature in the DataGrid is a powerful tool for seamlessly handling extensive data sets without compromising grid performance. It operates on a "load-on-demand" concept, ensuring that data is fetched only when needed. In the default infinite scrolling mode, a new block of data is loaded each time the scrollbar reaches the end of the vertical scroller. This approach significantly enhances the user experience when working with large data collections in the Blazor DataGrid.
+The infinite scrolling feature in the Syncfusion Blazor DataGrid is a powerful tool for seamlessly handling extensive data sets without compromising Grid performance. It operates on a “load-on-demand” concept, ensuring that data is fetched only when needed. In the default infinite scrolling mode, a new block of data is loaded each time the scrollbar reaches the end of the vertical scroller. This approach significantly enhances the user experience when working with large data collections in the Blazor Grid.
-In this mode, a block of data accumulates every time the scrollbar reaches the end of the scroller. To clarify, in this context, a "block" represents the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) of the Grid. If the `PageSize` is not explicitly specified, the Grid will automatically calculate it based on the grid viewport height and row height.
+In this mode, a block of data accumulates every time the scrollbar reaches the end of the scroller. To clarify, in this context, a **block** represents the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) of the Grid. If the `PageSize` is not explicitly specified, the Grid will automatically calculate it based on the Grid viewport height and row height.
-To enable infinite scrolling, you need to define
-[EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) as true and content height by [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property.
+To enable infinite scrolling, you need to define [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) as **true** and set the content height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property.
-N> In this feature, the Grid will not initiate a new data request when revisiting the same page.
+> * In this feature, the Grid will not initiate a new data request when revisiting the same page.
+> * The `Height` property must be specified when enabling `EnableInfiniteScrolling`.
-N> The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property must be specified when enabling `EnableInfiniteScrolling`.
+The following is an example that demonstrates how to enable infinite scroll in the Grid:
-```csharp
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
+
-
-
-
-
-
+
+
+
+
+
-@code {
- public List Orders { get; set; }
- public SfGrid Grid { get; set; }
+@code{
+ public List TaskData { get; set; }
protected override void OnInitialized()
{
- Orders = GetAllRecords();
- }
- public List GetAllRecords()
+ TaskData = TaskDetails.GenerateData(5000);
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="TaskDetails.cs" %}
+
+public class TaskDetails
+{
+ public static List GenerateData(int count)
{
- List data = new List();
- int count = 0;
- int id = 10;
- for (int i = 0; i < 200; i++)
+ var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" };
+ var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
+ var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" };
+ var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" };
+ var random = new Random();
+ var result = new List();
+ // Generate random data.
+ for (int i = 0; i < count; i++)
{
- data.Add(new Order() { OrderID = count + 1, CustomerID = "ANTON", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2, ShipCountry = "USA" });
- data.Add(new Order() { OrderID = count + 2, CustomerID = "BOLID", OrderDate = new DateTime(1994, 04, 04), Freight = 26.7 * 2, ShipCountry = "UK" });
- data.Add(new Order() { OrderID = count + 3, CustomerID = "BLONP", OrderDate = new DateTime(1993, 03, 10), Freight = 27.7 * 2, ShipCountry = "RUSSIA" });
- data.Add(new Order() { OrderID = count + 4, CustomerID = "ANATR", OrderDate = new DateTime(1992, 02, 14), Freight = 28.7 * 2, ShipCountry = "CHINA" });
- data.Add(new Order() { OrderID = count + 5, CustomerID = "ALFKI", OrderDate = new DateTime(1991, 01, 18), Freight = 29.7 * 2, ShipCountry = "JAPAN" });
- count += 5;
- id += 5;
+ result.Add(new TaskDetails
+ {
+ TaskID = i + 1,
+ Engineer = names[random.Next(names.Count)],
+ Designation = designations[random.Next(designations.Count)],
+ Estimation = hours[random.Next(hours.Count)],
+ Status = statusValues[random.Next(statusValues.Count)]
+ });
}
- return data;
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ return result;
}
+ public int TaskID { get; set; }
+ public string Engineer { get; set; }
+ public string Designation { get; set; }
+ public int Estimation { get; set; }
+ public string Status { get; set; }
}
-```
-The following GIF represents the infinite scrolling functionality in DataGrid
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjreXMrOAPkHeOht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Number of blocks rendered during initial loading
-The number of blocks to be initially rendered when the Grid is loaded. Each block corresponds to a page size of the Grid, resulting in the rendering of a certain number of row elements determined by multiplying the initial block size with the page size.
+The number of blocks to be initially rendered when the Syncfusion Blazor DataGrid is loaded. Each block corresponds to a page size of the Grid, resulting in the rendering of a certain number of row elements determined by multiplying the initial block size by the page size.
-You can define the initial loading pages count by using [InitialBlocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) property of [GridInfiniteScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) class. By default, this property loads three pages during the initial rendering. Subsequently, additional data is buffered and loaded based on either the page size or the number of rows rendered within the provided height.
+You can define the initial loading page count by using the [InitialBlocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) property of the [GridInfiniteScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) class. By default, this property loads three pages during the initial rendering. Subsequently, additional data is buffered and loaded based on either the page size or the number of rows rendered within the provided height.
-In the below demo, `InitialBlocks` property value is changed as 4 instead of 3.
-```csharp
+The following is an example of how you can use the `InitialBlocks` property to set the initial loading pages based on **DropDownList** input:
-@using Syncfusion.Blazor.Grids
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-
-
-
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
@code {
- public List Orders { get; set; }
- public SfGrid Grid { get; set; }
+ public SfGrid Grid { get; set; }
+ public List TaskData { get; set; }
protected override void OnInitialized()
{
- Orders = GetAllRecords();
+ TaskData = TaskDetails.GenerateData(1000);
}
- public List GetAllRecords()
+ public int InitialBlockValue { get; set; }
+ public class Rows
{
- List data = new List();
- int count = 0;
- int id = 10;
- for (int i = 0; i < 200; i++)
- {
- data.Add(new Order() { OrderID = count + 1, CustomerID = "ANTON", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2, ShipCountry = "USA" });
- data.Add(new Order() { OrderID = count + 2, CustomerID = "BOLID", OrderDate = new DateTime(1994, 04, 04), Freight = 26.7 * 2, ShipCountry = "UK" });
- data.Add(new Order() { OrderID = count + 3, CustomerID = "BLONP", OrderDate = new DateTime(1993, 03, 10), Freight = 27.7 * 2, ShipCountry = "RUSSIA" });
- data.Add(new Order() { OrderID = count + 4, CustomerID = "ANATR", OrderDate = new DateTime(1992, 02, 14), Freight = 28.7 * 2, ShipCountry = "CHINA" });
- data.Add(new Order() { OrderID = count + 5, CustomerID = "ALFKI", OrderDate = new DateTime(1991, 01, 18), Freight = 29.7 * 2, ShipCountry = "JAPAN" });
- count += 5;
- id += 5;
- }
- return data;
+ public int Text { get; set; }
+ public int Value { get; set; }
+ }
+ private List DropDownData = new List
+ {
+ new Rows() { Text = 1, Value = 1 },
+ new Rows() { Text = 2, Value = 2 },
+ new Rows() { Text = 3, Value = 3 },
+ new Rows() { Text = 4, Value = 4 },
+ new Rows() { Text = 5, Value = 5 },
+ new Rows() { Text = 6, Value = 6 },
+ new Rows() { Text = 7, Value = 7 },
+ };
+ public async Task ValueChanged(ChangeEventArgs Args)
+ {
+ InitialBlockValue = Args.Value;
+ await Grid.Refresh();
}
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="TaskDetails.cs" %}
- public class Order
+public class TaskDetails
+{
+ public static List GenerateData(int count)
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" };
+ var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
+ var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" };
+ var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" };
+ var random = new Random();
+ var result = new List();
+ // Generate random data.
+ for (int i = 0; i < count; i++)
+ {
+ result.Add(new TaskDetails
+ {
+ TaskID = i + 1,
+ Engineer = names[random.Next(names.Count)],
+ Designation = designations[random.Next(designations.Count)],
+ Estimation = hours[random.Next(hours.Count)],
+ Status = statusValues[random.Next(statusValues.Count)]
+ });
+ }
+ return result;
}
+ public int TaskID { get; set; }
+ public string Engineer { get; set; }
+ public string Designation { get; set; }
+ public int Estimation { get; set; }
+ public string Status { get; set; }
}
-```
-## Efficient data caching and DOM management in grid cache mode
+{% endhighlight %}
+{% endtabs %}
-In Grid cache mode, cached data blocks are reused when revisiting them, reducing the need for frequent data requests while navigating the same block. This mode also manages DOM row elements based on the [MaximumBlocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) count value. If this limit is exceeded, it removes a block of row elements to create new rows.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDheZMAZCHNIhdIg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-To enable cache mode, you need to define [EnableCache](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) property of `GridInfiniteScrollSettings` class as **true**.
+## Efficient data caching and DOM management in Grid cache mode
-To enable maximum blocks, you need to define `MaximumBlocks` count of [GridInfiniteScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) class, By default this property value is 3.
+In Syncfusion Blazor DataGrid cache mode, cached data blocks are reused when revisiting them, reducing the need for frequent data requests while navigating the same block. This mode also manages DOM row elements based on the [GridInfiniteScrollSettings.MaximumBlocks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html#Syncfusion_Blazor_Grids_GridInfiniteScrollSettings_MaximumBlocks) count value. If this limit is exceeded, it removes a block of row elements to create new rows.
-In the below demo, the `EnableCache` in `GridInfiniteScrollSettings` property is enabled, here three pages of records get loaded for each request.
-```csharp
+To enable cache mode, define the [EnableCache](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html#Syncfusion_Blazor_Grids_GridInfiniteScrollSettings_EnableCache) property of [GridInfiniteScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridInfiniteScrollSettings.html) as **true**.
-@using Syncfusion.Blazor.Grids
+To configure the maximum blocks, set the `MaximumBlocks` count of `GridInfiniteScrollSettings`. By default, this property value is 3.
+
+The following example demonstrates how to enable or disable cache mode in infinite scrolling of the Grid based on the [Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp) [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-
-
-
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-@code {
- public List Orders { get; set; }
- public SfGrid Grid { get; set; }
+@code{
+ public SfGrid Grid { get; set; }
+ public List TaskData { get; set; }
protected override void OnInitialized()
{
- Orders = GetAllRecords();
+ TaskData = TaskDetails.GenerateData(1000);
}
-
- public List GetAllRecords()
+ public bool IsEnabled { get; set; }
+ private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
{
- List data = new List();
- int count = 0;
- int id = 10;
- for (int i = 0; i < 200; i++)
- {
- data.Add(new Order() { OrderID = count + 1, CustomerID = "ANTON", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2, ShipCountry = "USA" });
- data.Add(new Order() { OrderID = count + 2, CustomerID = "BOLID", OrderDate = new DateTime(1994, 04, 04), Freight = 26.7 * 2, ShipCountry = "UK" });
- data.Add(new Order() { OrderID = count + 3, CustomerID = "BLONP", OrderDate = new DateTime(1993, 03, 10), Freight = 27.7 * 2, ShipCountry = "RUSSIA" });
- data.Add(new Order() { OrderID = count + 4, CustomerID = "ANATR", OrderDate = new DateTime(1992, 02, 14), Freight = 28.7 * 2, ShipCountry = "CHINA" });
- data.Add(new Order() { OrderID = count + 5, CustomerID = "ALFKI", OrderDate = new DateTime(1991, 01, 18), Freight = 29.7 * 2, ShipCountry = "JAPAN" });
- count += 5;
- id += 5;
- }
- return data;
+ IsEnabled = args.Checked;
+ Grid.Refresh();
}
+}
+
+{% endhighlight %}
- public class Order
+{% highlight cs tabtitle="TaskDetails.cs" %}
+
+public class TaskDetails
+{
+ public static List GenerateData(int count)
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" };
+ var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
+ var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" };
+ var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" };
+ var random = new Random();
+ var result = new List();
+ // Generate random data.
+ for (int i = 0; i < count; i++)
+ {
+ result.Add(new TaskDetails
+ {
+ TaskID = i + 1,
+ Engineer = names[random.Next(names.Count)],
+ Designation = designations[random.Next(designations.Count)],
+ Estimation = hours[random.Next(hours.Count)],
+ Status = statusValues[random.Next(statusValues.Count)]
+ });
+ }
+ return result;
}
+ public int TaskID { get; set; }
+ public string Engineer { get; set; }
+ public string Designation { get; set; }
+ public int Estimation { get; set; }
+ public string Status { get; set; }
}
-```
-The following GIF represents the infinite scrolling with cache mode functionality in DataGrid
-
+{% endhighlight %}
+{% endtabs %}
-## Limitations
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZreNsUXVSieZxOY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-* Due to the element height limitation in browsers, the maximum number of records loaded by the grid is limited due to the browser capability.
+## Limitations
+* Due to the element height limitation in browsers, the maximum number of records loaded by the Grid is limited due to the browser capability.
+* It is necessary to set a static height for the component or its parent container when using infinite scrolling. The 100% height will work only if the component height is set to 100%, and its parent container has a static height.
* The combined height of the initially loaded rows must exceed the height of the viewport.
-
-* Infinite scrolling is not compatible with batch editing, detail template and hierarchy features.
-
-* Drag selection is only compatible with the current viewport data items in the grid when infinite scrolling is enabled.
-
+* When infinite scrolling is activated, compatibility for copy-paste and drag-and-drop operations is limited to the data items visible in the current viewport of the Grid.
* Cell selection will not be persisted in cache mode.
-
-* In normal grouping, infinite scrolling is not supported for child items when performing expand and collapse actions on caption rows. All child items are loaded when the caption rows are expanded or collapsed in grid.
-
-* The aggregated information and total group items are displayed based on the current view items.
-
-* In lazy load grouping with infinite scrolling, cache mode is not supported, and infinite scrolling mode is only available for parent-level caption rows in lazy load grouping with infinite scrolling.
-
-* Programmatic selection using the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) and [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Int32_System_Nullable_System_Boolean__) method is not supported in infinite scrolling.
+* The group records cannot be collapsed in cache mode.
+* Lazy load grouping with infinite scrolling does not support cache mode, and the infinite scrolling mode is exclusively applicable to parent-level caption rows in this scenario.
+* In normal grouping, infinite scrolling is not supported for child items when performing expand and collapse actions on caption rows. All child items are loaded when the caption rows are expanded or collapsed in Grid.
+* The aggregated information and total group items are displayed based on the current view items. To get these information regardless of the view items.
+* Programmatic selection using the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) and [SelectRowAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowAsync_System_Int32_System_Nullable_System_Boolean__) method is not supported in infinite scrolling.
+* Infinite scrolling is not compatible with the following features:
+ 1. Batch editing
+ 2. Normal editing
+ 3. Row template
+ 4. Row virtual scrolling
+ 5. Detail template
+ 6. Hierarchy features
+ 7. Autofill
+* Limitations of row drag and drop with infinite scrolling
+ 1. In cache mode, the Grid refreshes automatically if the content's **tr** element count exceeds the cache limit of the Grid's content after the drop action.
+ 2. When performing row drag and drop with lazy load grouping, the Grid will refresh automatically.
+ 3. In remote data, changes are applied only in the UI. They will be lost once the Grid is refreshed. To restore them, you need to update the changes in your database. By using the [RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event, you can send the request to the server and apply the changes in your database. After this, you need to refresh the Grid to show the updated data.
## See also
-* [Infinite scrolling with Lazy load grouping in DataGrid](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-infinite-scrolling)
+* [Infinite scrolling with Lazy load grouping in Grid](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-infinite-scrolling)
\ No newline at end of file
diff --git a/blazor/datagrid/scrolling.md b/blazor/datagrid/scrolling.md
index 44c1faa205..f3bac77af7 100644
--- a/blazor/datagrid/scrolling.md
+++ b/blazor/datagrid/scrolling.md
@@ -1,206 +1,392 @@
---
layout: post
-title: Scrolling in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Scrolling in Syncfusion Blazor DataGrid component and much more details.
+title: Scrolling in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Scrolling in Syncfusion Blazor DataGrid and much more details.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Scrolling in Blazor DataGrid Component
+# Scrolling in Blazor DataGrid
- The scrollbar will be displayed in the datagrid when content exceeds the element [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) or [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height). The vertical and horizontal scrollbars will be displayed based on the following criteria:
+The scrolling feature in the Syncfusion Blazor DataGrid allows you to navigate through content that extends beyond the visible area of the Grid. It provides scrollbars that are automatically displayed when the content exceeds the specified `Width` or `Height` of the Grid element. This feature is useful when you have a large amount of data or when the content needs to be displayed within a limited space. The vertical and horizontal scrollbars are displayed based on the following criteria:
-* The vertical scrollbar appears when the total height of rows present in the datagrid exceeds its element height.
-* The horizontal scrollbar appears when the sum of columns width exceeds the datagrid element width.
-* The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) are used to set the datagrid height and width, respectively.
+* The vertical scrollbar appears when the total height of rows in the Grid exceeds its element height.
+* The horizontal scrollbar appears when the total width of columns exceeds the Grid element width.
+* The [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) properties are used to set the Grid's height and width, respectively.
-N> The default value for [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) is **auto**.
+> The default values for `Height` and `Width` are `auto`.
## Set width and height
-To specify the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) of the scroller in the pixel, set the pixel value to a number.
+The Syncfusion Blazor DataGrid offers a straightforward method to tailor the width and height of the scroller to meet your specific requirements. This is particularly useful when you want precise control over the dimensions of the scroller. To achieve this, you can use pixel values as numbers for the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) properties of the Grid.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-```cshtml
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
-
+
+
+
+
+
+
@code{
- public List Orders { get; set; }
-
+ public List OrderData { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)]
- }).ToList();
+ OrderData = OrderDetails.GetAllRecords();
}
+}
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
- }
+{% endhighlight %}
+
+{% highlight cs tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails() { }
+ public OrderDetails(int OrderID, string CustomerId, int EmployeeId, string ShipCity, string ShipName, string ShipCountry)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", 5, "Reims", "Vins et alcools Chevalier", "Australia"));
+ order.Add(new OrderDetails(10249, "TOMSP", 6, "Münster", "Toms Spezialitäten", "Australia"));
+ order.Add(new OrderDetails(10250, "HANAR", 4, "Rio de Janeiro", "Hanari Carnes", "United States"));
+ order.Add(new OrderDetails(10251, "VICTE", 3, "Lyon", "Victuailles en stock", "Australia"));
+ order.Add(new OrderDetails(10252, "SUPRD", 4, "Charleroi", "Suprêmes délices", "United States"));
+ order.Add(new OrderDetails(10253, "HANAR", 3, "Rio de Janeiro", "Hanari Carnes", "United States"));
+ order.Add(new OrderDetails(10254, "CHOPS", 5, "Bern", "Chop-suey Chinese", "Switzerland"));
+ order.Add(new OrderDetails(10255, "RICSU", 9, "Genève", "Richter Supermarkt", "Switzerland"));
+ order.Add(new OrderDetails(10256, "WELLI", 3, "Resende", "Wellington Importadora", "Brazil"));
+ order.Add(new OrderDetails(10257, "HILAA", 4, "San Cristóbal", "HILARION-Abastos", "Venezuela"));
+ order.Add(new OrderDetails(10258, "ERNSH", 1, "Graz", "Ernst Handel", "Austria"));
+ order.Add(new OrderDetails(10259, "CENTC", 4, "México D.F.", "Centro comercial Moctezuma", "Mexico"));
+ order.Add(new OrderDetails(10260, "OTTIK", 4, "Köln", "Ottilies Käseladen", "Germany"));
+ order.Add(new OrderDetails(10261, "QUEDE", 4, "Rio de Janeiro", "Que Delícia", "Brazil"));
+ order.Add(new OrderDetails(10262, "RATTC", 8, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
}
-```
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryNWBTfUaCEgqf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Responsive with parent container
-Specify the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) as **100%** to make the datagrid element fill its parent container. Setting the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) to **100%** requires the datagrid parent element to have explicit height or you can use calc function to set explicit height based on the browser layout.
+The Syncfusion Blazor DataGrid enables you to create a responsive layout by allowing it to fill its parent container and automatically adjust its size based on the available space and changes in the container's dimensions. This feature is particularly useful for building applications that need to adapt to various screen sizes and devices.
+
+To achieve this, specify the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) properties of the Grid as 100%. However, note that setting the height property to 100% requires the Grid's parent element to have an explicitly defined height.
+
+In the following example, the parent container has explicit height and width set, and the Grid container's height and width are both set to 100%. This ensures that the Grid adjusts its size responsively based on the dimensions of the parent container:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-```cshtml
@using Syncfusion.Blazor.Grids
-
-@*Change the rem values based on your browser page layout*@
-
-
-
-
-
-
-
-
-
+
@*Change the rem values based on your browser page layout*@
+
+
+
+
+
+
+
+
@code{
- public List Orders { get; set; }
-
+ public List LazyLoadData { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)]
- }).ToList();
+ LazyLoadData = LazyLoadDetails.CreateLazyLoadData();
}
+}
+
+{% endhighlight %}
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+{% highlight cs tabtitle="LazyLoadDetails.cs" %}
+
+public class LazyLoadDetails
+{
+ public static List CreateLazyLoadData()
+ {
+ var lazyLoadData = new List();
+ var customerIds = new[] { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "HANAR", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", "OTTIK", "QUEDE", "RATTC", "FOLKO", "BLONP", "WARTH" };
+ var shipAddresses = new[] { "507 - 20th Ave. E.\nApt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill" };
+ var freights = new[] { 10, 24, 12, 48, 36, 102, 18 };
+ int orderId = 10248;
+ var random = new Random();
+ for (int i = 0; i < 50; i++)
+ {
+ lazyLoadData.Add(new LazyLoadDetails
+ {
+ OrderID = orderId + i,
+ CustomerID = customerIds[random.Next(customerIds.Length)],
+ ShipAddress = shipAddresses[random.Next(shipAddresses.Length)],
+ Freight = freights[random.Next(freights.Length)]
+ });
+ }
+ return lazyLoadData;
}
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipAddress { get; set; }
+ public double Freight { get; set; }
}
-```
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLIjMBcAgEnKHGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Sticky header
-You can make the Grid column headers remain fixed while scrolling by using the `EnableStickyHeader` property.
+The Syncfusion Blazor DataGrid provides a feature that allows column headers to remain fixed while scrolling, ensuring they stay visible at all times. To achieve this, you can use the [EnableStickyHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableStickyHeader) property by setting it to **true**.
-In the following sample, the Grid headers will be sticky while scrolling the Grid’s parent div element.
+In the below demo, the Grid headers remain sticky while scrolling within the Grid's parent div element.
-```csharp
-@using Syncfusion.Blazor.Grids
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-
You can make Grid column headers remain fixed while scrolling its first scrollable parent element by using the EnableStickyHeader property.
@code{
- public List Orders { get; set; }
+ private SfGrid Grid;
+ public List LazyLoadData { get; set; }
+ protected override void OnInitialized()
+ {
+ LazyLoadData = LazyLoadDetails.CreateLazyLoadData();
+ }
+ public bool isStickyHeaderEnabled;
+ private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
+ {
+ isStickyHeaderEnabled = args.Checked;
+ Grid.Refresh();
+ }
+}
+{% endhighlight %}
+
+{% highlight cs tabtitle="LazyLoadDetails.cs" %}
+
+public class LazyLoadDetails
+{
+ public static List CreateLazyLoadData()
+ {
+ var lazyLoadData = new List();
+ var customerIds = new[] { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "HANAR", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", "OTTIK", "QUEDE", "RATTC", "FOLKO", "BLONP", "WARTH" };
+ var shipAddresses = new[] { "507 - 20th Ave. E.\nApt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill" };
+ var freights = new[] { 10, 24, 12, 48, 36, 102, 18 };
+ int orderId = 10248;
+ var random = new Random();
+ for (int i = 0; i < 50; i++)
+ {
+ lazyLoadData.Add(new LazyLoadDetails
+ {
+ OrderID = orderId + i,
+ CustomerID = customerIds[random.Next(customerIds.Length)],
+ ShipAddress = shipAddresses[random.Next(shipAddresses.Length)],
+ Freight = freights[random.Next(freights.Length)]
+ });
+ }
+ return lazyLoadData;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipAddress { get; set; }
+ public double Freight { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLIZfLlyiVvXGhD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Scroll to selected row
+
+The Syncfusion Blazor DataGrid allows you to scroll the Grid content to the position of the selected row, ensuring that the selected row is automatically brought into view. This feature is particularly useful when dealing with a large dataset and maintaining focus on the selected row. To achieve this, you can utilize the [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) method provided by the Grid by passing the column index or row index as a parameter..
+
+The following example demonstrates how to use the `ScrollIntoViewAsync` method to scroll to the selected row by passing the selected row index as a parameter:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code{
+ private SfGrid Grid;
+ public List LazyLoadData { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 100).Select(x => new Order()
+ LazyLoadData = LazyLoadDetails.CreateLazyLoadData();
+ }
+ public string SelectedValue { get; set; }
+ public class Rows
+ {
+ public string Text { get; set; }
+ public string Value { get; set; }
+ }
+ private List DropDownData = new List
+ {
+ new Rows() { Text = "Select count" },
+ new Rows() { Text = "10", Value = "10" },
+ new Rows() { Text = "20", Value = "20" },
+ new Rows() { Text = "30", Value = "30" },
+ new Rows() { Text = "80", Value = "80" },
+ new Rows() { Text = "100", Value = "100" },
+ new Rows() { Text = "200", Value = "200" },
+ new Rows() { Text = "232", Value = "232" },
+ new Rows() { Text = "300", Value = "300" },
+ new Rows() { Text = "500", Value = "500" },
+ new Rows() { Text = "800", Value = "800" },
+ new Rows() { Text = "820", Value = "820" },
+ new Rows() { Text = "920", Value = "920" },
+ new Rows() { Text = "990", Value = "990" }
+ };
+ public async Task ValueChanged(ChangeEventArgs Args)
+ {
+ if (int.TryParse(SelectedValue, out int rowIndex))
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)]
- }).ToList();
+ await Grid.SelectRowAsync(rowIndex);
+ await Grid.ScrollIntoViewAsync(rowIndex);
+ }
}
+ public void RowselectedHandler(RowSelectEventArgs args)
+ {
+ Grid.PreventRender(false);
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="LazyLoadDetails.cs" %}
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+public class LazyLoadDetails
+{
+ public static List CreateLazyLoadData()
+ {
+ var lazyLoadData = new List();
+ var customerIds = new[] { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "HANAR", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", "OTTIK", "QUEDE", "RATTC", "FOLKO", "BLONP", "WARTH" };
+ var shipAddresses = new[] { "507 - 20th Ave. E.\nApt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill" };
+ var freights = new[] { 10, 24, 12, 48, 36, 102, 18 };
+ int orderId = 10248;
+ var random = new Random();
+ for (int i = 0; i < 1000; i++)
+ {
+ lazyLoadData.Add(new LazyLoadDetails
+ {
+ OrderID = orderId + i,
+ CustomerID = customerIds[random.Next(customerIds.Length)],
+ ShipAddress = shipAddresses[random.Next(shipAddresses.Length)],
+ Freight = freights[random.Next(freights.Length)]
+ });
+ }
+ return lazyLoadData;
}
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipAddress { get; set; }
+ public double Freight { get; set; }
}
-```
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthyZpBboVNkPPvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+## Customize the appearance of scroll bar
-## Customize grid scroll bar
+By default, the Syncfusion Blazor DataGrid uses the native browser scrollbar for both horizontal and vertical scrolling when the content exceeds the visible area of the Grid. While functional, native scrollbars may not always match the desired UI aesthetics of your application.
-The Grid component uses the native browser scroll bar to scroll through the content when the content is larger than the Grid. Refer to [this](https://css-tricks.com/almanac/properties/s/scrollbar/) to customize the appearance of the scroll bar.
+You can customize the scrollbar appearance using standard CSS properties, depending on browser support. This allows you to create a more visually consistent and branded user interface. Refer to this [CSS Tricks](https://css-tricks.com/almanac/properties/s/scrollbar/) article for detailed information and examples of styling scrollbars across different browsers.
-By referring to the above link, we have customized the appearance of the scroll bar in the following sample.
+The following example demonstrates how to apply custom scrollbar styles to the Grid by referring to the link above:
-N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-customize-default-scrollbar).
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-```csharp
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
-
+
+
+
+
+
@code{
- public List Orders { get; set; }
-
+ public List OrderData { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)]
- }).ToList();
- }
-
- public class Order {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ OrderData = OrderDetails.GetAllRecords();
}
}
-
-```
+{% endhighlight %}
+
+{% highlight cs tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+
+ public OrderDetails() { }
+
+ public OrderDetails(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight, string ShipCountry)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ var customerIds = new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" };
+ var countries = new string[] { "USA", "UK", "JAPAN" };
+ var rand = new Random();
+
+ order = Enumerable.Range(1, 75).Select(x => new OrderDetails(
+ 1000 + x,
+ customerIds[rand.Next(customerIds.Length)],
+ DateTime.Now.AddDays(-x),
+ 2.1 * x,
+ countries[rand.Next(countries.Length)]
+ )).ToList();
+ }
+ return order;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public double? Freight { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLIjfVOsgWujwMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-customize-default-scrollbar).
\ No newline at end of file
diff --git a/blazor/datagrid/virtual-scrolling.md b/blazor/datagrid/virtual-scrolling.md
new file mode 100644
index 0000000000..81aab054ba
--- /dev/null
+++ b/blazor/datagrid/virtual-scrolling.md
@@ -0,0 +1,1100 @@
+---
+layout: post
+title: Virtualization in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Virtualization in Syncfusion Blazor DataGrid and much more.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Virtual scrolling in Blazor DataGrid
+
+The virtual scrolling feature in the Syncfusion Blazor DataGrid allows you to efficiently handle and display large amounts of data without experiencing any [performance](https://www.syncfusion.com/blazor-components/blazor-datagrid/performance) degradation. It optimizes the rendering process by loading only the visible rows in the Grid viewport, rather than rendering the entire dataset at once. This is particularly useful when dealing with datasets containing thousands of records.
+
+To learn about **Virtualization** in the Grid, you can check out this video.
+
+{% youtube "youtube:https://www.youtube.com/watch?v=GrxmYYQPJPE"%}
+
+## Row virtualization
+
+Row virtualization is a feature in the Syncfusion Blazor DataGrid that allows you to load and render rows only within the content viewport. It provides an alternative to traditional paging, where data is dynamically loaded while scrolling vertically, rather than loading all the data at once. This is particularly useful when working with large datasets, as it improves performance and reduces the initial load time.
+
+To set up row virtualization, define the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) property as **true** and specify the content height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property in the Grid configuration.
+
+The number of records displayed in the Grid is implicitly determined by the height of the content area. Additionally, you have the option to explicitly define the number of visible records using the [GridPageSettings.PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property. The loaded data will be cached and reused when needed in the future.
+
+The following example enables row virtualization using the `EnableVirtualization` property.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+@code{
+ public List TaskData { get; set; }
+ protected override void OnInitialized()
+ {
+ TaskData = TaskDetails.GenerateData(1000);
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="TaskDetails.cs" %}
+
+public class TaskDetails
+{
+ public static List GenerateData(int count)
+ {
+ var names = new List { "TOM", "Hawk", "Jon", "Chandler", "Monica", "Rachel", "Phoebe", "Gunther", "Ross", "Geller", "Joey", "Bing", "Tribbiani", "Janice", "Bong", "Perk", "Green", "Ken", "Adams" };
+ var hours = new List { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
+ var designations = new List { "Manager", "Engineer 1", "Engineer 2", "Developer", "Tester" };
+ var statusValues = new List { "Completed", "Open", "In Progress", "Review", "Testing" };
+ var random = new Random();
+ var result = new List();
+ // Generate random data.
+ for (int i = 0; i < count; i++)
+ {
+ result.Add(new TaskDetails
+ {
+ TaskID = i + 1,
+ Engineer = names[random.Next(names.Count)],
+ Designation = designations[random.Next(designations.Count)],
+ Estimation = hours[random.Next(hours.Count)],
+ Status = statusValues[random.Next(statusValues.Count)]
+ });
+ }
+ return result;
+ }
+ public int TaskID { get; set; }
+ public string Engineer { get; set; }
+ public string Designation { get; set; }
+ public int Estimation { get; set; }
+ public string Status { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXreXrDghESsUlpk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Render buffered data using Overscan count
+
+The [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OverscanCount) property in the Syncfusion Blazor DataGrid is used to optimize scrolling performance by pre-rendering additional rows beyond the current viewport. It renders extra items in the DOM before and after the visible items (based on the page size) during virtual scrolling and initial rendering, which reduces the frequency of both data fetch requests and DOM rendering operations, resulting in a smoother scrolling experience.
+
+By rendering extra rows before and after the visible area, `OverscanCount` helps buffer data, minimizing loading delays.
+
+The following example demonstrates how to set the `OverscanCount` property to **5**, allowing five additional records to be preloaded before and after the current viewport.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.EmployeeID = EmployeeID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.ShipCity = ShipCity;
+ this.ShipAddress = ShipAddress;
+ this.ShippedDate = ShippedDate;
+ this.Verified = Verified;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int Code = 10247;
+ for (int i = 1; i < 500; i++)
+ {
+ order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false));
+ order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true));
+ order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true));
+ order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false));
+ order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true));
+ Code += 5;
+ }
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public DateTime OrderDate { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipAddress { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public bool Verified { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBeDLNqVYqUifpB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> The `OverscanCount` property supports both local and remote data.
+
+### Limitation
+
+* Row virtual scrolling is not compatible with the following feature
+ 1. Batch editing
+ 2. Detail template
+ 3. Row template
+ 4. Autofill
+ 5. Hierarchy Grid
+* When row virtual scrolling is activated, compatibility for copy-paste and drag-and-drop operations is limited to the data items visible in the current viewport of the Grid.
+* The cell-based selection is not supported for row virtual scrolling.
+* Using different row heights with a template column, when the template height differs for each row, is not supported.
+* Group expand and collapse state will not be persisted.
+* Due to the element height limitation in browsers, the maximum number of records loaded by the Grid is limited by the browser capability.
+* The height of the Grid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported.
+* If you want to increase the row height to accommodate the content then you can specify the row height as below to ensure all the table rows are in same height.
+
+ ```css
+ .e-grid .e-row {
+ height: 2em;
+ }
+ ```
+* Since data is virtualized in Grid, the aggregated information and total group items are displayed based on the current view items.
+* The page size provided must be two times larger than the number of visible rows in the Grid. If the page size is failed to meet this condition then the size will be determined by Grid.
+* It is necessary to set a static height for the component or its parent container when using row virtualization. The 100% height will work only if the component height is set to 100%, and its parent container has a static height.
+
+## Column virtualization
+
+Column virtualization is a feature in the Syncfusion Blazor DataGrid that optimizes the rendering of columns by displaying only the columns currently within the viewport. It allows horizontal scrolling to view additional columns. This feature is particularly useful when dealing with Grids that have a large number of columns, as it helps improve performance and reduces the initial loading time.
+
+To enable column virtualization, set the [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) property of the Grid to **true**. This configuration instructs the Grid to render only the columns visible in the viewport.
+
+The following example enables column virtualization using the `EnableColumnVirtualization` property.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+ protected override void OnInitialized()
+ {
+ GridData = VirtualData.GenerateData();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="VirtualData.cs" %}
+
+public class VirtualData
+{
+ public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30)
+ {
+ SNo = sNo;
+ FIELD1 = field1;
+ FIELD2 = field2;
+ FIELD3 = field3;
+ FIELD4 = field4;
+ FIELD5 = field5;
+ FIELD6 = field6;
+ FIELD7 = field7;
+ FIELD8 = field8;
+ FIELD9 = field9;
+ FIELD10 = field10;
+ FIELD11 = field11;
+ FIELD12 = field12;
+ FIELD13 = field13;
+ FIELD14 = field14;
+ FIELD15 = field15;
+ FIELD16 = field16;
+ FIELD17 = field17;
+ FIELD18 = field18;
+ FIELD19 = field19;
+ FIELD20 = field20;
+ FIELD21 = field21;
+ FIELD22 = field22;
+ FIELD23 = field23;
+ FIELD24 = field24;
+ FIELD25 = field25;
+ FIELD26 = field26;
+ FIELD27 = field27;
+ FIELD28 = field28;
+ FIELD29 = field29;
+ FIELD30 = field30;
+ }
+ public static List GenerateData()
+ {
+ var virtualData = new List();
+ var random = new Random();
+ var names = new[] {
+ "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa",
+ "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will",
+ "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James",
+ "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman",
+ "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah",
+ "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel",
+ "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James",
+ "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian",
+ "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham",
+ "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee"
+ };
+ for (var i = 0; i < 1000; i++)
+ {
+ virtualData.Add(new VirtualData(
+ i + 1,
+ names[random.Next(names.Length)],
+ 1967 + (i % 10),
+ random.Next(200),
+ random.Next(100),
+ random.Next(2000),
+ random.Next(1000),
+ random.Next(100),
+ random.Next(10),
+ random.Next(10),
+ random.Next(100),
+ random.Next(100),
+ random.Next(1000),
+ random.Next(10),
+ random.Next(10),
+ random.Next(1000),
+ random.Next(200),
+ random.Next(300),
+ random.Next(400),
+ random.Next(500),
+ random.Next(700),
+ random.Next(800),
+ random.Next(1000),
+ random.Next(2000),
+ random.Next(150),
+ random.Next(1000),
+ random.Next(100),
+ random.Next(400),
+ random.Next(600),
+ random.Next(500),
+ random.Next(300)
+ ));
+ }
+ return virtualData;
+ }
+ public int SNo { get; set; }
+ public string FIELD1 { get; set; }
+ public int FIELD2 { get; set; }
+ public int FIELD3 { get; set; }
+ public int FIELD4 { get; set; }
+ public int FIELD5 { get; set; }
+ public int FIELD6 { get; set; }
+ public int FIELD7 { get; set; }
+ public int FIELD8 { get; set; }
+ public int FIELD9 { get; set; }
+ public int FIELD10 { get; set; }
+ public int FIELD11 { get; set; }
+ public int FIELD12 { get; set; }
+ public int FIELD13 { get; set; }
+ public int FIELD14 { get; set; }
+ public int FIELD15 { get; set; }
+ public int FIELD16 { get; set; }
+ public int FIELD17 { get; set; }
+ public int FIELD18 { get; set; }
+ public int FIELD19 { get; set; }
+ public int FIELD20 { get; set; }
+ public int FIELD21 { get; set; }
+ public int FIELD22 { get; set; }
+ public int FIELD23 { get; set; }
+ public int FIELD24 { get; set; }
+ public int FIELD25 { get; set; }
+ public int FIELD26 { get; set; }
+ public int FIELD27 { get; set; }
+ public int FIELD28 { get; set; }
+ public int FIELD29 { get; set; }
+ public int FIELD30 { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLoZWBlzonBSEEX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Column virtualization with row virtualization
+
+Column virtualization in Syncfusion Blazor DataGrid improves performance by rendering only the visible columns and enabling horizontal scrolling for large datasets. Similarly, row virtualization renders only the visible rows within the viewport, enabling smooth vertical scrolling when handling large datasets.
+
+[EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization): Only the rows visible in the viewport are rendered. As the user scrolls vertically, more rows are dynamically loaded into the Grid.
+
+[EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization): Only the columns visible in the viewport are rendered. As the user scrolls horizontally, more columns are dynamically loaded.
+
+By enabling both features together, you can significantly enhance the responsiveness and usability of the Grid, even with thousands of rows and hundreds of columns.
+
+The following example demonstrates how to enable both column and row virtualization in the Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.EmployeeID = EmployeeID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.ShipCity = ShipCity;
+ this.ShipAddress = ShipAddress;
+ this.ShippedDate = ShippedDate;
+ this.Verified = Verified;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int Code = 10247;
+ for (int i = 1; i < 500; i++)
+ {
+ order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false));
+ order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true));
+ order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true));
+ order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false));
+ order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true));
+ Code += 5;
+ }
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public DateTime OrderDate { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipAddress { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public bool Verified { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLIZrZgBlddsUQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Column virtualization with paging
+
+Column virtualization in the Syncfusion Blazor DataGrid improves performance by rendering only the columns that are currently visible in the viewport. As the user scrolls horizontally, additional columns are dynamically loaded.
+
+When combined with paging, the Grid only loads a limited number of rows per page (based on the configured page size), while still rendering only the visible columns. This setup significantly reduces both memory usage and initial rendering time, especially when working with a large number of columns and rows.
+
+To use column virtualization with paging, you must enable both the [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) and [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) properties of the Grid.
+
+* `EnableColumnVirtualization` enables the rendering of only visible columns.
+
+* `AllowPaging` allows the Grid to display data in pages, limiting the number of rows visible at once.
+
+By combining these two properties, you can achieve optimized rendering for both columns and rows, ensuring a smooth user experience even with large datasets.
+
+The following example demonstrates how to enable both column virtualization and paging in the Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.EmployeeID = EmployeeID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.ShipCity = ShipCity;
+ this.ShipAddress = ShipAddress;
+ this.ShippedDate = ShippedDate;
+ this.Verified = Verified;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int Code = 10247;
+ for (int i = 1; i < 500; i++)
+ {
+ order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false));
+ order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true));
+ order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true));
+ order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false));
+ order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true));
+ Code += 5;
+ }
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public DateTime OrderDate { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipAddress { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public bool Verified { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVejhtAVPeiBUyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> * Column's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) is required for column virtualization. If column's `Width` is not defined then Grid will consider its value as **200px**.
+> * The collapsed/expanded state of grouped data will persist only for the local dataSource while scrolling.
+
+### Limitations
+
+* While using column virtualization, column width should be in pixel. Percentage values are not accepted.
+* Selected column details are retained only within the viewport. When the next set of columns is loaded, the selection for previously visible columns is lost.
+* The cell selection is not supported for column virtualization.
+* The **Ctrl + Home** and **Ctrl + End** keys are not supported when using column virtualization.
+* The following features are compatible with column virtualization and work within the viewport:
+ 1. Column resizing
+ 2. Column chooser
+ 3. Auto-fit
+ 4. Clipboard
+ 5. Column menu - Column chooser, AutofitAll
+* Column virtual scrolling is not compatible with the following feature:
+ 1. Grouping
+ 2. Batch editing
+ 3. Column with infinite scrolling
+ 4. Stacked header
+ 5. Row template
+ 6. Detail template
+ 7. Hierarchy Grid
+ 8. Autofill
+
+## Enable cell placeholder during Virtualization
+
+The Syncfusion Blazor DataGrid provides an option to render cell placeholders while new data is being loaded during row or column virtualization. This feature enhances the user experience by displaying a visual cue (a loading placeholder) in the Grid cells while new data is being fetched. It is particularly useful in scenarios where there is a large dataset or when virtualization is used to load data dynamically as the user scrolls through the Grid.
+
+When the [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) property is set to **true**, the Grid reuses the same DOM elements while scrolling and displays placeholder indicators in the cells until new data is fetched and rendered. This enhances perceived performance and provides a smoother, more responsive scrolling experience. To use this feature, you must also enable either:
+
+* [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) for row virtualization, or
+* [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) for column virtualization.
+
+Here’s an example demonstrating how to enable cell placeholders during row and column virtualization:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.EmployeeID = EmployeeID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.ShipCity = ShipCity;
+ this.ShipAddress = ShipAddress;
+ this.ShippedDate = ShippedDate;
+ this.Verified = Verified;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int Code = 10247;
+ for (int i = 1; i < 10000; i++)
+ {
+ order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false));
+ order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true));
+ order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true));
+ order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false));
+ order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true));
+ Code += 5;
+ }
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public DateTime OrderDate { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipAddress { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public bool Verified { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroDWBkCQohrFJy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> For a better experience, the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property of the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) class and the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property should be defined.
+
+## Frozen columns virtualization
+
+Frozen columns virtualization in Syncfusion Blazor DataGrid allows for the efficient rendering of both frozen and movable columns, along with row virtualization. This feature optimizes the Grid's performance by virtualizing both the rows and the movable columns while ensuring smooth scrolling and a seamless user experience.
+
+**Column Virtualization:** This optimizes the horizontal scrolling experience by rendering only the visible columns and virtualizing the others. The frozen columns remain fixed in place while the movable columns are rendered dynamically as you scroll horizontally.
+
+**Row Virtualization:** This ensures that only the rows within the current viewport are rendered, with placeholders shown for rows that are being dynamically loaded during scrolling.
+
+When row virtualization and column virtualization are both enabled, cell placeholders are displayed in both rows and columns until the data has been loaded into the Grid.
+
+To enable frozen columns with virtualization, follow these steps:
+
+**Define Frozen Columns:** Set the [GridColumn.Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) property to **Right** or **Left** for the desired columns, and enable the [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html).
+
+**Enable Virtualization:** Enable both [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) for row virtualization and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) for column virtualization to ensure a smooth experience when scrolling through large datasets.
+
+Here's an example demonstrating how to enable frozen columns along with row and column virtualization in Grid:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+ protected override void OnInitialized()
+ {
+ GridData = VirtualData.GenerateData();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="VirtualData.cs" %}
+
+public class VirtualData
+{
+ public VirtualData(int sNo, string field1, int field2, int field3, int field4, int field5, int field6, int field7, int field8, int field9, int field10, int field11, int field12, int field13, int field14, int field15, int field16, int field17, int field18, int field19, int field20, int field21, int field22, int field23, int field24, int field25, int field26, int field27, int field28, int field29, int field30)
+ {
+ SNo = sNo;
+ FIELD1 = field1;
+ FIELD2 = field2;
+ FIELD3 = field3;
+ FIELD4 = field4;
+ FIELD5 = field5;
+ FIELD6 = field6;
+ FIELD7 = field7;
+ FIELD8 = field8;
+ FIELD9 = field9;
+ FIELD10 = field10;
+ FIELD11 = field11;
+ FIELD12 = field12;
+ FIELD13 = field13;
+ FIELD14 = field14;
+ FIELD15 = field15;
+ FIELD16 = field16;
+ FIELD17 = field17;
+ FIELD18 = field18;
+ FIELD19 = field19;
+ FIELD20 = field20;
+ FIELD21 = field21;
+ FIELD22 = field22;
+ FIELD23 = field23;
+ FIELD24 = field24;
+ FIELD25 = field25;
+ FIELD26 = field26;
+ FIELD27 = field27;
+ FIELD28 = field28;
+ FIELD29 = field29;
+ FIELD30 = field30;
+ }
+ public static List GenerateData()
+ {
+ var virtualData = new List();
+ var random = new Random();
+ var names = new[] {
+ "hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa",
+ "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will",
+ "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James",
+ "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman",
+ "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah",
+ "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel",
+ "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James",
+ "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian",
+ "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham",
+ "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee"
+ };
+ for (var i = 0; i < 1000; i++)
+ {
+ virtualData.Add(new VirtualData(
+ i + 1,
+ names[random.Next(names.Length)],
+ 1967 + (i % 10),
+ random.Next(200),
+ random.Next(100),
+ random.Next(2000),
+ random.Next(1000),
+ random.Next(100),
+ random.Next(10),
+ random.Next(10),
+ random.Next(100),
+ random.Next(100),
+ random.Next(1000),
+ random.Next(10),
+ random.Next(10),
+ random.Next(1000),
+ random.Next(200),
+ random.Next(300),
+ random.Next(400),
+ random.Next(500),
+ random.Next(700),
+ random.Next(800),
+ random.Next(1000),
+ random.Next(2000),
+ random.Next(150),
+ random.Next(1000),
+ random.Next(100),
+ random.Next(400),
+ random.Next(600),
+ random.Next(500),
+ random.Next(300)
+ ));
+ }
+ return virtualData;
+ }
+ public int SNo { get; set; }
+ public string FIELD1 { get; set; }
+ public int FIELD2 { get; set; }
+ public int FIELD3 { get; set; }
+ public int FIELD4 { get; set; }
+ public int FIELD5 { get; set; }
+ public int FIELD6 { get; set; }
+ public int FIELD7 { get; set; }
+ public int FIELD8 { get; set; }
+ public int FIELD9 { get; set; }
+ public int FIELD10 { get; set; }
+ public int FIELD11 { get; set; }
+ public int FIELD12 { get; set; }
+ public int FIELD13 { get; set; }
+ public int FIELD14 { get; set; }
+ public int FIELD15 { get; set; }
+ public int FIELD16 { get; set; }
+ public int FIELD17 { get; set; }
+ public int FIELD18 { get; set; }
+ public int FIELD19 { get; set; }
+ public int FIELD20 { get; set; }
+ public int FIELD21 { get; set; }
+ public int FIELD22 { get; set; }
+ public int FIELD23 { get; set; }
+ public int FIELD24 { get; set; }
+ public int FIELD25 { get; set; }
+ public int FIELD26 { get; set; }
+ public int FIELD27 { get; set; }
+ public int FIELD28 { get; set; }
+ public int FIELD29 { get; set; }
+ public int FIELD30 { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhIDshOhHwVXCEM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Scroll the content by external button
+
+In certain scenarios, you may want to programmatically scroll the Grid content into view instead of relying on manual scrolling. The Syncfusion Grid provides the [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) method, which allows you to scroll to a specific row or column by passing their respective indices as parameters.
+
+To enable smooth scrolling behavior, ensure that virtualization is enabled in the Grid:
+
+* **Horizontal scrolling:** Set both [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) properties to **true**.
+* **Vertical scrolling:** Set the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) property to **true** to enable row virtualization.
+
+The following example demonstrates how to use the `ScrollIntoViewAsync` method with an external button to navigate to a specific row or column programmatically:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Inputs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid { get; set; }
+ public List OrderData { get; set; }
+ protected override void OnInitialized()
+ {
+ OrderData = OrderDetails.GetAllRecords();
+ }
+ public int ColumnIndexValue { get; set; } = 1;
+ public int RowIndexValue { get; set; } = 1;
+ public void Scroll()
+ {
+ Grid.ScrollIntoViewAsync(ColumnIndexValue, RowIndexValue);
+ }
+}
+
+{% endhighlight %}
+
+{% highlight cs tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerID, int EmployeeID, DateTime OrderDate, double Freight, string ShipCountry, string ShipCity, string ShipAddress, DateTime ShippedDate, bool Verified)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.EmployeeID = EmployeeID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ this.ShipCity = ShipCity;
+ this.ShipAddress = ShipAddress;
+ this.ShippedDate = ShippedDate;
+ this.Verified = Verified;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int Code = 10247;
+ for (int i = 1; i < 1000; i++)
+ {
+ order.Add(new OrderDetails(Code + 1, "VINET", i + 0, new DateTime(1991, 05, 15), 32.38, "Denmark", "Berlin", "Kirchgasse 6", new DateTime(1996, 7, 16), false));
+ order.Add(new OrderDetails(Code + 2, "HANAR", i + 2, new DateTime(1990, 04, 04), 58.17, "Brazil", "Madrid", "Avda. Azteca 123", new DateTime(1996, 9, 11), true));
+ order.Add(new OrderDetails(Code + 3, "TOMSP", i + 1, new DateTime(1957, 11, 30), 41.34, "Germany", "Cholchester", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", new DateTime(1996, 10, 7), true));
+ order.Add(new OrderDetails(Code + 4, "VICTE", i + 3, new DateTime(1930, 10, 22), 55.09, "Austria", "Marseille", "Magazinweg 7", new DateTime(1996, 12, 30), false));
+ order.Add(new OrderDetails(Code + 5, "SUPRD", i + 4, new DateTime(1953, 02, 18), 22.98, "Switzerland", "Tsawassen", "1029 - 12th Ave. S.", new DateTime(1997, 12, 3), true));
+ Code += 5;
+ }
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int EmployeeID { get; set; }
+ public DateTime OrderDate { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipAddress { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public bool Verified { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrotMgNKGXhbHbT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Refresh virtualized Grid externally
+
+The [UpdatePageSizeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdatePageSizeAsync_System_Int32_System_Int32_) method refreshes the virtualized Grid's [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) externally by using the specified Grid height or Grid container height and row height. This method calculates the Grid `PageSize` programmatically and refreshes the virtualized Grid with the newly calculated `PageSize`.
+
+To refresh the virtualized Grid externally, set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to **true**.
+
+```cshtml
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code{
+ public List GridData { get; set; }
+ public SfGrid Grid { get; set; }
+ protected override void OnInitialized()
+ {
+ List Order = new List();
+ int Code = 10000;
+ for (int i = 1; i < 10000; i++)
+ {
+ Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ Code += 5;
+ }
+ GridData = Order;
+ }
+ public class Order
+ {
+ public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.EmployeeID = EmployeeID;
+ this.Freight = Freight;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public bool Verified { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public string ShipCountry { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipAddress { get; set; }
+ }
+ public async Task UpdatePageSize()
+ {
+ await Grid.UpdatePageSizeAsync(800, 32);
+ }
+}
+```
+
+> If [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) is specified, the page size is calculated based on the given row height. Otherwise, RowHeight will be determined from the offset height of the Grid row element.
+
+> You can refer to our [Blazor Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Grid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
+
+## See also
+
+* [Row virtualization with Lazy load grouping in Grid](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-virtual-scrolling)
\ No newline at end of file
diff --git a/blazor/datagrid/virtualization.md b/blazor/datagrid/virtualization.md
deleted file mode 100644
index 07bf0b0023..0000000000
--- a/blazor/datagrid/virtualization.md
+++ /dev/null
@@ -1,684 +0,0 @@
----
-layout: post
-title: Virtualization in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Virtualization in Syncfusion Blazor DataGrid component and much more.
-platform: Blazor
-control: DataGrid
-documentation: ug
----
-
-# Virtualization in Blazor DataGrid Component
-
-DataGrid allows you to load large amount of data without [performance](https://www.syncfusion.com/blazor-components/blazor-datagrid/performance) degradation.
-
-To know about how to **Virtualization** in Blazor DataGrid Component, you can check this video.
-
-{% youtube "youtube:https://www.youtube.com/watch?v=GrxmYYQPJPE"%}
-
-## Row virtualization
-
-Row virtualization allows you to load and render rows only in the content viewport. It is an alternative way of paging in which the data will be loaded while scrolling vertically. To setup the row virtualization, you need to define
-[EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) as true and content height by [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property.
-
-The number of records displayed in the DataGrid is determined implicitly by height of the content area. Also, you have an option to define a visible number of records by
-the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property of [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. The loaded data will be cached and reused when it is needed for next time.
-
-```csharp
-
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; }
- protected override void OnInitialized()
- {
- List Order = new List();
- int Code = 10000;
- for (int i = 1; i < 10000; i++)
- {
- Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- Code += 5;
- }
- GridData = Order;
- }
-
- public class Order
- {
- public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.EmployeeID = EmployeeID;
- this.Freight = Freight;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipCity = ShipCity;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- public bool Verified { get; set; }
- public DateTime? ShippedDate { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-
-```
-
-### Render buffered data using Overscan count
-
-The [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OverscanCount) property plays a crucial role in optimizing scrolling performance. It allows for the rendering of extra records before and after the viewport of the grid. It effectively reduce the frequency of data fetch requests while scrolling vertically.
-In the following demonstration, the `OverscanCount` property value is set as 5, showcasing its impact on scroll efficiency.
-
-```csharp
-
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; }
- protected override void OnInitialized()
- {
- List Order = new List();
- int Code = 10000;
- for (int i = 1; i < 10000; i++)
- {
- Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- Code += 5;
- }
- GridData = Order;
- }
-
- public class Order
- {
- public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.EmployeeID = EmployeeID;
- this.Freight = Freight;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipCity = ShipCity;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- public bool Verified { get; set; }
- public DateTime? ShippedDate { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-```
-N> The `OverscanCount` property supports both local and remote data.
-
-## Column virtualization
-
-Column virtualization allows you to virtualize columns. It will render columns which are in the viewport. You can scroll horizontally to view more columns.
-
-To setup the column virtualization, set the [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) property as **true**.
-
-### Column Virtualization With Row Virtualization
-
-In this demo, we have set [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) and [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) properties as true
-
-```csharp
-
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; }
- protected override void OnInitialized()
- {
- List Order = new List();
- int Code = 10000;
- for (int i = 1; i < 10000; i++)
- {
- Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- Code += 5;
- }
- GridData = Order;
- }
-
- public class Order
- {
- public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.EmployeeID = EmployeeID;
- this.Freight = Freight;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipCity = ShipCity;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- public bool Verified { get; set; }
- public DateTime? ShippedDate { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-```
-
-### Column virtualization with paging
-
-In this demo, we have set [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) and [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) properties as true
-
-```csharp
-
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; }
- protected override void OnInitialized()
- {
- List Order = new List();
- int Code = 10000;
- for (int i = 1; i < 200; i++)
- {
- Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- Code += 5;
- }
- GridData = Order;
- }
-
- public class Order
- {
- public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.EmployeeID = EmployeeID;
- this.Freight = Freight;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipCity = ShipCity;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- public bool Verified { get; set; }
- public DateTime? ShippedDate { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-```
-
-N> Column's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) is required for column virtualization. If column's width is not defined then DataGrid will consider its value as **200px**.
-
-N> The collapsed/expanded state will persist only for local dataSource while scrolling.
-
-## Enable Cell placeholder during Virtualization
-
-This enable cell placeholder during virtualization feature much of a muchness of row virtualization and column virtualization feature and the difference is loading placeholder indicator was shown on the cells while loading the new data. Also same set of DOM elements is reused to improve performance.
-
-To setup the enable cell placeholder during virtualization, you need to define [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) as true along with [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization)/[EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) property.
-
-```csharp
-
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; }
- protected override void OnInitialized()
- {
- List Order = new List();
- int Code = 10000;
- for (int i = 1; i < 10000; i++)
- {
- Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- Code += 5;
- }
- GridData = Order;
- }
-
- public class Order
- {
- public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.EmployeeID = EmployeeID;
- this.Freight = Freight;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipCity = ShipCity;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- public bool Verified { get; set; }
- public DateTime? ShippedDate { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-```
-
-The following GIF represents a datagrid with Mask row virtualization:
-
-
-
-N> For a better experience, the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property of the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html) class and the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property should be defined.
-
-## Frozen columns virtualization
-
-This feature virtualize the row and movable column data. Column virtualization allows you to virtualize the movable columns and cell placeholder renders before new columns loading the viewport.
-
-Row virtualization allows you to virtualize the vertical data with cell placeholder. This placeholder renders before new row data loading in the viewport.
-
-To setup the frozen right/left columns, you need to define Column property of **Freeze** as Right/Left along with enabling the column property of [IsFrozen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsFrozen).
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; } = new List();
-
- protected override void OnInitialized()
- {
- List data = new List();
- Random Random = new Random();
- string[] Name = new string[] {"hardire", "abramjo01", "aubucch01", "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa",
- "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", "Robin Hood",
- "Jiminy Cricket", "Henry", "Neal", "Red", "Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn",
- "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", "Abdisalam", "Abdul", "Abdul-Aziz",
- "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur",
- "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar",
- "Ace", "Adain", "Adam", "Adam-James", "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya",
- "Adnan", "Adrian", "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham",
- "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee" };
- GridData = Enumerable.Range(1, 1000).Select(x => new VirtualData()
- {
- Field1 = Name[Random.Next(96)],
- Field2 = 1967 + (x % 10),
- Field3 = (int)Math.Floor(Random.NextDouble() * 200),
- Field4 = (int)Math.Floor(Random.NextDouble() * 100),
- Field5 = (int)Math.Floor(Random.NextDouble() * 2000),
- Field6 = (int)Math.Floor(Random.NextDouble() * 1000),
- Field7 = (int)Math.Floor(Random.NextDouble() * 100),
- Field8 = (int)Math.Floor(Random.NextDouble() * 10),
- Field9 = (int)Math.Floor(Random.NextDouble() * 10),
- Field10 = (int)Math.Floor(Random.NextDouble() * 100),
- Field11 = (int)Math.Floor(Random.NextDouble() * 100),
- Field12 = (int)Math.Floor(Random.NextDouble() * 1000),
- Field13 = (int)Math.Floor(Random.NextDouble() * 10),
- Field14 = (int)Math.Floor(Random.NextDouble() * 10),
- Field15 = (int)Math.Floor(Random.NextDouble() * 1000),
- Field16 = (int)Math.Floor(Random.NextDouble() * 200),
- Field17 = (int)Math.Floor(Random.NextDouble() * 300),
- Field18 = (int)Math.Floor(Random.NextDouble() * 400),
- Field19 = (int)Math.Floor(Random.NextDouble() * 500),
- Field20 = (int)Math.Floor(Random.NextDouble() * 700)
-
- }).ToList();
- }
-
- public class VirtualData
- {
- public string Field1 { get; set; }
- public int Field2 { get; set; }
- public int Field3 { get; set; }
- public int Field4 { get; set; }
- public int Field5 { get; set; }
- public int Field6 { get; set; }
- public int Field7 { get; set; }
- public int Field8 { get; set; }
- public int Field9 { get; set; }
- public int Field10 { get; set; }
- public int Field11 { get; set; }
- public int Field12 { get; set; }
- public int Field13 { get; set; }
- public int Field14 { get; set; }
- public int Field15 { get; set; }
- public int Field16 { get; set; }
- public int Field17 { get; set; }
- public int Field18 { get; set; }
- public int Field19 { get; set; }
- public int Field20 { get; set; }
- }
-}
-```
-
-The following GIF represent a datagrid with Frozen columns/row virtualization.
-
-
-
-## Scroll the content by external button
-
-This section shows you how to invoke a [ScrollIntoViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ScrollIntoViewAsync_System_Int32_System_Int32_System_Int32_) method to scroll the grid content into view externally by passing column index or row index as parameter.
-To scroll the grid content in horizontal direction set the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) and [`EnableColumnVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableColumnVirtualization) properties as **true**.
-To scroll the grid content in vertical direction, set `EnableVirtualization` property as **true**.
-
- ```cshtml
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
-
-ColumnIndex :
-
-
-RowIndex :
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; }
- SfGrid Grid { get; set; }
- public int ColumnIndex { get; set; } = -1;
- public int RowIndex { get; set; } = -1;
- public int RowHeight { get; set; } = -1;
-
- protected override void OnInitialized()
- {
- List Order = new List();
- int Code = 10000;
- for (int i = 1; i < 10000; i++)
- {
- Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- Code += 5;
- }
- GridData = Order;
- }
-
- public async Task Scroll()
- {
- await Grid.ScrollIntoViewAsync(ColumnIndex, RowIndex, RowHeight);
- }
-
- public class Order
- {
- public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.EmployeeID = EmployeeID;
- this.Freight = Freight;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipCity = ShipCity;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- public bool Verified { get; set; }
- public DateTime? ShippedDate { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipAddress { get; set; }
- }
-}
-```
-
-
-
-## Refresh virtualized grid externally
-
-The [UpdatePageSizeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UpdatePageSizeAsync_System_Int32_System_Int32_) method refresh the virtualized grid [`PageSize`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) externally by using the given grid height/grid container height and row height. This method calculates the grid `PageSize` programmatically and refreshes the virtualized grid with the newly calculated `PageSize`.
-
-To refresh virtualized grid externally, set the [`EnableVirtualization`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) as true.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public List GridData { get; set; }
- public SfGrid Grid { get; set; }
- protected override void OnInitialized()
- {
- List Order = new List();
- int Code = 10000;
- for (int i = 1; i < 10000; i++)
- {
- Order.Add(new Order(Code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- Order.Add(new Order(Code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- Order.Add(new Order(Code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- Order.Add(new Order(Code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- Order.Add(new Order(Code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- Code += 5;
- }
- GridData = Order;
- }
- public class Order
- {
- public Order(int OrderID, string CustomerID, int EmployeeID, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipCountry, DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.EmployeeID = EmployeeID;
- this.Freight = Freight;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipCity = ShipCity;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public DateTime? OrderDate { get; set; }
- public bool Verified { get; set; }
- public DateTime? ShippedDate { get; set; }
- public string ShipCountry { get; set; }
- public string ShipCity { get; set; }
- public string ShipAddress { get; set; }
- }
- public async Task UpdatePageSize()
- {
- await Grid.UpdatePageSizeAsync(800, 32);
- }
-}
-```
-
-N> If rowHeight is given, then the page size is calculated by given row height. Otherwise, rowHeight will be considered from the offset height of the grid row element.
-
-## Limitations for Virtualization
-
-* While using column virtualization, column width should be in the pixel. Percentage values are not accepted.
-* Due to the element height limitation in browsers, the maximum number of records loaded by the datagrid is limited by the browser capability.
-* Cell selection will not be persisted in both row and column virtualization.
-* Virtual scrolling is not compatible with detail template, and hierarchy features
-* Group expand and collapse state will not be persisted.
-* Since data is virtualized in datagrid, the aggregated information and total group items are displayed based on the current view items.
-* The page size provided must be two times larger than the number of visible rows in the datagrid. If the page size is failed to meet this condition then the size will be determined by datagrid.
-* The height of the datagrid content is calculated using the row height and total number of records in the data source and hence features which changes row height such as text wrapping are not supported. If you want to increase the row height to accommodate the content then you can specify the row height using **RowHeight** property to ensure all the table rows are in same height.
-* Programmatic selection using the **SelectRows** method is not supported in virtual scrolling.
-
-## See also
-
-* [Row virtualization with Lazy load grouping in DataGrid](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-virtual-scrolling)
-
-N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.