diff --git a/blazor/datagrid/caption-template.md b/blazor/datagrid/caption-template.md
new file mode 100644
index 0000000000..577913129c
--- /dev/null
+++ b/blazor/datagrid/caption-template.md
@@ -0,0 +1,275 @@
+---
+layout: post
+title: Caption template in Blazor DataGrid Component | Syncfusion
+description: Checkout and learn here all about Grouping in Syncfusion Blazor DataGrid component and much more details.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Caption template in Blazor DataGrid component
+
+The caption template feature in the Syncfusion Blazor DataGrid allows you to customize and enhance the appearance of group caption row. It provides a flexible way to display additional information about grouped data, such as counts or grouped value, and enables you to incorporate custom content like images, icons, or other HTML elements. This feature empowers you to create visually appealing and informative group captions in the DataGrid component.
+
+To achieve this customization, you can utilize the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property. You can type cast the context as [CaptionTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CaptionTemplateContext.html#properties) to get the data, which represents the currently displayed group, you can incorporate its properties such as `Field` (column's Field name), `HeaderText` (column's Header text), `Key`(grouped value) and `Count` (Count of the grouped records) into the Caption template.
+
+The following example demonstrates how to customize the group header caption in the Grid by utilizing the `CaptionTemplate` property. It displays the **HeaderText**, **Key** and **Count** of the grouped columns.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+ @{
+ var data = (context as CaptionTemplateContext);
+ @data.HeaderText - @data.Key : @data.Count Items
+ }
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+ public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBzXMjlgozlWLsz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Adding custom text in group caption
+
+The Syncfusion Blazor DataGrid allows you to enhance the group captions by adding custom text, providing a more meaningful and informative representation of the grouped data. By utilizing the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property, you can add specific text or information to the group caption, offering flexibility in customization.
+
+The following example demonstrates how to add a custom text to the group caption using the `CaptionTemplate` property. You can type cast the context as [CaptionTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.CaptionTemplateContext.html#properties) to get the data used to display the key, count and headerText of the grouped columns along with the custom text.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+ @{
+ var order = (context as CaptionTemplateContext);
+ @order.Key - @order.Count Records : @order.HeaderText
+ }
+
+
+
+
+@code {
+ public List GridData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, double? Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.Freight = Freight;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", 3.25));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", 22.98));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", 140.51));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", 65.83));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", 58.17));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", 81.91));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", 3.05));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", 55.09));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", 48.29));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public double? Freight { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVzjiXvgoxRzKIb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Render custom component in group caption
+
+The Syncfusion Blazor DataGrid offers the flexibility to render a custom component in the group caption, providing advanced or interactive functionality within the group caption row. This feature allows you to display custom UI elements, like buttons, icons, or dropdowns, and handle user interactions directly within the group caption.
+
+To render custom component in the group caption, you can utilize the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) property. This feature enables you to replace plain text with a custom component in the group caption, enhancing customization and interactivity.
+
+The following example demonstrates how to add a custom component to the group caption using the `CaptionTemplate` property. In the template, the [Chips](https://ej2.syncfusion.com/angular/documentation/chips/getting-started) component is utilized, with the text content set as the group key.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+ @{
+ var data = (context as CaptionTemplateContext);
+ var text = data.Key;
+
+
+
+
+
+ }
+
+
+
+
+@code {
+ public List GridData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, double? Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.Freight = Freight;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", 3.25));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", 22.98));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", 140.51));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", 65.83));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", 58.17));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", 81.91));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", 3.05));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", 55.09));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", 48.29));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public double? Freight { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqCsjEtWGsGdKj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
diff --git a/blazor/datagrid/grouping.md b/blazor/datagrid/grouping.md
index cb68465b1e..369c4c6059 100644
--- a/blazor/datagrid/grouping.md
+++ b/blazor/datagrid/grouping.md
@@ -9,293 +9,1150 @@ documentation: ug
# Grouping in Blazor DataGrid Component
-The DataGrid has options to group records by dragging and dropping the column header to the group drop area. When grouping is applied, datagrid records are organized into a hierarchical structure to facilitate easier expansion and collapse of records.
+The grouping feature in the Syncfusion Blazor DataGrid allows you to organize data into a hierarchical structure, making it easier to expand and collapse records. You can group the columns by simply dragging and dropping the column header to the group drop area. To enable grouping in the grid, you need to set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Additionally, you can customize the grouping options using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
-To enable grouping in the datagrid, set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) as true. Grouping options can be configured through the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
-
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List GridData { 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),
- }).ToList();
+ GridData = OrderData.GetAllRecords();
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
- public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-The following GIF image represents a DataGrid Grouping.
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMCNQhjHRjNeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> * You can group and ungroup columns by using the **GroupColumn** and **UngroupColumn** methods.
+> * You can group and ungroup columns by using the [GroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupColumnAsync_System_String_) and [UngroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UngroupColumnAsync_System_String_) methods.
> * To disable grouping for a particular column, set the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowGrouping) to false in **GridColumn** component.
## Initial group
-To apply group at initial rendering, set the column field name in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_Columns) property of **GridGroupSettings** component.
+To enable initial grouping in the DataGrid, you can use the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) component and set the GridGroupSettings [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_Columns) property to a string array of column names(field of the column) that you want to group by. This feature is particularly useful when working with large datasets, as it allows you to quickly organize and analyze the data based on specific criteria.
+
+The following example demonstrates how to set an initial grouping for the **CustomerID** and **ShipCity** columns during the initial rendering grid, by using the `GridGroupSettings` component of the `Columns` property.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@{
- var Initial = (new string[] { "OrderID" });
-}
-
-
+
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List GridData { get; set; }
+
+ public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
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),
- }).ToList();
+ GridData = OrderData.GetAllRecords();
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
- 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 ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBKsCNQBXkOKmSa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> You can group by multiple columns by specifying a string array of column names in the columns property of the `GridGroupSettings` component.
+
+## Prevent grouping for particular column
+
+The DataGrid component provides the ability to prevent grouping for a particular column. This can be useful when you have certain columns that you do not want to be included in the grouping process. It can be achieved by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowGrouping) property of the particular `Column` to **false**. The following example demonstrates, how to disable grouping for **CustomerID** column.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
}
}
-```
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
-The following screenshot represents a DataGrid with initial grouping.
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthUWWNcBWKrghqe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap55" %}
-
## Hide drop area
-To avoid ungrouping or further grouping of a column after initial column grouping, define the [ShowDropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_ShowDropArea) of **GridGroupSettings** as false.
+By default, the DataGrid provides a drop area for grouping columns. This drop area allows you to drag and drop columns to group and ungroup them. However, in some cases, you may want to prevent ungrouping or further grouping a column after initial grouping.
+
+To hide the drop area in the Syncfusion Blazor Grid, you can set the `GridGroupSettings` component of the [ShowDropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_ShowDropArea) property to **false**.
+
-```cshtml
+The following example, the [Blazor Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started) component is added to hide or show the drop area. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html) event is triggered and the `GridGroupSettings` component of the `ShowDropArea` property of the grid is updated accordingly.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+
+ public bool show { get; set; } = false;
-@{
- var Hide = (new string[] {"Freight"});
+ public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ private bool? isChecked = null;
+
+ private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
+ {
+ if (args.Checked == true)
+ {
+ show = true;
+ }
+ else
+ {
+ show = false;
+ }
+ }
}
-
-
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgiitwBBVMzKlC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> By default, the group drop area will be shown only if there is at least one column available to group.
+
+## Show the grouped column
+
+The Syncfusion Blazor DataGrid has a default behavior where the grouped column is hidden, to provide a cleaner and more focused view of your data. However, if you prefer to show the grouped column in the grid, you can achieve this by setting the `GridGroupSettings` component of the [ShowGroupedColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_ShowGroupedColumn) property to **true**.
+
+In the following example, the [Blazor Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started) component is added to hide or show the grouped columns. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html) event is triggered and the `GridGroupSettings` component of the showGroupedColumn property of the grid is updated accordingly.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List GridData { get; set; }
+ SfGrid Grid;
+
+ public bool IsShow { get; set; } = true;
+
+ public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ GridData = OrderData.GetAllRecords();
+ }
+
+ private bool? isChecked = null;
+
+
+ private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
+ {
+ if (args.Checked == true)
+ {
+ IsShow = false;
+ await Grid.Refresh();
+ }
+ else
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ IsShow = true;
+ await Grid.Refresh();
+ }
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
- 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 ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLqCCBPUOxoyWyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Sort grouped columns in descending order during initial grouping
+
+By default, grouped columns are sorted in ascending order. However, you can sort them in descending order during initial grouping by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in the `GridSortSettings` component of the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property.
+
+The following example demonstrates how to sort the **CustomerID** column by setting the `GridSortSettings` component of the `Columns` property to **Descending** during the initial grouping of the Datagrid.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+
+ public string[] Initial = (new string[] { "CustomerID" });
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
}
+
}
-```
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
-The following screenshot represents hiding the Group drop area in DataGrid.
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhUCMZGLoABNhxp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Group by format
-By default, a column will be grouped by the data or value present for the particular row. To group the numeric or datetime column based on the mentioned format, you have to enable the [EnableGroupByFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EnableGroupByFormat) property of the corresponding datagrid columns.
+By default, columns are grouped by the data or value present for the particular row. However, you can also group numeric or datetime columns based on the specified format. To enable this feature, you need to set the [EnableGroupByFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_EnableGroupByFormat)
+property of the corresponding grid column. This feature allows you to group numeric or datetime columns based on a specific format.
+
+The following example demonstrates how to perform a group action using the `EnableGroupByFormat` property for the **OrderDate** and **Freight** columns of the grid.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@{
- var Format = (new string[] { "Freight" });
-}
-
+
-
-
-
-
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+ public string[] Format = (new string[] { "OrderDate", "Freight" });
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),
- }).ToList();
+ GridData = OrderData.GetAllRecords();
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID, DateTime? OrderDate, double? Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", new DateTime(1996, 07, 06), 32.38));
+ Orders.Add(new OrderData(10249, "TOMSP", new DateTime(1996, 07, 06), 11.61));
+ Orders.Add(new OrderData(10250, "HANAR", new DateTime(1996, 07, 06), 65.83));
+ Orders.Add(new OrderData(10251, "VICTE", new DateTime(1996, 07, 06), 45.78));
+ Orders.Add(new OrderData(10252, "SUPRD", new DateTime(1996, 07, 06), 98.6));
+ Orders.Add(new OrderData(10253, "HANAR", new DateTime(1996, 07, 06), 103.45));
+ Orders.Add(new OrderData(10254, "CHOPS", new DateTime(1996, 07, 06), 103.45));
+ Orders.Add(new OrderData(10255, "RICSU", new DateTime(1996, 07, 06), 112.48));
+ Orders.Add(new OrderData(10256, "WELLI", new DateTime(1996, 07, 06), 33.45));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
- public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
-}
-```
+{% endhighlight %}
+{% endtabs %}
-## Grouping events
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLUisZcqcKfqGvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> Numeric columns can be grouped based on formats such as currency or percentage, while datetime columns can be grouped based on specific date or time formats.
+
+## Collapse all grouped rows at initial rendering
+
+The Syncfusion Blazor Grid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. The option is useful when dealing with a large dataset that contains many groups, and there is a need to provide a summarized view by initially hiding the details.
+
+To collapse all grouped rows at the initial rendering of the Grid using the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event along with the [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync) method.
-During the group action, the datagrid component triggers two events. The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event triggers before the group action starts and the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html) event triggers after the group action is completed. Using these events you can perform any action.
+The following example demonstrates how to collapse all grouped rows at the initial rendering.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
+
+
-
-
-
-
-
-
+
+
+
+
+
-@code{
- public List Orders { get; set; }
+@code {
+ public List GridData { get; set; }
+
+ SfGrid Grid;
+
+ public bool initial = true;
+
+ public string[] groupOptions = (new string[] { "ShipCity" });
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ GridData = OrderData.GetAllRecords();
+ }
+
+ public async Task DataBoundHandler()
+ {
+ if(initial == true)
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- ShipCountry = (new string[] { "USA", "UK", "JAPAN" })[new Random().Next(3)],
- }).ToList();
+ await Grid.CollapseAllGroupAsync();
+ initial = false;
+ }
}
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
- public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- public string ShipCountry { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrfDsjKqkAfFfop?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> The collapse all approach is suggested for a limited number of records since collapsing every grouped record takes some time. If you have a large dataset, it is recommended to use [lazy-load grouping](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping). This approach is also applicable for the [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) method.
+
+## Group or Ungroup column externally
+
+By default, the Syncfusion DataGrid supports interaction-oriented column grouping, where users manually group columns by dragging and dropping them into the grouping area of the grid. Grid provides an ability to group and ungroup a column using [GroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupColumnAsync_System_String_) and [UngroupColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_UngroupColumnAsync_System_String_) methods. These methods provide a programmatic approach to perform column grouping and ungrouping.
+
+The following example demonstrates how to group and ungroup the columns in a grid. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) component to select the column. When an external button is clicked, the `GroupColumnAsync` and `UngroupColumnAsync` methods are called to group or ungroup the selected column.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.DropDowns
+
+
+
+
+
+
+
+
+
+
+ Group column
+ UnGroup column
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+ public string DropDownValue { get; set; } = "CustomerID";
+ public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ List LocalData = new List
+ {
+ new Columns() { ID= "OrderID", Value= "OrderID" },
+ new Columns() { ID= "CustomerID", Value= "CustomerID" },
+ new Columns() { ID= "ShipCity", Value= "ShipCity" },
+ new Columns() { ID= "ShipName", Value= "ShipName" },
+ };
+
+ public class Columns
+ {
+ public string ID { get; set; }
+ public string Value { get; set; }
}
- public void GroupActionHandler(ActionEventArgs args){
- // You can get args.RequestType and other details.
+
+ public async Task GroupColumn()
+ {
+ await Grid.GroupColumnAsync(DropDownValue);
+ }
+
+ public async Task UnGroupColumn()
+ {
+ await Grid.UngroupColumnAsync(DropDownValue);
}
}
-```
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
-> The **args.RequestType** is based on the current action name. For example, when grouping, the **args.RequestType** value will be 'grouping'.
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBgCiNGTssPWSDl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Expand or collapse externally
+The Syncfusion Blazor DataGrid offers a convenient feature to expand or collapse grouped rows, allowing you to control the visibility of grouped data. This section will provide guidance on enabling this functionality and integrating it into your application using the Grid properties and methods.
-## Caption template
+### Expand or collapse all grouped rows
-You can customize the group caption by using the [CaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_CaptionTemplate) of the [GridGroupSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) component.
+DataGrid provides an ability to expand or collapse grouped rows using [ExpandAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExpandAllGroupAsync) and [CollapseAllGroupAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CollapseAllGroupAsync) methods respectively.
-The following sample code demonstrates the above,
+In the following example, the [Blazor Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started) component is added to expand or collapse grouped rows. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.ChangeEventArgs-1.html) event is triggered and the `ExpandAllGroupAsync` and `CollapseAllGroupAsync` methods are called to expand or collapse grouped rows.
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-@{
- var Template = (new string[] { "OrderID" });
+@code {
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+ public string[] columns = (new string[] { "CustomerID", "ShipCity" });
+ public bool IsShow { get; set; } = true;
+
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args)
+ {
+ if (args.Checked == true)
+ {
+ await Grid.CollapseAllGroupAsync();
+ }
+ else
+ {
+ await Grid.ExpandAllGroupAsync();
+ }
+ }
}
-
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgMWDwTMzdeJff?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Clear grouping
+
+The clear grouping feature in the Syncfusion Blazor DataGrid allows you to removing all the grouped columns from the grid. This feature provides a convenient way to clear the grouping of columns in your application.
+
+To clear all the grouped columns in the Grid, you can utilize the [ClearGroupingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearGroupingAsync) method of the grid.
+
+The following example demonstrates how to clear the grouping using `ClearGroupingAsync` method in the external button click.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+ Clear Grouping
+
+
+
-
-
-
-
+
+
+
+
-
-
- @{
- var order = (context as CaptionTemplateContext);
-
@order.Field - @order.Key
+
+
+@code {
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+ public string[] columns = (new string[] { "CustomerID", "ShipCity" });
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ private async Task ClearGrouping()
+ {
+ await Grid.ClearGroupingAsync();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
}
-
-
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhKsMDwJCOGDhcq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Grouping events
+
+The DataGrid component provides two events that are triggered during the group action such as [Grouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouping) and [Grouped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouped). The `Grouping` event is triggered before the group action starts, and the `Grouped` event is triggered after the group action is completed. You can use these events to perform any custom action based on the grouping.
+
+1. **Grouping Event**: `Grouping` event is triggered before the grouping action or un-grouping action is performed in the grid. It provides a way to perform any necessary operations before the group action takes place. This event provides a parameter that contains the current sorting column name, and action.
+
+2. **Grouped Event**: `Grouped` event is triggered after the grouping action or un-grouping action is performed in the grid. It provides a way to perform any necessary operations after the group action has taken place. This event provides a parameter that contains the current sorting column name, and action.
+
+The following example demonstrates how the `Grouping` and `Grouped` events work when grouping is performed. The `Grouping` event event is used to cancel the grouping of the **OrderID** column. The `Grouped` event is used to display a message
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+@if (show == true)
+{
+
+ Group action completed for @columnName column
+
+
+}
+
+
+
+
+
+
+
+
+
-@code{
- public List Orders { get; set; }
+
+@code {
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+ public bool show { get; set; } = false;
+
+ public string columnName { get; set; }
+ public string requesttype { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ GridData = OrderData.GetAllRecords();
+ }
+
+ public async Task GroupingHandler(GroupingEventArgs args)
+ {
+ if (args.ColumnName == "OrderID")
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ args.Cancel = true;
+ }
}
- public class Order
+ public async Task GroupedHandler(GroupedEventArgs args)
{
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ columnName = args.ColumnName;
+ show = true;
}
}
-```
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int code = 10;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ code += 5;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLpNCtffrjjtSYQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
-The following screenshot represents a DataGrid with customized group caption,
+## See Also
-
+* [Exporting grouped records](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting#exporting-grouped-records)
> 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.
\ No newline at end of file
diff --git a/blazor/datagrid/lazy-load-grouping.md b/blazor/datagrid/lazy-load-grouping.md
index 04139889e4..1a02746813 100644
--- a/blazor/datagrid/lazy-load-grouping.md
+++ b/blazor/datagrid/lazy-load-grouping.md
@@ -9,156 +9,324 @@ documentation: ug
# Lazy Load Grouping in Blazor DataGrid Component
-The lazy load grouping allows you to load grouped records to the Grid through the on-demand concept. So, you can use this feature to load a huge amount of grouped data to the Grid without any performance degradation.
+In Blazor , lazy loading refers to the technique of loading data dynamically when they are needed, instead of loading everything upfront. Lazy loading can significantly improve the performance of your application by reducing the initial load time.
-When you enable this feature, the Grid will render only the initial level caption rows in the collapsed state at grouping. The child rows of each caption will be fetched from the server and render in the Grid when you expand the caption row.
+Lazy load grouping in Syncfusion Grid allows you to load and display grouped data efficiently by fetching only the required data on demand. This feature is useful when dealing with large datasets where loading all the data at once might affect performance. The Grid will render only the initial level caption rows in the collapsed state at grouping. The child rows of each caption will be fetched in on demand and render in the Grid when you expand the caption row.
-The caption row expand/collapse state will be persisted on paging and grid pages count will be determined based on the caption and child rows.
+To enable this feature, need to set the [EnableLazyLoading](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_EnableLazyLoading) as **true** in [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
-To enable lazy load grouping in the datagrid, set the `EnableLazyLoading` as true in [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
+The following example demonstrates how to enable the lazy load grouping feature by setting the `EnableLazyLoading` as **true** in `GridGroupSettings` component.
-The following sample code demonstrates the above,
-
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
+
+
+
+
-@code{
- public string[] Initial = (new string[] { "CustomerID" });
- public List Orders { get; set; }
+@code {
+ public List GridData { get; set; }
+
+ public string[] Initial = (new string[] { "ProductName", "CustomerName" });
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+ GridData = OrderData.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID,string ProductName, int? ProductID, string CustomerName)
+ {
+ this.OrderID = OrderID;
+ this.ProductName = ProductName;
+ this.ProductID = ProductID;
+ this.CustomerName = CustomerName;
+ }
+
+ public static List GetAllRecords()
{
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID","Maria", "Ana Trujillo", "Antonio Moreno", "Thomas Hardy", "Christina Berglund", "Hanna Moos", "Frédérique Citeaux", "Martín Sommer", "Laurence Lebihan", "Elizabeth Lincoln",
- "Victoria Ashworth", "Patricio Simpson", "Francisco Chang", "Yang Wang", "Pedro Afonso" })[new Random().Next(20)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ if (Orders.Count() == 0)
+ {
+
+ string[] Customer ={"Maria", "Ana Trujillo", "Antonio Moreno", "Thomas Hardy", "Christina Berglund", "Hanna Moos", "Frédérique Citeaux", "Martín Sommer", "Laurence Lebihan", "Elizabeth Lincoln",
+ "Victoria Ashworth", "Patricio Simpson", "Francisco Chang", "Yang Wang", "Pedro Afonso", "Elizabeth Brown", "Sven Ottlieb", "Janine Labrune", "Ann Devon", "Roland Mendel", "Aria Cruz", "Diego Roel",
+ "Martine Rancé", "Maria Larsson", "Peter Franken", "Carine Schmitt", "Paolo Accorti", "Lino Rodriguez", "Eduardo Saavedra", "José Pedro Freyre", "André Fonseca", "Howard Snyder", "Manuel Pereira",
+ "Mario Pontes", "Carlos Hernández", "Yoshi Latimer", "Patricia McKenna", "Helen Bennett", "Philip Cramer", "Daniel Tonini", "Annette Roulet", "Yoshi Tannamuri", "John Steel", "Renate Messner", "Jaime Yorres",
+ "Carlos González", "Felipe Izquierdo", "Fran Wilson", "Giovanni Rovelli", "Catherine Dewey", "Jean Fresnière", "Alexander Feuer", "Simon Crowther", "Yvonne Moncada", "Rene Phillips", "Henriette Pfalzheim",
+ "Marie Bertrand", "Guillermo Fernández", "Georg Pipps", "Isabel de Castro", "Bernardo Batista", "Lúcia Carvalho", "Horst Kloss", "Sergio Gutiérrez", "Paula Wilson", "Maurizio Moroni", "Janete Limeira", "Michael Holz",
+ "Alejandra Camino", "Jonas Bergulfsen", "Jose Pavarotti", "Hari Kumar", "Jytte Petersen", "Dominique Perrier", "Art Braunschweiger", "Pascale Cartrain", "Liz Nixon", "Liu Wong", "Karin Josephs", "Miguel Angel Paolino",
+ "Anabela Domingues", "Helvetius Nagy", "Palle Ibsen", "Mary Saveley", "Paul Henriot", "Rita Müller", "Pirkko Koskitalo", "Paula Parente", "Karl Jablonski", "Matti Karttunen", "Zbyszek Piestrzeniewicz"};
+ string[] Product = {"Chai", "Chang", "Aniseed Syrup", "Chef Anton\"s Cajun Seasoning", "Chef Anton\"s Gumbo Mix", "Grandma\"s Boysenberry Spread",
+ "Uncle Bob\"s Organic Dried Pears", "Northwoods Cranberry Sauce", "Mishi Kobe Niku", "Ikura", "Queso Cabrales", "Queso Manchego La Pastora", "Konbu",
+ "Tofu", "Genen Shouyu", "Pavlova", "Alice Mutton", "Carnarvon Tigers", "Teatime Chocolate Biscuits", "Sir Rodney\"s Marmalade", "Sir Rodney\"s Scones",
+ "Gustaf\"s Knäckebröd", "Tunnbröd", "Guaraná Fantástica", "NuNuCa Nuß-Nougat-Creme", "Gumbär Gummibärchen", "Schoggi Schokolade", "Rössle Sauerkraut",
+ "Thüringer Rostbratwurst", "Nord-Ost Matjeshering", "Gorgonzola Telino", "Mascarpone Fabioli", "Geitost", "Sasquatch Ale", "Steeleye Stout", "Inlagd Sill",
+ "Gravad lax", "Côte de Blaye", "Chartreuse verte", "Boston Crab Meat", "Jack\"s New England Clam Chowder", "Singaporean Hokkien Fried Mee", "Ipoh Coffee",
+ "Gula Malacca", "Rogede sild", "Spegesild", "Zaanse koeken", "Chocolade", "Maxilaku", "Valkoinen suklaa", "Manjimup Dried Apples", "Filo Mix", "Perth Pasties",
+ "Tourtière", "Pâté chinois", "Gnocchi di nonna Alice", "Ravioli Angelo", "Escargots de Bourgogne", "Raclette Courdavault", "Camembert Pierrot", "Sirop d\"érable",
+ "Tarte au sucre", "Vegie-spread", "Wimmers gute Semmelknödel", "Louisiana Fiery Hot Pepper Sauce", "Louisiana Hot Spiced Okra", "Laughing Lumberjack Lager", "Scottish Longbreads",
+ "Gudbrandsdalsost", "Outback Lager", "Flotemysost", "Mozzarella di Giovanni", "Röd Kaviar", "Longlife Tofu", "Rhönbräu Klosterbier", "Lakkalikööri", "Original Frankfurter grüne Soße"};
+ int OrderID = 10248;
+ int i = 0; int j = 0; int k = 0; int l = 0; int m = 0;
+ for (int x = 0; x < 20000; x++)
+ {
+ i = i >= Customer.Length ? 0 : i;
+ l = l >= Product.Length ? 0 : l;
+ Orders.Add(new OrderData()
+ {
+ OrderID = OrderID + x,
+ ProductID = x + 10,
+ CustomerName = Customer[i],
+ ProductName = Product[l],
+
+ });
+ i++; j++; k++; l++; m++;
+ }
+
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string ProductName { get; set; }
+ public int? ProductID { get; set; }
+ public string CustomerName { get; set; }
}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBfXWNvAIVdashy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
+## Lazy load grouping with infinite scrolling
+
+Lazy loading grouping with infinite scrolling is a valuable feature in scenarios where there is a need to present grouped data, efficiently handle large datasets, and ensure a seamless experience. This feature enables loading data on demand as the interface is interacted with, ensuring optimal performance and responsiveness while effectively managing and presenting large grouped datasets
+
+**How lazy load grouping with infinite scrolling works**
+
+1. When you enable lazy load grouping with infinite scrolling, the Grid initially renders only the top-level caption rows in a collapsed state.
+
+2. The child rows associated with each group caption are loaded and rendered in the Grid only when you expand the corresponding caption row.
- public class Order
+3. Infinite scrolling enables the Grid to load additional data as the user scrolls to the end of the scrollbar.
+
+To enable this feature, you need to set the [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) property as true and the [EnableLazyLoading](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_EnableLazyLoading) property of the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) class as true.
+
+The following example demonstrates how to enable the lazy load grouping with infinite scrolling feature using the `EnableLazyLoading` property of the `GridGroupSettings` component and `EnableInfiniteScrolling` property.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+
+ public string[] Initial = (new string[] { "ProductName", "CustomerName" });
+
+ protected override void OnInitialized()
{
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ GridData = OrderData.GetAllRecords();
}
}
-```
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
+ {
+
+ }
+ public OrderData(int? OrderID, string ProductName, int? ProductID, string CustomerName)
+ {
+ this.OrderID = OrderID;
+ this.ProductName = ProductName;
+ this.ProductID = ProductID;
+ this.CustomerName = CustomerName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+
+ string[] Customer ={"Maria", "Ana Trujillo", "Antonio Moreno", "Thomas Hardy", "Christina Berglund", "Hanna Moos", "Frédérique Citeaux", "Martín Sommer", "Laurence Lebihan", "Elizabeth Lincoln",
+ "Victoria Ashworth", "Patricio Simpson", "Francisco Chang", "Yang Wang", "Pedro Afonso", "Elizabeth Brown", "Sven Ottlieb", "Janine Labrune", "Ann Devon", "Roland Mendel", "Aria Cruz", "Diego Roel",
+ "Martine Rancé", "Maria Larsson", "Peter Franken", "Carine Schmitt", "Paolo Accorti", "Lino Rodriguez", "Eduardo Saavedra", "José Pedro Freyre", "André Fonseca", "Howard Snyder", "Manuel Pereira",
+ "Mario Pontes", "Carlos Hernández", "Yoshi Latimer", "Patricia McKenna", "Helen Bennett", "Philip Cramer", "Daniel Tonini", "Annette Roulet", "Yoshi Tannamuri", "John Steel", "Renate Messner", "Jaime Yorres",
+ "Carlos González", "Felipe Izquierdo", "Fran Wilson", "Giovanni Rovelli", "Catherine Dewey", "Jean Fresnière", "Alexander Feuer", "Simon Crowther", "Yvonne Moncada", "Rene Phillips", "Henriette Pfalzheim",
+ "Marie Bertrand", "Guillermo Fernández", "Georg Pipps", "Isabel de Castro", "Bernardo Batista", "Lúcia Carvalho", "Horst Kloss", "Sergio Gutiérrez", "Paula Wilson", "Maurizio Moroni", "Janete Limeira", "Michael Holz",
+ "Alejandra Camino", "Jonas Bergulfsen", "Jose Pavarotti", "Hari Kumar", "Jytte Petersen", "Dominique Perrier", "Art Braunschweiger", "Pascale Cartrain", "Liz Nixon", "Liu Wong", "Karin Josephs", "Miguel Angel Paolino",
+ "Anabela Domingues", "Helvetius Nagy", "Palle Ibsen", "Mary Saveley", "Paul Henriot", "Rita Müller", "Pirkko Koskitalo", "Paula Parente", "Karl Jablonski", "Matti Karttunen", "Zbyszek Piestrzeniewicz"};
+ string[] Product = {"Chai", "Chang", "Aniseed Syrup", "Chef Anton\"s Cajun Seasoning", "Chef Anton\"s Gumbo Mix", "Grandma\"s Boysenberry Spread",
+ "Uncle Bob\"s Organic Dried Pears", "Northwoods Cranberry Sauce", "Mishi Kobe Niku", "Ikura", "Queso Cabrales", "Queso Manchego La Pastora", "Konbu",
+ "Tofu", "Genen Shouyu", "Pavlova", "Alice Mutton", "Carnarvon Tigers", "Teatime Chocolate Biscuits", "Sir Rodney\"s Marmalade", "Sir Rodney\"s Scones",
+ "Gustaf\"s Knäckebröd", "Tunnbröd", "Guaraná Fantástica", "NuNuCa Nuß-Nougat-Creme", "Gumbär Gummibärchen", "Schoggi Schokolade", "Rössle Sauerkraut",
+ "Thüringer Rostbratwurst", "Nord-Ost Matjeshering", "Gorgonzola Telino", "Mascarpone Fabioli", "Geitost", "Sasquatch Ale", "Steeleye Stout", "Inlagd Sill",
+ "Gravad lax", "Côte de Blaye", "Chartreuse verte", "Boston Crab Meat", "Jack\"s New England Clam Chowder", "Singaporean Hokkien Fried Mee", "Ipoh Coffee",
+ "Gula Malacca", "Rogede sild", "Spegesild", "Zaanse koeken", "Chocolade", "Maxilaku", "Valkoinen suklaa", "Manjimup Dried Apples", "Filo Mix", "Perth Pasties",
+ "Tourtière", "Pâté chinois", "Gnocchi di nonna Alice", "Ravioli Angelo", "Escargots de Bourgogne", "Raclette Courdavault", "Camembert Pierrot", "Sirop d\"érable",
+ "Tarte au sucre", "Vegie-spread", "Wimmers gute Semmelknödel", "Louisiana Fiery Hot Pepper Sauce", "Louisiana Hot Spiced Okra", "Laughing Lumberjack Lager", "Scottish Longbreads",
+ "Gudbrandsdalsost", "Outback Lager", "Flotemysost", "Mozzarella di Giovanni", "Röd Kaviar", "Longlife Tofu", "Rhönbräu Klosterbier", "Lakkalikööri", "Original Frankfurter grüne Soße"};
+ int OrderID = 10248;
+ int i = 0; int j = 0; int k = 0; int l = 0; int m = 0;
+ for (int x = 0; x < 20000; x++)
+ {
+ i = i >= Customer.Length ? 0 : i;
+ l = l >= Product.Length ? 0 : l;
+ Orders.Add(new OrderData()
+ {
+ OrderID = OrderID + x,
+ ProductID = x + 10,
+ CustomerName = Customer[i],
+ ProductName = Product[l],
+
+ });
+ i++; j++; k++; l++; m++;
+ }
+
+ }
+ return Orders;
+ }
-The following GIF represents the lazy load grouping functionality with paging in DataGrid
+ public int? OrderID { get; set; }
+ public string ProductName { get; set; }
+ public int? ProductID { get; set; }
+ public string CustomerName { get; set; }
+ }
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBfjiNqTFAghOTK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> * The [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) property is optional and can be set to **true** or **false** based on the requirement.
+> * When `EnableLazyLoading` is enabled with `EnableInfiniteScrolling`, the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property must be defined.
-
## Lazy load grouping with virtual scrolling
-When you enable lazy load grouping with the virtual scrolling feature, the Grid will render only the initial level caption rows in the collapsed state at grouping. The child rows of each caption will be fetched from the server and rendered in the Grid when you expand the caption row. The caption row expand/collapse state will be persisted while scrolling. In addition, for great performance, a loading placeholder indicator(masked row) is shown between the time of fetching the new data and binding it to the grid. Also, the same set of DOM elements is reused to improve performance.
+The lazy load grouping with virtual scrolling feature in the Syncfusion blazor Grid allows you to efficiently present and analyze large grouped datasets. This feature optimizes performance, reduces initial load time, and provides smooth scrolling through the dataset.
+
+**How lazy load grouping with virtual scrolling works**
-To enable lazy load grouping with virtual scrolling in the datagrid, 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 the [EnableLazyLoading](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_EnableLazyLoading) property of the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) class as **true**.
+1. When you enable lazy load grouping with virtual scrolling, the Grid renders only the initial level caption rows in a collapsed state.
-N> When `EnableLazyLoading` is enabled with `EnableVirtualization`, 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 must be defined.
+2. The child rows associated with each group caption are loaded and rendered in the Grid only when you expand the respective caption row.
-N> When enabling lazy load grouping with virtual scrolling, the [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) property is enabled by default. There is no need to use this property explicitly.
+3. Virtual scrolling allows the Grid to load and display a buffered set of records while scrolling vertically.
-The following sample code demonstrates the above:
+To enable this feature, you need to set the [EnableLazyLoading](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_EnableLazyLoading) property of the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) component and [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) properties to true.
-```cshtml
+The following example demonstrates how to enable the lazy load grouping with virtual scrolling feature using the `EnableLazyLoading` property of the `GridGroupSettings` component and `EnableVirtualization` property.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Data
-
-
-
-
- @{
- var customer = (context as CaptionTemplateContext);
-
@customer.Field - @customer.Key
- }
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
-@code{
- public string[] GroupedColumns = new string[] {"ProductName","CustomerID"};
- public List customers { get; set; } = Customer.GetAllRecords();
- public class Customer
+@code {
+ public List GridData { get; set; }
+
+ public string[] Initial = (new string[] { "ProductName", "CustomerName" });
+
+ protected override void OnInitialized()
{
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public string CustomerName { get; set; }
- public string CustomerAddress { get; set; }
- public string ProductName { get; set; }
- public int ProductID { get; set; }
- public string Quantity { get; set; }
- public int UnitsInStock { get; set; }
- public static List GetAllRecords()
+ GridData = OrderData.GetAllRecords();
+ }
+}
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+ public class OrderData
+ {
+ public static List Orders = new List();
+
+ public OrderData()
{
- List customers = new List();
- string[] CustomerId ={"VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "HANAR", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC",
- "OTTIK", "QUEDE", "RATTC", "ERNSH", "FOLKO", "BLONP", "WARTH", "FRANK", "GROSR", "WHITC", "WARTH", "SPLIR", "RATTC", "QUICK", "VINET",
- "MAGAA", "TORTU", "MORGK", "BERGS", "LEHMS", "BERGS", "ROMEY", "ROMEY", "LILAS", "LEHMS", "QUICK", "QUICK", "RICAR", "REGGC", "BSBEV",
- "COMMI", "QUEDE", "TRADH", "TORTU", "RATTC", "VINET", "LILAS", "BLONP", "HUNGO", "RICAR", "MAGAA", "WANDK", "SUPRD", "GODOS", "TORTU",
- "OLDWO", "ROMEY", "LONEP", "ANATR", "HUNGO", "THEBI", "DUMON", "WANDK", "QUICK", "RATTC", "ISLAT", "RATTC", "LONEP", "ISLAT", "TORTU",
- "WARTH", "ISLAT", "PERIC", "KOENE", "SAVEA", "KOENE", "BOLID", "FOLKO", "FURIB", "SPLIR", "LILAS", "BONAP", "MEREP", "WARTH", "VICTE",
- "HUNGO", "PRINI", "FRANK", "OLDWO", "MEREP", "BONAP", "SIMOB", "FRANK", "LEHMS", "WHITC", "QUICK", "RATTC", "FAMIA" };
- string[] Product = { "Chai", "Chang", "Syrup", "Corn Snacks", "Gumbo Mix", "Seeds",
- "Dried Pears", "Sauce", "Mishi Kobe Niku", "Ikura", "Queso Cabrales", "Queso Manchego Pastora", "Konbu",
- "Tofu", "Genen Shouyu", "Pavlova", "Alice Mutton", "Biscuits", "Teatime Chocolate Biscuits", "Sir Rodney\"s Marmalade", "Sir Rodney\"s Scones",
- "Gustaf\"s Knäckebröd", "Tunnbröd", "Guaraná Fantástica", "Nougat-Creme", "Gumbär Gummibärchen", "Schoggi Schokolade", "Rössle Sauerkraut",
- "Thüringer Rostbratwurst", "Nord-Ost Matjeshering", "Gorgonzola Telino", "Mascarpone Fabioli", "Geitost", "Sasquatch Ale", "Steeleye Stout", "Inlagd Sill",
- "Gravad lax", "Nuts", "Chips", "Crab Meat", "Jack\"s Clam Chowder", "Singaporean Fried Mee", "Ipoh Coffee",
- "Gula Malacca", "Rogede sild", "Spegesild", "Zaanse koeken", "Chocolade", "Maxilaku", "Valkoinen suklaa", "Manjimup Dried Apples", "Filo Mix", "Perth Pasties",
- "Tourtičre", "Pâté chinois", "Ipoh Coffee", "Ravioli Angelo", "Escargots Bourgogne", "Raclette Courdavault", "Cake", "Sirop d\"érable",
- "Tarte au sucre", "Vegie-spread", "Lakkalikri", "Louisiana Pepper Sauce", "Louisiana Hot Spiced Okra", "Lumberjack Lager", "Scottish Longbreads",
- "Gudbrandsdalsost", "Outback Lager", "Flotemysost", "Mozzarella di Giovanni", "Röd Kaviar", "Longlife Tofu", "Rhönbräu Klosterbier", "Lakkalikööri", "Original Frankfurter" };
- int OrderID = 1001;
- int i = 0; int j = 0; int k = 0; int l = 0; int m = 0;
- for (int x = 0; x < 500000; x++)
+
+ }
+ public OrderData(int? OrderID,string ProductName, int? ProductID, string CustomerName)
+ {
+ this.OrderID = OrderID;
+ this.ProductName = ProductName;
+ this.ProductID = ProductID;
+ this.CustomerName = CustomerName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
{
- i = i >= CustomerId.Length ? 0 : i;
- l = l >= Product.Length ? 0 : l;
- customers.Add(new Customer()
- {
- OrderID = OrderID + x,
- ProductID = x % 1000,
- CustomerID = CustomerId[i],
- ProductName = Product[l],
- UnitsInStock = new Random().Next(1, 10000)
- });
- i++; j++; k++; l++; m++;
+ int? code = 10247;
+ for (int i = 1; i < 19999; i++)
+ {
+ Orders.Add(new OrderData(code + 1, "Gumbär Gummib", i, "Marie Bertrand"));
+ Orders.Add(new OrderData(code + 2, "Valkoinen suklaa", i+1, "Paula Wilson"));
+ Orders.Add(new OrderData(code + 3, "Chai", i+2, "Giovanni Rovelli"));
+ Orders.Add(new OrderData(code + 4, "Guaraná Fantástica", i+3, "Yang Wang"));
+ Orders.Add(new OrderData(code + 5, "Chef Anton's Cajun Seasoning", i + 4, "Martín Sommer"));
+ Orders.Add(new OrderData(code + 6, "Gudbrandsdalsost", i + 5, "Laurence Lebihan"));
+ Orders.Add(new OrderData(code + 7, "Jack's New England Clam Chowder", i + 6, "Frédérique Citeaux"));
+ Orders.Add(new OrderData(code + 8, "Queso Cabrales", i + 7, "Philip Cramer"));
+ Orders.Add(new OrderData(code + 9, "Tarte au sucre", i + 8, "Francisco Chang"));
+ code += 9;
+ i += 8;
+ }
}
- return customers;
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string ProductName { get; set; }
+ public int? ProductID { get; set; }
+ public string CustomerName { get; set; }
}
-}
-```
+{% endhighlight %}
+{% endtabs %}
-The following GIF represents the lazy load grouping functionality with virtualization in DataGrid
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUsCMzgHLDLmbm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+> * When `EnableLazyLoading` is enabled with `EnableVirtualization`, 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 must be defined.
+> * When enabling lazy load grouping with virtual scrolling, the [EnableVirtualMaskRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualMaskRow) property is enabled by default. There is no need to use this property explicitly.
## Lazy load grouping with custom adaptor
-You can use the Custom Adaptor of `SfDataManager` when binding the remote data. Along with the default server request, this feature will additionally send the below details to handle the lazy load grouping. In the server end, these details are bound with the **LazyLoad** and **LazyExpandAllGroup** parameters in the `DataManagerRequest` model.
+You can use the Custom Adaptor of DataManager when binding the remote data. Along with the default server request, this feature will additionally send the below details to handle the lazy load grouping. In the server end, these details are bound with the **LazyLoad** and **LazyExpandAllGroup** parameters in the DataManagerRequest model.
| Property Name | Description |
|-------|---------|
@@ -215,94 +383,16 @@ The following code example describes the lazy load grouping handled at the serve
}
}
```
-## Lazy load grouping with infinite scrolling
-
-When you enable lazy load grouping with infinite scrolling, the Grid initially renders only the caption rows in a collapsed state during grouping. This feature supports parent-level caption rows and fetches additional caption rows when the scrollbar reaches the end of the scroller. For child items, it fetches data for the expanded caption rows using the row virtualization concept while performing a vertical scroll. In addition, for better performance, a loading placeholder indicator (masked row) is shown between the time of fetching the new data and binding it to the grid for rendering child items.
-
-To enable lazy load grouping with infinite scrolling in the datagrid, you need to define the [EnableInfiniteScrolling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableInfiniteScrolling) property as **true** and the [EnableLazyLoading](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_EnableLazyLoading) property of the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html) class as **true**.
-
-N> When `EnableLazyLoading` is enabled with `EnableInfiniteScrolling`, the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowHeight) property must be defined.
-
-The following sample code demonstrates the above:
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Data
-
-
-
-
- @{
- var customer = (context as CaptionTemplateContext);
-
@customer.Field - @customer.Key
- }
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- public string[] GroupedColumns = new string[] {"ProductName","CustomerID"};
- public List customers { get; set; } = Customer.GetAllRecords();
- public class Customer
- {
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public string CustomerName { get; set; }
- public string CustomerAddress { get; set; }
- public string ProductName { get; set; }
- public int ProductID { get; set; }
- public string Quantity { get; set; }
- public int UnitsInStock { get; set; }
- public static List GetAllRecords()
- {
- List customers = new List();
- string[] CustomerId ={"VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "HANAR", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC",
- "OTTIK", "QUEDE", "RATTC", "ERNSH", "FOLKO", "BLONP", "WARTH", "FRANK", "GROSR", "WHITC", "WARTH", "SPLIR", "RATTC", "QUICK", "VINET",
- "MAGAA", "TORTU", "MORGK", "BERGS", "LEHMS", "BERGS", "ROMEY", "ROMEY", "LILAS", "LEHMS", "QUICK", "QUICK", "RICAR", "REGGC", "BSBEV",
- "COMMI", "QUEDE", "TRADH", "TORTU", "RATTC", "VINET", "LILAS", "BLONP", "HUNGO", "RICAR", "MAGAA", "WANDK", "SUPRD", "GODOS", "TORTU",
- "OLDWO", "ROMEY", "LONEP", "ANATR", "HUNGO", "THEBI", "DUMON", "WANDK", "QUICK", "RATTC", "ISLAT", "RATTC", "LONEP", "ISLAT", "TORTU",
- "WARTH", "ISLAT", "PERIC", "KOENE", "SAVEA", "KOENE", "BOLID", "FOLKO", "FURIB", "SPLIR", "LILAS", "BONAP", "MEREP", "WARTH", "VICTE",
- "HUNGO", "PRINI", "FRANK", "OLDWO", "MEREP", "BONAP", "SIMOB", "FRANK", "LEHMS", "WHITC", "QUICK", "RATTC", "FAMIA" };
- string[] Product = { "Chai", "Chang", "Syrup", "Corn Snacks", "Gumbo Mix", "Seeds",
- "Dried Pears", "Sauce", "Mishi Kobe Niku", "Ikura", "Queso Cabrales", "Queso Manchego Pastora", "Konbu",
- "Tofu", "Genen Shouyu", "Pavlova", "Alice Mutton", "Biscuits", "Teatime Chocolate Biscuits", "Sir Rodney\"s Marmalade", "Sir Rodney\"s Scones",
- "Gustaf\"s Knäckebröd", "Tunnbröd", "Guaraná Fantástica", "Nougat-Creme", "Gumbär Gummibärchen", "Schoggi Schokolade", "Rössle Sauerkraut",
- "Thüringer Rostbratwurst", "Nord-Ost Matjeshering", "Gorgonzola Telino", "Mascarpone Fabioli", "Geitost", "Sasquatch Ale", "Steeleye Stout", "Inlagd Sill",
- "Gravad lax", "Nuts", "Chips", "Crab Meat", "Jack\"s Clam Chowder", "Singaporean Fried Mee", "Ipoh Coffee",
- "Gula Malacca", "Rogede sild", "Spegesild", "Zaanse koeken", "Chocolade", "Maxilaku", "Valkoinen suklaa", "Manjimup Dried Apples", "Filo Mix", "Perth Pasties",
- "Tourtičre", "Pâté chinois", "Ipoh Coffee", "Ravioli Angelo", "Escargots Bourgogne", "Raclette Courdavault", "Cake", "Sirop d\"érable",
- "Tarte au sucre", "Vegie-spread", "Lakkalikri", "Louisiana Pepper Sauce", "Louisiana Hot Spiced Okra", "Lumberjack Lager", "Scottish Longbreads",
- "Gudbrandsdalsost", "Outback Lager", "Flotemysost", "Mozzarella di Giovanni", "Röd Kaviar", "Longlife Tofu", "Rhönbräu Klosterbier", "Lakkalikööri", "Original Frankfurter" };
- int OrderID = 1001;
- int i = 0; int j = 0; int k = 0; int l = 0; int m = 0;
- for (int x = 0; x < 500000; x++)
- {
- i = i >= CustomerId.Length ? 0 : i;
- l = l >= Product.Length ? 0 : l;
- customers.Add(new Customer()
- {
- OrderID = OrderID + x,
- ProductID = x % 1000,
- CustomerID = CustomerId[i],
- ProductName = Product[l],
- UnitsInStock = new Random().Next(1, 10000)
- });
- i++; j++; k++; l++; m++;
- }
- return customers;
- }
- }
-}
-```
-
-The following GIF represents the lazy load grouping with infinite scrolling functionality in DataGrid
-
+## Limitations for lazy load grouping
+
+* Due to the element height limitation in browsers, the maximum number of records loaded by the grid is limited due to the browser capability.
+* Lazy load grouping is not compatible with the following features
+ * Batch editing
+ * Row template
+ * Row drag and drop
+ * Hierarchical Grid
+ * Detail Template
+* Programmatic selection is not supported in lazy load grouping when groups are in a collapsed state.
+* Drag selection, Cell selection (box and flow), Row Selection is not working in collapsed state.
+* Clipboard is not support when the groups are in collapsed state.
\ No newline at end of file