From b078114e88db96428900630de4803c56648e288e Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Wed, 16 Apr 2025 10:03:28 +0530 Subject: [PATCH 1/4] 936965: Revamp Row Selection topic --- blazor/datagrid/row-selection.md | 550 +++++++++++++++++++++++++++++++ 1 file changed, 550 insertions(+) create mode 100644 blazor/datagrid/row-selection.md diff --git a/blazor/datagrid/row-selection.md b/blazor/datagrid/row-selection.md new file mode 100644 index 0000000000..0fdd02b090 --- /dev/null +++ b/blazor/datagrid/row-selection.md @@ -0,0 +1,550 @@ +--- +layout: post +title: Row selection in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about Row selection in Syncfusion Blazor DataGrid and much more details. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Row selection in Blazor DataGrid + +Row selection in the Grid allows you to interactively select specific rows or ranges of rows within the Grid. This selection can be done effortlessly through mouse clicks or arrow keys (up, down, left, and right). This feature is useful when you want to highlight, manipulate, or perform actions on specific row within the Grid. + +> To enable row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to either **Row** or **Both**. This property determines the selection mode of the Grid. + +## Single row selection + +Single row selection allows you to select a single row at a time within the Grid. This feature is useful when you want to focus on specific rows or perform actions on the data within a particular row. + +To enable single row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Row** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Single**. This configuration allows you to select a only one row at a time within the grid. + +Here's an example of how to enable single row selection using properties: + +{% 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() { } + public OrderDetails(int orderID, string customerId, string shipCountry, double freight, DateTime orderDate, DateTime shippedDate) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.ShipCountry = shipCountry; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShippedDate = shippedDate; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "France", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10249, "TOMSP", "Germany", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10250, "HANAR", "Brazil", 65.83, new DateTime(1996, 7, 8), new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10251, "VICTE", "France", 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10252, "SUPRD", "Belgium", 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10253, "HANAR", "Brazil", 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10254, "CHOPS", "Switzerland", 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23))); + order.Add(new OrderDetails(10255, "RICSU", "Switzerland", 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24))); + order.Add(new OrderDetails(10256, "WELLI", "Brazil", 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25))); + order.Add(new OrderDetails(10257, "HILAA", "Venezuela", 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30))); + order.Add(new OrderDetails(10258, "ERNSH", "Austria", 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29))); + order.Add(new OrderDetails(10259, "CENTC", "Mexico", 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31))); + order.Add(new OrderDetails(10260, "OTTIK", "Germany", 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1))); + order.Add(new OrderDetails(10261, "QUEDE", "Brazil", 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2))); + order.Add(new OrderDetails(10262, "RATTC", "USA", 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5))); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCountry { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public DateTime ShippedDate { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLSXBNpsPDFTpMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Multiple row selection + +Multiple row selection allows you to select multiple rows within the Grid. This feature is valuable when you need to perform actions on several rows simultaneously or focus on specific data areas. + +To enable multiple row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Row** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Multiple**. This configuration allows you to select a multiple rows at a time within the Grid. + +Here's an example of how to enable multiple rows selection using properties: + +{% 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() { } + public OrderDetails(int orderID, string customerId, string shipCountry, double freight, DateTime orderDate, DateTime shippedDate) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.ShipCountry = shipCountry; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShippedDate = shippedDate; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "France", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10249, "TOMSP", "Germany", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 7, 10))); + order.Add(new OrderDetails(10250, "HANAR", "Brazil", 65.83, new DateTime(1996, 7, 8), new DateTime(1996, 7, 12))); + order.Add(new OrderDetails(10251, "VICTE", "France", 41.34, new DateTime(1996, 7, 8), new DateTime(1996, 7, 15))); + order.Add(new OrderDetails(10252, "SUPRD", "Belgium", 51.3, new DateTime(1996, 7, 9), new DateTime(1996, 7, 11))); + order.Add(new OrderDetails(10253, "HANAR", "Brazil", 58.17, new DateTime(1996, 7, 10), new DateTime(1996, 7, 16))); + order.Add(new OrderDetails(10254, "CHOPS", "Switzerland", 22.98, new DateTime(1996, 7, 11), new DateTime(1996, 7, 23))); + order.Add(new OrderDetails(10255, "RICSU", "Switzerland", 148.33, new DateTime(1996, 7, 12), new DateTime(1996, 7, 24))); + order.Add(new OrderDetails(10256, "WELLI", "Brazil", 13.97, new DateTime(1996, 7, 15), new DateTime(1996, 7, 25))); + order.Add(new OrderDetails(10257, "HILAA", "Venezuela", 81.91, new DateTime(1996, 7, 16), new DateTime(1996, 7, 30))); + order.Add(new OrderDetails(10258, "ERNSH", "Austria", 140.51, new DateTime(1996, 7, 17), new DateTime(1996, 7, 29))); + order.Add(new OrderDetails(10259, "CENTC", "Mexico", 3.25, new DateTime(1996, 7, 18), new DateTime(1996, 7, 31))); + order.Add(new OrderDetails(10260, "OTTIK", "Germany", 55.09, new DateTime(1996, 7, 19), new DateTime(1996, 8, 1))); + order.Add(new OrderDetails(10261, "QUEDE", "Brazil", 3.05, new DateTime(1996, 7, 19), new DateTime(1996, 8, 2))); + order.Add(new OrderDetails(10262, "RATTC", "USA", 48.29, new DateTime(1996, 7, 22), new DateTime(1996, 8, 5))); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCountry { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public DateTime ShippedDate { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVIXBNJCPSpibPz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Select row at initial rendering + +You can select a specific row during the initial rendering of the Grid. This feature is particularly useful when you want to highlight or pre-select a specific row in the Grid. To achieve this, use the [SelectedRowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectedRowIndex) property provided by the Grid. + +The following example demonstrates how to select a row during the initial rendering: + +{% 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() { } + public OrderDetails(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 (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + } + return order; + } + 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/rXVStrjfsuosZEoz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Multiple row selection by single click on row + +The DataGrid allows you to perform multiple row selections by simply clicking on rows one by one without pressing the CTRL or SHIFT keys. This means that when you click on a row, it will be selected, and clicking on another row will add it to the selection without deselecting the previously selected rows. To deselect a previously selected row, you can click on the row again, and it will be unselected. + +To enable simple multiple row selection, you need to set the [GridSelectionSettings.EnableSimpleMultiRowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_EnableSimpleMultiRowSelection) property to **true**. + +The following example demonstrates how to enable multiple row selection with a single click on the Grid row using the `EnableSimpleMultiRowSelection` property: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
+ + +
+ + + + + + + + + + +@code { + private SfGrid Grid; + public bool SimpleMultiRowSelectionValue { get; set; } + public List OrderData { get; set; } + + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + private void toggleRowSelection(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + { + SimpleMultiRowSelectionValue = args.Checked; + Grid.Refresh(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(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 (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + } + return order; + } + 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/LNrIjfWoTqSCQLJr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Select rows externally + +You can perform single row selection, multiple row selection, and a range of row selection externally in a Grid using built-in methods. This feature allows you to interact with specific rows within the Grid. The following topic demonstrates how you can achieve these selections using methods. + +### Single row selection + +Single row selection allows you to select a single row at a time within the Grid. This feature is useful when you want to focus on specific rows or perform actions on the data within a particular row. + +To achieve single row selection, you can use the [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. This method allows you to programmatically select a specific row within the Grid by specifying its index. + +The following example demonstrates how to select a single row within the Grid by obtaining the selected row index through a textbox and passing this row index as an argument to the `SelectRowAsync` method. When the button event is triggered by clicking the **Select Row** button, a single row is selected within the Grid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Inputs + +
+ + +
+
+ Select Row +
+ + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public int RowIndexValue; + public async Task SelectRow() + { + await Grid.SelectRowAsync(RowIndexValue); + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, double freight, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.Freight = freight; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthetJCezkFWiJjM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Range of rows selection + +Range of row selection in the Grid enables you to select a continuous range of rows within the grid. This feature is particularly useful when you want to perform actions on multiple rows simultaneously or focus on a specific range of data. + +To achieve range of row selection, you can use the [selectRowsByRange](https://ej2.syncfusion.com/angular/documentation/api/grid/selection/#selectcolumnsbyrange) method. This method selects a range of rows from start and end row indexes. + +The following example, demonstrates how to select a range of rows within the Grid by obtaining the selected rows start index and end index through textbox. Then, pass these start index and end index as arguments to the `selectRowsByRange` method. When you trigger the button event by clicking the **Select Rows** button, a range of rows is selected within the Grid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Inputs + +
+ + +
+
+ + +
+
+ Select Rows +
+ + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public int StartRowIndexValue; + public int EndRowIndexValue; + public async Task SelectRows() + { + await Grid.SelectRowsByRangeAsync(StartRowIndexValue, EndRowIndexValue); + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, double freight, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.Freight = freight; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhINfiIdMXhvlal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file From 5f9504703053fa85c4be1880adeeed52bc4e1575 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Thu, 17 Apr 2025 09:04:14 +0530 Subject: [PATCH 2/4] 936965: Revamp Row Selection topic --- blazor-toc.html | 3 + blazor/datagrid/row-selection.md | 624 ++++++++++++++++++++++++++++++- 2 files changed, 622 insertions(+), 5 deletions(-) diff --git a/blazor-toc.html b/blazor-toc.html index 30c5403b1c..bdcd1e20e5 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1920,6 +1920,9 @@
  • Selection +
  • Aggregates diff --git a/blazor/datagrid/row-selection.md b/blazor/datagrid/row-selection.md index 0fdd02b090..737fc9ad83 100644 --- a/blazor/datagrid/row-selection.md +++ b/blazor/datagrid/row-selection.md @@ -362,7 +362,7 @@ Single row selection allows you to select a single row at a time within the Grid To achieve single row selection, you can use the [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. This method allows you to programmatically select a specific row within the Grid by specifying its index. -The following example demonstrates how to select a single row within the Grid by obtaining the selected row index through a textbox and passing this row index as an argument to the `SelectRowAsync` method. When the button event is triggered by clicking the **Select Row** button, a single row is selected within the Grid: +The following example demonstrates how to select a single row within the Grid by obtaining the selected row index through a `NumericTextBox` and passing this row index as an argument to the `SelectRowAsync` method. When the button event is triggered by clicking the **Select Row** button, a single row is selected within the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -450,13 +450,111 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/LthetJCezkFWiJjM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +### Multiple rows selection + +The Blazor DataGrid allows you to select multiple rows within the Grid simultaneously. This feature is valuable when you need to perform actions or operations on several rows at once or focus on specific areas of your data. + +To achieve multiple row selection, you can use the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) method. This method allows you to select a collection of rows by specifying their indexes, giving you the ability to interact with multiple rows together. + +The following example, demonstrates how to select multiple rows in the Grid by calling the `SelectRowsAsync` method within the button click event and passing an array of row indexes as arguments. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
    + Select [1, 3] + Select [0, 2] + Select [2, 4] + Select [0, 5] + Select [1, 6] +
    +
    + Select [0, 7, 8] + Select [1, 9, 10] + Select [4, 7, 12] + Select [2, 5, 6] +
    + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public async Task SelectMultipleRows(int[] rowIndexes) + { + await Grid.SelectRowsAsync(rowIndexes); + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, double freight, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.Freight = freight; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBejJCxVytqWHSm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ### Range of rows selection -Range of row selection in the Grid enables you to select a continuous range of rows within the grid. This feature is particularly useful when you want to perform actions on multiple rows simultaneously or focus on a specific range of data. +Range of row selection in the Grid enables you to select a continuous range of rows within the Grid. This feature is particularly useful when you want to perform actions on multiple rows simultaneously or focus on a specific range of data. -To achieve range of row selection, you can use the [selectRowsByRange](https://ej2.syncfusion.com/angular/documentation/api/grid/selection/#selectcolumnsbyrange) method. This method selects a range of rows from start and end row indexes. +To achieve range of row selection, you can use the [SelectRowsByRangeAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsByRangeAsync_System_Int32_System_Nullable_System_Int32__) method. This method selects a range of rows from start and end row indexes. -The following example, demonstrates how to select a range of rows within the Grid by obtaining the selected rows start index and end index through textbox. Then, pass these start index and end index as arguments to the `selectRowsByRange` method. When you trigger the button event by clicking the **Select Rows** button, a range of rows is selected within the Grid. +The following example, demonstrates how to select a range of rows within the Grid by obtaining the selected rows start index and end index through `NumericTextBox`. Then, pass these start index and end index as arguments to the `SelectRowsByRangeAsync` method. When you trigger the button event by clicking the **Select Rows** button, a range of rows is selected within the Grid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -547,4 +645,520 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhINfiIdMXhvlal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhINfiIdMXhvlal?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## How to get selected row indexes + +You can retrieve the indexes of the currently selected rows in the Grid. This feature is particularly useful when you need to perform actions or operations specifically on the selected rows. + +To achieve this, you can leverage the [GetSelectedRowIndexesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRowIndexesAsync) method, which returns an array of numbers representing the indexes of the selected rows. + +The following example demonstrates how to get selected row indexes using `GetSelectedRowIndexesAsync` method: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
    + Get selected row indexes +
    +@if (ShowMessage) +{ +

    Selected row indexes: @string.Join(", ", SelectedRowIndexes)

    +} + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + private List SelectedRowIndexes = new(); + private bool ShowMessage = false; + public async Task GetSelectedRowIndexes() + { + if (Grid != null) + { + SelectedRowIndexes = await Grid.GetSelectedRowIndexesAsync(); + ShowMessage = SelectedRowIndexes.Count > 0; + } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(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 (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier")); + order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock")); + order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt")); + order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora")); + order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos")); + order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel")); + order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma")); + order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen")); + order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia")); + order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery")); + } + return order; + } + 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/rtVyNpCHKqQLLwhl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## How to get selected records on various pages + +The DataGrid allows you to retrieve the selected records even when navigating to different pages. This feature is useful when working with large data sets and allows you to perform actions on the selected records across multiple pages. + +To persist the selection across pages, you need to enable the [PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the `GridSelectionSettings` property of the Grid. + +To retrieve the selected records from different pages, you can use the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) method. This method returns an array of the selected records. + +The following example demonstrates how to retrieve selected records from various pages using the `GetSelectedRecordsAsync` method and display **OrderID** in a dialog when a button is clicked: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Popups + +
    + Show Selected Records +
    + + + + @if (selectedRecords != null) + { + @foreach (var record in selectedRecords) + { +

    Order ID:@record.OrderID

    + } + } +     +     +     + + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + private List selectedRecords; + private bool DialogVisible { get; set; } = false; + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + private async Task ShowSelectedRecords() + { + selectedRecords = await Grid.GetSelectedRecordsAsync(); + DialogVisible = true; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, double freight, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.Freight = freight; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + string[] customerIds = { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH" }; + string[] countries = { "France", "Germany", "Brazil", "USA", "Sweden", "Venezuela", "Mexico", "Austria", "Finland", "UK" }; + Random rand = new Random(); + for (int i = 1; i <= 50; i++) + { + int orderId = 10247 + i; + string customerId = customerIds[rand.Next(customerIds.Length)]; + double freight = Math.Round(rand.NextDouble() * 200, 2); // up to 200 + string country = countries[rand.Next(countries.Length)]; + order.Add(new OrderDetails(orderId, customerId, freight, country)); + } + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrojpCGMsgUVzNP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + +> To persist the Grid selection, it is necessary to define any one of the columns as a primary key using the [GridColumn.IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property. + +## How to get selected records + +The get selected records allows you to retrieve the data of the selected rows from the Grid. This can be particularly useful when you need to perform actions on the selected data or display specific information based on the selected rows. + +To retrieve the selected records, you can use the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) method. This method allows you to obtain an array of objects representing the selected records. + +Here's an example that displays the selected row count using the `GetSelectedRecordsAsync` method: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
    + Selected Records count +
    +@if (ShowMessage) +{ +

    Selected record count: @string.Join(", ", SelectedRecordscount.Count)

    +} + + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + private List SelectedRecordscount = new(); + private bool ShowMessage = false; + public async Task SelectedRecordsCount() + { + if (Grid != null) + { + SelectedRecordscount = await Grid.GetSelectedRecordsAsync(); + ShowMessage = SelectedRecordscount.Count > 0; + } + } +} + + +{% endhighlight %} + +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, DateTime orderDate, double freight, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.OrderDate = orderDate; + this.Freight = freight; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", new DateTime(1996, 7, 4), 32.38, "France")); + order.Add(new OrderDetails(10249, "TOMSP", new DateTime(1996, 7, 5), 11.61, "Germany")); + order.Add(new OrderDetails(10250, "HANAR", new DateTime(1996, 7, 8), 65.83, "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", new DateTime(1996, 7, 8), 41.34, "France")); + order.Add(new OrderDetails(10252, "SUPRD", new DateTime(1996, 7, 9), 51.3, "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", new DateTime(1996, 7, 10), 58.17, "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", new DateTime(1996, 7, 11), 22.98, "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", new DateTime(1996, 7, 12), 148.33, "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", new DateTime(1996, 7, 15), 13.97, "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", new DateTime(1996, 7, 16), 81.91, "Venezuela")); + order.Add(new OrderDetails(10258, "ERNSH", new DateTime(1996, 7, 17), 140.51, "Austria")); + order.Add(new OrderDetails(10259, "CENTC", new DateTime(1996, 7, 18), 3.25, "Mexico")); + order.Add(new OrderDetails(10260, "OTTIK", new DateTime(1996, 7, 19), 55.09, "Germany")); + order.Add(new OrderDetails(10261, "QUEDE", new DateTime(1996, 7, 19), 3.05, "Brazil")); + order.Add(new OrderDetails(10262, "RATTC", new DateTime(1996, 7, 22), 48.29, "USA")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVeXJsnfmHOKSNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Clear row selection programmatically + +Clearing row selection programmatically in the Grid is a useful feature when you want to remove any existing row selections. To achieve this, you can use the [ClearRowSelectionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearRowSelectionAsync) method. + +>The `ClearRowSelectionAsync` method is applicable when the selection [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) is set to **Multiple** or **Single**. + +The following example demonstrates how to clear row selection by calling the `ClearRowSelectionAsync` method in the button click event. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
    + Clear Row Selection +
    + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public async Task ClearRowSelection() + { + await Grid.ClearRowSelectionAsync(); + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, double freight, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.Freight = freight; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSDTsxJlVCTaNq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Row selection events + +The Grid provides several events related to row selection that allow you to respond to and customize the behavior of row selection. These events give you control over various aspects of row selection. Here are the available row selection events: + +[RowSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelecting): This event is triggered before any row selection occurs. It provides an opportunity to implement custom logic or validation before a row is selected, allowing you to control the selection process. + +[RowSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelected): This event is triggered after a row is successfully selected. You can use this event to perform actions or updates when a row is selected. + +[RowDeselecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeselecting): This event is triggered just before a selected row is deselected. It allows you to perform custom logic or validation to decide whether the row should be deselected or not. + +[RowDeselected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeselected): This event is triggered when a particular selected row is deselected. You can use this event to perform actions or validations when a row is no longer selected. + +In the following example, row selection is canceled when the value of **CustomerID** is equal to **VINET** within the `RowSelecting` event and row deselection is canceled when the value of **OrderID** is even within the `RowDeselecting` event. A notification message is displayed to indicate which event was triggered whenever a row is selected. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + +
    + @RowSelectionMessage +
    + + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public string RowSelectionMessage; + public void RowselectingHandler(RowSelectingEventArgs Args) + { + if (Args.Data.CustomerID == "VINET") + { + Args.Cancel = true; + RowSelectionMessage = "RowSelecting event is triggered. Selection prevented for CustomerID column Vinet value."; + } + } + public void RowselectHandler(RowSelectEventArgs Args) + { + RowSelectionMessage = "Trigger RowSelected."; + } + public void RowDeselectingHandler(RowDeselectEventArgs Args) + { + if ((Args.Data.OrderID)%2 == 0) + { + Args.Cancel = true; + RowSelectionMessage = "RowDeSelecting event is triggered. DeSelection prevented for OrderID column even values"; + } + } + public void RowDeselectHandler(RowDeselectEventArgs Args) + { + RowSelectionMessage = "Trigger RowDeSelected."; + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, double freight, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.Freight = freight; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVojfiHRoXjmSqN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file From 5fca419ed3d23cada90ee1ea9a1ea896c22522ca Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Mon, 21 Apr 2025 10:09:20 +0530 Subject: [PATCH 3/4] 936965: Revamp Row Selection topic --- blazor/datagrid/row-selection.md | 120 ++++++++++++++++++++++++++++++- 1 file changed, 119 insertions(+), 1 deletion(-) diff --git a/blazor/datagrid/row-selection.md b/blazor/datagrid/row-selection.md index 737fc9ad83..4ae85f465b 100644 --- a/blazor/datagrid/row-selection.md +++ b/blazor/datagrid/row-selection.md @@ -260,6 +260,124 @@ public class OrderDetails {% previewsample "https://blazorplayground.syncfusion.com/embed/rXVStrjfsuosZEoz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +## Select rows in any page based on index value + +The Grid allows you to select rows in any page based on their index value. This feature is useful when you want to perform specific actions on rows, such as highlighting, applying styles, or executing operations, regardless of their location across multiple pages within the grid. + +To achieve this, you can utilize the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) method and the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method of the Grid. By handling the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of `DropDownList`, you can implement the logic to navigate to the desired page and select the row based on the index value. + +The following example demonstrates how to select rows in any page based on index value using `ValueChange` event: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + +
    + + + + + +
    + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + protected override void OnInitialized() + { + Orders = Order.GetAllRecords(); + } + public class DropDownOrder + { + public string Text { get; set; } + public string Value { get; set; } + } + public int PageSizeValue = 10; + private List DropDownData = new() + { + new() { Text = "1", Value = "1" }, + new() { Text = "2", Value = "2" }, + new() { Text = "30", Value = "30" }, + new() { Text = "80", Value = "80" }, + new() { Text = "110", Value = "110" }, + new() { Text = "120", Value = "120" }, + new() { Text = "210", Value = "210" }, + new() { Text = "310", Value = "310" }, + new() { Text = "410", Value = "410" }, + new() { Text = "230", Value = "230" } + }; + private async Task ValueChange(ChangeEventArgs Args) + { + int seletedrowIndex = Args.Value; + int pageSize = Grid.PageSettings.PageSize; + int pageIndex = (seletedrowIndex - 1) / pageSize + 1; + int rowIndex = (seletedrowIndex - 1) % pageSize; + await Grid.GoToPageAsync(pageIndex); + await Grid.SelectRowAsync(rowIndex, true); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="Order.cs" %} + +public class Order +{ + public static List Orders = new List(); + public Order() { } + public Order(int orderID, string customerID, double freight, DateTime orderDate, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.OrderDate = orderDate; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + string[] customerIDs = { "VINET", "TOMSP", "HANAR", "SUPRD", "CHOPS", "RATTC", "ERNSH", "FOLKO", "BLONP", "WARTH" }; + string[] countries = { "France", "Germany", "Brazil", "Belgium", "Switzerland", "USA", "Canada", "Mexico", "Italy", "UK" }; + Random rand = new Random(); + DateTime startDate = new DateTime(2020, 1, 1); + for (int i = 0; i < 500; i++) + { + int orderId = 10248 + i; + string customerId = customerIDs[rand.Next(customerIDs.Length)]; + double freight = Math.Round(rand.NextDouble() * 500, 2); + DateTime orderDate = startDate.AddDays(rand.Next(0, 1000)); + string shipCountry = countries[rand.Next(countries.Length)]; + Orders.Add(new Order(orderId, customerId, freight, orderDate, shipCountry)); + } + } + return Orders; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVojfLsCxSoSKyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Multiple row selection by single click on row The DataGrid allows you to perform multiple row selections by simply clicking on rows one by one without pressing the CTRL or SHIFT keys. This means that when you click on a row, it will be selected, and clicking on another row will add it to the selection without deselecting the previously selected rows. To deselect a previously selected row, you can click on the row again, and it will be unselected. @@ -831,7 +949,7 @@ public class OrderDetails { int orderId = 10247 + i; string customerId = customerIds[rand.Next(customerIds.Length)]; - double freight = Math.Round(rand.NextDouble() * 200, 2); // up to 200 + double freight = Math.Round(rand.NextDouble() * 200, 2); string country = countries[rand.Next(countries.Length)]; order.Add(new OrderDetails(orderId, customerId, freight, country)); } From a192c3469c89db9ebe6caf6d024bb77f1f9c7f0d Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Fri, 25 Apr 2025 10:39:15 +0530 Subject: [PATCH 4/4] 936965: Updated Row Selection content --- blazor/datagrid/row-selection.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/blazor/datagrid/row-selection.md b/blazor/datagrid/row-selection.md index 4ae85f465b..060fae253c 100644 --- a/blazor/datagrid/row-selection.md +++ b/blazor/datagrid/row-selection.md @@ -17,7 +17,7 @@ Row selection in the Grid allows you to interactively select specific rows or ra Single row selection allows you to select a single row at a time within the Grid. This feature is useful when you want to focus on specific rows or perform actions on the data within a particular row. -To enable single row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Row** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Single**. This configuration allows you to select a only one row at a time within the grid. +To enable single row selection, set the [GridSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) property to **Row** and the [GridSelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Type) property to **Single**. This configuration allows you to select a only one row at a time within the Grid. Here's an example of how to enable single row selection using properties: @@ -48,7 +48,7 @@ Here's an example of how to enable single row selection using properties: {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight cs tabtitle="OrderDetails.cs" %} public class OrderDetails { @@ -133,7 +133,7 @@ Here's an example of how to enable multiple rows selection using properties: {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight cs tabtitle="OrderDetails.cs" %} public class OrderDetails { @@ -214,7 +214,7 @@ The following example demonstrates how to select a row during the initial render {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight cs tabtitle="OrderDetails.cs" %} public class OrderDetails { @@ -262,7 +262,7 @@ public class OrderDetails ## Select rows in any page based on index value -The Grid allows you to select rows in any page based on their index value. This feature is useful when you want to perform specific actions on rows, such as highlighting, applying styles, or executing operations, regardless of their location across multiple pages within the grid. +The Grid allows you to select rows in any page based on their index value. This feature is useful when you want to perform specific actions on rows, such as highlighting, applying styles, or executing operations, regardless of their location across multiple pages within the Grid. To achieve this, you can utilize the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SelectRowsAsync_System_Int32___) method and the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method of the Grid. By handling the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of `DropDownList`, you can implement the logic to navigate to the desired page and select the row based on the index value. @@ -332,7 +332,7 @@ The following example demonstrates how to select rows in any page based on index {% endhighlight %} -{% highlight c# tabtitle="Order.cs" %} +{% highlight cs tabtitle="Order.cs" %} public class Order { @@ -424,7 +424,7 @@ The following example demonstrates how to enable multiple row selection with a s {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight cs tabtitle="OrderDetails.cs" %} public class OrderDetails { @@ -817,7 +817,7 @@ The following example demonstrates how to get selected row indexes using `GetSe {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight cs tabtitle="OrderDetails.cs" %} public class OrderDetails { @@ -925,7 +925,7 @@ The following example demonstrates how to retrieve selected records from various {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight cs tabtitle="OrderDetails.cs" %} public class OrderDetails { @@ -1030,7 +1030,7 @@ Here's an example that displays the selected row count using the `GetSelectedRec {% endhighlight %} -{% highlight c# tabtitle="OrderDetails.cs" %} +{% highlight cs tabtitle="OrderDetails.cs" %} public class OrderDetails {