From 9c1c4c0dcbe18c1bbdd02d8d05555062491273e7 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Thu, 17 Apr 2025 22:39:09 +0530 Subject: [PATCH 1/4] 936972: Revamp Checkbox Selection topic --- blazor-toc.html | 3 + blazor/datagrid/checkbox-selection.md | 366 ++++++++++++++++++++++++++ 2 files changed, 369 insertions(+) create mode 100644 blazor/datagrid/checkbox-selection.md diff --git a/blazor-toc.html b/blazor-toc.html index 9e9812120a..4aa327927d 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1923,6 +1923,9 @@
  • Selection +
  • Aggregates diff --git a/blazor/datagrid/checkbox-selection.md b/blazor/datagrid/checkbox-selection.md new file mode 100644 index 0000000000..a3bce0b938 --- /dev/null +++ b/blazor/datagrid/checkbox-selection.md @@ -0,0 +1,366 @@ +--- +layout: post +title: Check box selection in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about Check box Selection in Syncfusion Blazor DataGrid and much more details. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Check box Selection in Blazor DataGrid + +Checkbox selection in the Blazor DataGrid allows you to select multiple records using a checkbox in each row. This feature is particularly useful for performing bulk actions or operations on selected records within the Grid. + +To render a checkbox in each Grid row, you need to use a checkbox column with the type set to **CheckBox** using the column's [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property. + +Here's an example of how to enable checkbox selection using the `Type` property in the Grid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + 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/LNBoNTicUWFQPhGN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * By default, selection is allowed by clicking a Grid row or the checkbox in that row. To allow selection only through the checkbox, you can set the [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**. +> * Selection can be persisted across all operations using the [GridSelectionSettings.PersistSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_PersistSelection) property. To persist selection on the Grid, one of the columns must be defined 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. + +## Checkbox selection mode + +The checkbox selection mode in the Grid allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. This feature provides two types of checkbox selection modes that can be set using the [GridSelectionSettings.CheckboxMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxMode) property. The available modes are: + +* **Default**: This is the default value of the `CheckboxMode`. In this mode, you can select multiple rows by clicking on rows one by one. When you click on a row, the checkbox associated with that row also switches to the 'checked' state. +* **ResetOnRowClick**: In `ResetOnRowClick` mode, clicking on a row will reset the previously selected row. You can also perform multiple selections in this mode by pressing and holding the CTRL key while clicking the desired rows. To select a range of rows, press and hold the SHIFT key and click the rows. + +In the following example, it demonstrates how to dynamically enable and change the `CheckboxMode` using the `DropDownList`: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + +
    + + + + + +
    + + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + public CheckboxSelectionType CheckboxModeValue { get; set; } = CheckboxSelectionType.Default; + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } + public class DropDownOrder + { + public string Text { get; set; } + public CheckboxSelectionType Value { get; set; } + } + public void OnChange(ChangeEventArgs Args) + { + CheckboxModeValue = Args.Value; + Grid.Refresh(); + } + List DropDownValue = new List + { + new DropDownOrder() { Text = "Default", Value = CheckboxSelectionType.Default }, + new DropDownOrder() { Text = "ResetOnRowClick", Value = CheckboxSelectionType.ResetOnRowClick}, + }; +} + +{% endhighlight %} + +{% highlight cs 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/BZLyXJimgruCiwDc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Hide selectall checkbox in column header + +You can hide the select all checkbox in the column header of the Syncfusion® Grid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the Grid. + +By default, when you set the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type)e as **CheckBox**, it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) directive in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). + +Here's an example of how to hide selectall checkbox in column header using empty `HeaderTemplate` directive in the Grid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + 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/BDhytpWmqAXcGldO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Allow selection only through checkbox click + +By default, the Blazor DataGrid allows selection by clicking either a Grid row or the checkbox within that row. To restrict selection so that it can only be performed by clicking the checkboxes, set the [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**. + +Here's an example of how to enable selection only through checkbox clicks using the `CheckboxOnly` property: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight cs tabtitle="OrderDetails.cs" %} + +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int orderID, string customerId, DateTime orderDate, double freight, DateTime shippedDate, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerId; + this.OrderDate = orderDate; + this.Freight = freight; + this.ShippedDate = shippedDate; + this.ShipCountry = shipCountry; + } + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "VINET", new DateTime(1996, 7, 4), 32.38, new DateTime(1996, 7, 16), "France")); + order.Add(new OrderDetails(10249, "TOMSP", new DateTime(1996, 7, 5), 11.61, new DateTime(1996, 7, 10), "Germany")); + order.Add(new OrderDetails(10250, "HANAR", new DateTime(1996, 7, 8), 65.83, new DateTime(1996, 7, 12), "Brazil")); + order.Add(new OrderDetails(10251, "VICTE", new DateTime(1996, 7, 8), 41.34, new DateTime(1996, 7, 15), "France")); + order.Add(new OrderDetails(10252, "SUPRD", new DateTime(1996, 7, 9), 51.3, new DateTime(1996, 7, 11), "Belgium")); + order.Add(new OrderDetails(10253, "HANAR", new DateTime(1996, 7, 10), 58.17, new DateTime(1996, 7, 16), "Brazil")); + order.Add(new OrderDetails(10254, "CHOPS", new DateTime(1996, 7, 11), 22.98, new DateTime(1996, 7, 23), "Switzerland")); + order.Add(new OrderDetails(10255, "RICSU", new DateTime(1996, 7, 12), 148.33, new DateTime(1996, 7, 24), "Switzerland")); + order.Add(new OrderDetails(10256, "WELLI", new DateTime(1996, 7, 15), 13.97, new DateTime(1996, 7, 25), "Brazil")); + order.Add(new OrderDetails(10257, "HILAA", new DateTime(1996, 7, 16), 81.91, new DateTime(1996, 7, 30), "Venezuela")); + order.Add(new OrderDetails(10258, "ERNSH", new DateTime(1996, 7, 17), 140.51, new DateTime(1996, 7, 29), "Austria")); + order.Add(new OrderDetails(10259, "CENTC", new DateTime(1996, 7, 18), 3.25, new DateTime(1996, 7, 31), "Mexico")); + order.Add(new OrderDetails(10260, "OTTIK", new DateTime(1996, 7, 19), 55.09, new DateTime(1996, 8, 1), "Germany")); + order.Add(new OrderDetails(10261, "QUEDE", new DateTime(1996, 7, 19), 3.05, new DateTime(1996, 8, 2), "Brazil")); + order.Add(new OrderDetails(10262, "RATTC", new DateTime(1996, 7, 22), 48.29, new DateTime(1996, 8, 5), "USA")); + } + return order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime OrderDate { get; set; } + public double? Freight { get; set; } + public DateTime ShippedDate { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLoXfCmHiVdHPNn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file From 4ceadfdead8bf054f2c2e1be8420898a2561ae8d Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Fri, 25 Apr 2025 10:37:39 +0530 Subject: [PATCH 2/4] 936972: Updated Checkbox Selection content --- blazor/datagrid/checkbox-selection.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/datagrid/checkbox-selection.md b/blazor/datagrid/checkbox-selection.md index a3bce0b938..efb1d42a4f 100644 --- a/blazor/datagrid/checkbox-selection.md +++ b/blazor/datagrid/checkbox-selection.md @@ -198,7 +198,7 @@ public class OrderDetails ## Hide selectall checkbox in column header -You can hide the select all checkbox in the column header of the Syncfusion® Grid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the Grid. +You can hide the select all checkbox in the column header of the Syncfusion Blazor DataGrid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the Grid. By default, when you set the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type)e as **CheckBox**, it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) directive in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). From d96273f7a603c2e3c0f2b2f091a4b4ad3cb20540 Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Tue, 29 Apr 2025 11:00:37 +0530 Subject: [PATCH 3/4] 936972: Updated Checkbox Selection content --- blazor/datagrid/checkbox-selection.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/datagrid/checkbox-selection.md b/blazor/datagrid/checkbox-selection.md index efb1d42a4f..f88ac5736b 100644 --- a/blazor/datagrid/checkbox-selection.md +++ b/blazor/datagrid/checkbox-selection.md @@ -9,7 +9,7 @@ documentation: ug # Check box Selection in Blazor DataGrid -Checkbox selection in the Blazor DataGrid allows you to select multiple records using a checkbox in each row. This feature is particularly useful for performing bulk actions or operations on selected records within the Grid. +Checkbox selection in the Syncfusion Blazor DataGrid allows you to select multiple records using a checkbox in each row. This feature is particularly useful for performing bulk actions or operations on selected records within the Grid. To render a checkbox in each Grid row, you need to use a checkbox column with the type set to **CheckBox** using the column's [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property. @@ -92,7 +92,7 @@ public class OrderDetails ## Checkbox selection mode -The checkbox selection mode in the Grid allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. This feature provides two types of checkbox selection modes that can be set using the [GridSelectionSettings.CheckboxMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxMode) property. The available modes are: +The checkbox selection mode in the Syncfusion Blazor DataGrid allows you to select rows either by clicking on checkboxes or by clicking on the rows themselves. This feature provides two types of checkbox selection modes that can be set using the [GridSelectionSettings.CheckboxMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxMode) property. The available modes are: * **Default**: This is the default value of the `CheckboxMode`. In this mode, you can select multiple rows by clicking on rows one by one. When you click on a row, the checkbox associated with that row also switches to the 'checked' state. * **ResetOnRowClick**: In `ResetOnRowClick` mode, clicking on a row will reset the previously selected row. You can also perform multiple selections in this mode by pressing and holding the CTRL key while clicking the desired rows. To select a range of rows, press and hold the SHIFT key and click the rows. @@ -198,7 +198,7 @@ public class OrderDetails ## Hide selectall checkbox in column header -You can hide the select all checkbox in the column header of the Syncfusion Blazor DataGrid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the Grid. +The Syncfusion Blazor DataGrid allows you to hide the select all checkbox in the column header of the Syncfusion Blazor DataGrid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the Grid. By default, when you set the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type)e as **CheckBox**, it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) directive in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). @@ -282,7 +282,7 @@ public class OrderDetails ## Allow selection only through checkbox click -By default, the Blazor DataGrid allows selection by clicking either a Grid row or the checkbox within that row. To restrict selection so that it can only be performed by clicking the checkboxes, set the [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**. +By default, the Syncfusion Blazor DataGrid allows selection by clicking either a Grid row or the checkbox within that row. To restrict selection so that it can only be performed by clicking the checkboxes, set the [GridSelectionSettings.CheckboxOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CheckboxOnly) property to **true**. Here's an example of how to enable selection only through checkbox clicks using the `CheckboxOnly` property: From 95abc53ad2dd3296bbec7b53e44f81ad883d258c Mon Sep 17 00:00:00 2001 From: Vinitha Balasubramanian Date: Mon, 5 May 2025 20:35:15 +0530 Subject: [PATCH 4/4] 936972: Addressed review corrections --- blazor/datagrid/checkbox-selection.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/blazor/datagrid/checkbox-selection.md b/blazor/datagrid/checkbox-selection.md index f88ac5736b..8b6cb923e0 100644 --- a/blazor/datagrid/checkbox-selection.md +++ b/blazor/datagrid/checkbox-selection.md @@ -1,13 +1,13 @@ --- layout: post -title: Check box selection in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Check box Selection in Syncfusion Blazor DataGrid and much more details. +title: Checkbox selection in Blazor DataGrid | Syncfusion +description: Checkout and learn here all about Checkbox selection in Syncfusion Blazor DataGrid and much more details. platform: Blazor control: DataGrid documentation: ug --- -# Check box Selection in Blazor DataGrid +# Checkbox selection in Blazor DataGrid Checkbox selection in the Syncfusion Blazor DataGrid allows you to select multiple records using a checkbox in each row. This feature is particularly useful for performing bulk actions or operations on selected records within the Grid. @@ -198,11 +198,11 @@ public class OrderDetails ## Hide selectall checkbox in column header -The Syncfusion Blazor DataGrid allows you to hide the select all checkbox in the column header of the Syncfusion Blazor DataGrid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the Grid. +The Syncfusion Blazor DataGrid allows you to hide the select all checkbox in the column header of the Grid. This is a useful feature in various scenarios where you want to customize the appearance and behavior of the checkboxes within the Grid. -By default, when you set the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type)e as **CheckBox**, it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) directive in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). +By default, when you set the column [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type)e as **CheckBox**, it renders a column with checkboxes for selection purposes. However, if you want to hide the header checkbox, you can achieve this by defining an empty [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTemplate) property in the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -Here's an example of how to hide selectall checkbox in column header using empty `HeaderTemplate` directive in the Grid: +Here's an example of how to hide selectall checkbox in column header using empty `HeaderTemplate` property in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -291,7 +291,7 @@ Here's an example of how to enable selection only through checkbox clicks using @using Syncfusion.Blazor.Grids - + @@ -363,4 +363,4 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLoXfCmHiVdHPNn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/htretIZeoziROVCs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file