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-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..31fa69129e 100644
--- a/blazor/datagrid/infinite-scrolling.md
+++ b/blazor/datagrid/infinite-scrolling.md
@@ -7,73 +7,77 @@ control: DataGrid
documentation: ug
---
-# Infinite Scrolling in Blazor DataGrid
+# Infinite scroll in Blazor Grid component
-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 Grid 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 content height by [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`.
-
-```csharp
+The following an example that demonstrates how to enable infinite scroll in the Grid:
+{% 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 c# 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; }
}
-```
+{% endhighlight %}
+{% endtabs %}
-The following GIF represents the infinite scrolling functionality in DataGrid
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjreXMrOAPkHeOht?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Number of blocks rendered during initial loading
@@ -81,144 +85,205 @@ The number of blocks to be initially rendered when the Grid is loaded. Each bloc
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.
-In the below demo, `InitialBlocks` property value is changed as 4 instead of 3.
-```csharp
+The following an example of how you can use the `InitialBlocks` property to set the initial loading pages based on **DropDownList** input:
+{% 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; }
}
-
- public class Order
+ private List DropDownData = new List
{
- 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; }
+ 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 c# 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/rDheZMAZCHNIhdIg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Efficient data caching and DOM management in grid cache mode
-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.
+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 [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.
-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**.
+To enable cache mode, you need to define [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**.
-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.
+To enable maximum blocks, you need to define `MaximumBlocks` count of `GridInfiniteScrollSettings`, By default this property value is 3.
-In the below demo, the `EnableCache` in `GridInfiniteScrollSettings` property is enabled, here three pages of records get loaded for each request.
-```csharp
+The following example that demonstrates how to enable/disable cache mode in infinite scrolling of the grid based on a [Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp) component [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();
}
-
- public class Order
+}
+{% endhighlight %}
+{% highlight c# 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 %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZreNsUXVSieZxOY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## 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.
-
+* 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.
-
-* 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 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 DataGrid](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..568c0bd06e 100644
--- a/blazor/datagrid/scrolling.md
+++ b/blazor/datagrid/scrolling.md
@@ -7,154 +7,337 @@ control: DataGrid
documentation: ug
---
-# Scrolling in Blazor DataGrid Component
+# Scrolling in Blazor DataGrid component
- 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 Blazor Grid component allows you to navigate through the 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 will be 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 present in the grid exceeds its element height.
+* The horizontal scrollbar appears when the sum of columns width 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) are used to set the grid 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 value for `Height` and `Width` is `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.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@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 c# tabtitle="OrderDetails.cs" %}
+public class OrderDetails
+{
+ public static List order = new List();
+ 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 Grid component allows you to create a responsive layout by making it fill its parent container and automatically adjust its size based on the available space and changes in the container's dimensions. This capability is particularly useful for building applications that need to adapt to various screen sizes and devices.
+
+To achieve this, you need 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) properties of the Grid as 100%. However, keep in mind that setting the height property to 100% requires the Grid's parent element to have an explicit height defined.
-```cshtml
+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" %}
@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();
}
-
- 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 c# 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 Blazor Grid component provides a feature that allows you to make column headers remain fixed while scrolling, ensuring they stay visible at all times. To achieve this, you can utilize 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 will be sticky while scrolling the Grid's parent div element.
-```csharp
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
-
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()
{
- Orders = Enumerable.Range(1, 100).Select(x => new Order()
+ LazyLoadData = LazyLoadDetails.CreateLazyLoadData();
+ }
+ public bool IsStickyHeader;
+ private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
+ {
+ IsStickyHeader = args.Checked;
+ Grid.Refresh();
+ }
+}
+{% endhighlight %}
+{% highlight c# 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++)
{
- 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.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 %}
- 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; }
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBytWVcUTZgQUiC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Scroll to selected row
+
+The Blazor Grid component 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 wanting to maintain 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.
+
+The following example that demonstrates how to use the `ScrollIntoViewAsync` method to scroll to the selected row:
+
+{% 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()
+ {
+ 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 = "2020", Value = "2020" },
+ new Rows() { Text = "3000", Value = "3000" },
+ new Rows() { Text = "4000", Value = "4000" },
+ new Rows() { Text = "4999", Value = "4999" }
+ };
+ public async Task ValueChanged(ChangeEventArgs Args)
+ {
+ if (int.TryParse(SelectedValue, out int rowIndex))
+ {
+ await Grid.SelectRowAsync(rowIndex);
+ await Grid.ScrollIntoViewAsync(rowIndex);
+ }
+ }
+ public void RowselectedHandler(RowSelectEventArgs args)
+ {
+ Grid.PreventRender(false);
}
}
+{% endhighlight %}
+{% highlight c# 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 < 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/rjroNWAMLmoWziOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Customize grid scroll bar
@@ -162,7 +345,7 @@ The Grid component uses the native browser scroll bar to scroll through the cont
By referring to the above link, we have customized the appearance of the scroll bar in the following sample.
-N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-customize-default-scrollbar).
+> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-customize-default-scrollbar).
```csharp
@using Syncfusion.Blazor.Grids
@@ -179,7 +362,6 @@ N> You can find the fully working sample [here](https://github.com/SyncfusionExa
@code{
public List Orders { get; set; }
-
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
@@ -191,7 +373,6 @@ N> You can find the fully working sample [here](https://github.com/SyncfusionExa
ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)]
}).ToList();
}
-
public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
@@ -200,7 +381,6 @@ N> You can find the fully working sample [here](https://github.com/SyncfusionExa
public string ShipCountry { get; set; }
}
}
-
-
```
-
+
\ 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..10b6582e65
--- /dev/null
+++ b/blazor/datagrid/virtual-scrolling.md
@@ -0,0 +1,1029 @@
+---
+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
+---
+
+# Virtual scrolling in Blazor DataGrid component
+
+The virtual scrolling feature in the Grid allows you to efficiently handle and display a large amount 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 that contain thousands of records.
+
+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 is a feature in the Syncfusion Grid that allows you to load and render rows only in the content viewport. It provides an alternative way of paging where data is loaded dynamically while scrolling vertically, rather than loading all the data at once. This is particularly useful when dealing with large datasets, as it improves the performance and reduces the initial load time.
+
+To set up row virtualization, you need to 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 an option to explicitly define the visible number of 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 enable row virtualization using `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 c# 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 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.
+
+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 c# 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 datagrid. If the page size is failed to meet this condition then the size will be determined by datagrid.
+* 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 feature in the Syncfusion Grid that allows you to optimize the rendering of columns by displaying only the columns that are 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 to improve the performance and reduce the initial loading time.
+
+To enable column virtualization, you need to 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 only render the columns that are currently visible in the viewport.
+
+The following example enable column virtualization using `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 c# 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
+
+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**.
+
+{% 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 c# 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
+
+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**.
+
+{% 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 c# 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 DataGrid will consider its value as **200px**.
+> * The collapsed/expanded state will persist only for local dataSource while scrolling.
+
+### Limitations
+
+* While using column virtual scrolling, column width should be in pixel. Percentage values are not accepted.
+* Selected column details are only retained 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 virtual scrolling.
+* The **Ctrl + Home** and **Ctrl + End** keys are not supported when using column virtual scrolling.
+* The following features are compatible with column virtualization and work within the viewport:
+ 1. Column resizing
+ 2. Column reordering
+ 3. Column chooser
+ 4. Auto-fit
+ 5. Print
+ 6. Clipboard
+ 7. 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
+ 9. Column chooser
+
+## 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) property to **true** along with 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.
+
+{% 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 c# 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
+
+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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Freeze) as **Right** or **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).
+
+{% 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 c# 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 some scenarios, you may want to programmatically scroll the grid content into view rather than 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 that 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 c# 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 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);
+ }
+}
+```
+
+> If [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_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.
+
+> 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=bootstrap4) to understand how to present and manipulate data.
+
+## 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)
\ No newline at end of file
diff --git a/blazor/datagrid/virtualization.md b/blazor/datagrid/virtualization.md
deleted file mode 100644
index 1b504ebaf3..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=bootstrap4) to understand how to present and manipulate data.