Merge pull request #4696 from syncfusion-content/EJ2-998198-showCheckbox

thavasianand · web-flow · commit 0ff1beac4cf9 · 2025-12-16T11:40:41.000+05:30
998198-updated the core and mvc samples
diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs
@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var treeData = GroceryDataGenerator.GenerateGroceriesData();
+    ViewData["datasource"] = treeData;
+    return View();
+}
diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor
@@ -0,0 +1,41 @@
+@Html.EJS().TreeGrid("GroceriesItems").DataSource((IEnumerable<object>)ViewData["datasource"]).Columns(col =>
+   {
+       col.Field("Id").IsPrimaryKey(true).Visible(false).Add();
+       col.Field("Name").HeaderText("Items").Width(180).ShowCheckbox(true).Add();
+       col.Field("Description").HeaderText("Description").Width(300).Add();
+       col.Field("Quantity").HeaderText("Quantity").TextAlign(TextAlign.Right).Width(120).Add();
+       col.Field("Price").HeaderText("Price").Width(200).TextAlign(TextAlign.Right).Format("C2").Add();
+       col.Field("Status").HeaderText("Status").Width(100).TextAlign(TextAlign.Right).Add();
+       col.Field("Popularity").HeaderText("Popularity").Width(150).Add();
+
+   }).Aggregates(agg =>
+   {
+       agg.Columns(new List<Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn>
+           () { new Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn() { Field = "Price", Type = "Custom", FooterTemplate = "<span class=\"selected-total\">Total Price of Selected Rows: $0.00</span>" }  }).Add();
+   }).Height(400).ChildMapping("Items").TreeColumnIndex(1).EnableVirtualization(true).AutoCheckHierarchy(true).CheckboxChange("updateFooterTotal").DataBound("updateFooterTotal").Render()
+    </div>
+
+    <script>
+        
+        var calculateSelectedTotal = () => {
+            var treegrid = document.getElementById('GroceriesItems').ej2_instances[0]
+            var checkedRecords = treegrid.getCheckedRecords();
+            var checkedRecordsPrice = checkedRecords.reduce((sum, rec) => sum + (parseFloat(rec.Price) || 0), 0);
+            return checkedRecordsPrice;
+        };
+        var updateFooterTotal = () => {
+            var totalPrice = calculateSelectedTotal();
+            var treegrid = document.getElementById('GroceriesItems').ej2_instances[0]
+            var footerEl = treegrid.getFooterContent().querySelector('.selected-total');
+            if (footerEl) {
+                footerEl.innerHTML = `Total Price of Selected Rows: <strong>$${totalPrice.toFixed(2)}</strong>`;
+            }
+        };
+    </script>
+
+    <style>
+        .e-treerowcell {
+            height: 60px;
+            font-weight: bold;
+        }
+    </style>
diff --git a/ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper b/ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper
@@ -0,0 +1,52 @@
+        <ejs-treegrid id="TreeGrid"
+                      dataSource="@GroceryDataGenerator.GenerateGroceriesData()"
+                      height="400"
+                      treeColumnIndex="1"
+                      childMapping="Items"
+                      enableVirtualization="true"
+                      autoCheckHierarchy="true">
+            <e-treegrid-aggregates>
+                <e-treegrid-aggregate>
+                    <e-treegrid-aggregate-columns>
+                        <e-treegrid-aggregate-column field="Price"
+                                                     type="Custom"
+                                                     footerTemplate=
+                            "<div class='selected-total'>Total Price of Selected Rows: $0.00</div>">
+                        </e-treegrid-aggregate-column>
+                    </e-treegrid-aggregate-columns>
+                </e-treegrid-aggregate>
+            </e-treegrid-aggregates>
+
+            <e-treegrid-columns>
+                <e-treegrid-column field="Id" visible="false" isPrimaryKey="true"></e-treegrid-column>
+                <e-treegrid-column field="Name" headerText="Item" width="150" showCheckbox="true"></e-treegrid-column>
+                <e-treegrid-column field="Description" headerText="Description" width="200"></e-treegrid-column>
+                <e-treegrid-column field="Quantity" headerText="Quantity" width="120" textAlign="Right"></e-treegrid-column>
+                <e-treegrid-column field="Price" headerText="Price" width="400" textAlign="Right" format="C2"></e-treegrid-column>
+                <e-treegrid-column field="Status" headerText="Status" width="100"></e-treegrid-column>
+                <e-treegrid-column field="Popularity" headerText="Popularity" width="150"></e-treegrid-column>
+            </e-treegrid-columns>
+        </ejs-treegrid>
+    <script>
+        var treegrid = document.getElementById('TreeGrid').ej2_instances[0];
+        treegrid.checkboxChange = function (args) {
+            updateFooter();
+        };
+        treegrid.dataBound = function (args) {
+            updateFooter();
+        };
+        var calculateSelectedTotal = () => {
+            var checkedRecords = treegrid.getCheckedRecords();
+            var checkedRecordsPrice = checkedRecords.reduce((sum, rec) => sum + (parseFloat(rec.Price) || 0), 0);
+            return checkedRecordsPrice;
+        };
+
+
+        var updateFooter = () => {
+            var totalPrice = calculateSelectedTotal();
+            var footerEl = treegrid.getFooterContent().querySelector('.selected-total');
+            if (footerEl) {
+                footerEl.innerHTML = `Total Price of Selected Rows: <strong>$${totalPrice.toFixed(2)}</strong>`;
+            }
+        };
+    </script>
diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/columns-mvc.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/columns-mvc.md
@@ -22,7 +22,7 @@ N> 1. If the column [`Field`](https://help.syncfusion.com/cr/aspnetcore-js2/Sync
 
 ## Format
 
-To format cell values based on specific culture, use the [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Format.html) property of [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html). The TreeGrid uses [Internalization](../../common/internationalization/) library to format [`number`](../../common/internationalization/#number-formatting) and [`date`](../../common/internationalization/#manipulating-datetime)
+To format cell values based on specific culture, use the [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Format.html) property of [`Column`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html). The TreeGrid uses [Internalization](../../common/internationalization) library to format [`number`](../../common/internationalization#number-formatting) and [`date`](../../common/internationalization#manipulating-datetime)
 values.
 
 {% if page.publishingplatform == "aspnet-core" %}
@@ -47,7 +47,7 @@ values.
 
 
 
-N> By default, the [`number`](../../common/internationalization/#number-formatting) and [`date`](../../common/internationalization/#manipulating-datetime) values are formatted in `en-US` locale.
+N> By default, the [`number`](../../common/internationalization#number-formatting) and [`date`](../../common/internationalization#manipulating-datetime) values are formatted in `en-US` locale.
 
 ### Number formatting
 
@@ -59,13 +59,13 @@ N | Denotes numeric type. | The numeric format is followed by integer value as N
 C | Denotes currency type. | The currency format is followed by integer value as C2, C3. etc which denotes the number of precision to be allowed.
 P | Denotes percentage type | The percentage format expects the input value to be in the range of 0 to 1. For example the cell value `0.2` is formatted as `20%`. The percentage format is followed by integer value as P2, P3. etc which denotes the number of precision to be allowed.
 
-Refer to the link to know more about [`Number formatting`](../../common/internationalization/#number-formatting).
+Refer to the link to know more about [`Number formatting`](../../common/internationalization#number-formatting).
 
 ### Date formatting
 
 You can format date values either using built-in date format string or custom format string.
 
-For built-in date format you can specify [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Format.html) property as string   (Example: `yMd`). Refer to the link to know more about [`Date formatting`](../../common/internationalization/#manipulating-datetime).
+For built-in date format you can specify [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Format.html) property as string   (Example: `yMd`). Refer to the link to know more about [`Date formatting`](../../common/internationalization#manipulating-datetime).
 
 You can also use custom format string to format the date values. Some of the custom formats and the formatted date values are given in the below table.
 
@@ -121,8 +121,8 @@ In the below example, Duration column is locked and its reordering functionality
 
 Column type can be specified using the [`Type`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Type.html) property in [`Column`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html). It specifies the type of data the column binds.
 
-If the [`Format`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Format.html)  is defined for a column, the column uses [`Type`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Type.html) to select the appropriate format option ([number](../../common/internationalization/#number-formatting)
- or [date](../../common/internationalization/#manipulating-datetime)).
+If the [`Format`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Format.html)  is defined for a column, the column uses [`Type`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Type.html) to select the appropriate format option ([number](../../common/internationalization#number-formatting)
+ or [date](../../common/internationalization#manipulating-datetime)).
 
 TreeGrid column supports the following types:
 * string
@@ -134,38 +134,6 @@ TreeGrid column supports the following types:
 N> If the [`Type`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~Type.html) is not defined, it will be determined from the first record of the [`DataSource`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGrid~DataSource.html).
 
 
-
-## Checkbox column
-
-To render checkboxes in existing column, you need to set [`ShowCheckbox`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) property as **true**.
-
-It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [`AutoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) property. When we check on any parent record checkbox then the child record checkboxes will get checked.
-
-{% if page.publishingplatform == "aspnet-core" %}
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Checkbox.cs" %}
-{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "aspnet-mvc" %}
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/tree-grid/columns-mvc/checkbox/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Checkbox.cs" %}
-{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
-{% endhighlight %}
-{% endtabs %}
-{% endif %}
-
-
-
 ## Controlling Tree Grid actions
 
 You can enable or disable treegrid action for a particular column by setting the [`AllowFiltering`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~AllowFiltering.html), and [`AllowSorting`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~AllowSorting.html) properties in [`Column`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html).
@@ -194,7 +162,7 @@ You can enable or disable treegrid action for a particular column by setting the
 
 ## Show/hide columns by external button
 
-You can show or hide treegrid columns dynamically using external buttons by invoking the [`showColumns`](https://ej2.syncfusion.com/documentation/api/grid/#showcolumns) or [`hideColumns`](https://ej2.syncfusion.com/documentation/api/grid/#hidecolumns) method.
+You can show or hide treegrid columns dynamically using external buttons by invoking the [`showColumns`](https://ej2.syncfusion.com/documentation/api/grid#showcolumns) or [`hideColumns`](https://ej2.syncfusion.com/documentation/api/grid#hidecolumns) method.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md
@@ -76,9 +76,9 @@ In checkbox selection, selection can also be done by clicking on rows. This sele
 
 > Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode.
 
-## Conditional row selection using isRowSelectable
+## Conditional row selection
 
-The TreeGrid supports conditional row selection through the [isRowSelectable](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.IsRowSelectable.html) property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The `isRowSelectable` property accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria.
+The TreeGrid supports conditional row selection through the `isRowSelectable` property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The `isRowSelectable` property accepts a function that evaluates each row’s data and returns **true** to enable selection or **false** to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria.
 
 {% if page.publishingplatform == "aspnet-core" %}
 
@@ -103,4 +103,64 @@ The TreeGrid supports conditional row selection through the [isRowSelectable](ht
 {% endtabs %}
 {% endif %}
 
+In this sample, checkbox selection is disabled for rows where the "Progress" column has the value **"Completed"**.
+
+## Checkbox Selection In Tree Column
+
+1. ### Enable checkboxes in tree column
+
+    To render checkboxes in tree column, you need to set [`ShowCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property as **true**.
+
+    It is possible to select rows hierarchically using checkboxes in TreeGrid by enabling the [`AutoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_AutoCheckHierarchy) property. When a parent record’s checkbox is checked, the checkboxes of its child records are automatically selected and vice-versa.
+
+    {% if page.publishingplatform == "aspnet-core" %}
+
+    {% tabs %}
+    {% highlight cshtml tabtitle="CSHTML" %}
+    {% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %}
+    {% endhighlight %}
+    {% highlight c# tabtitle="Checkbox.cs" %}
+    {% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
+    {% endhighlight %}
+    {% endtabs %}
+
+    {% elsif page.publishingplatform == "aspnet-mvc" %}
+
+    {% tabs %}
+    {% highlight razor tabtitle="CSHTML" %}
+    {% include code-snippet/tree-grid/columns-mvc/checkbox/razor %}
+    {% endhighlight %}
+    {% highlight c# tabtitle="Checkbox.cs" %}
+    {% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
+    {% endhighlight %}
+    {% endtabs %}
+    {% endif %}
+
+2. ### Checkbox selection in tree column with virtualization
+
+    The TreeGrid component is designed to handle large datasets while providing flexible checkbox selection with virtualization enabled. The [`ShowCheckbox`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property displays checkboxes in tree column cells, allowing users to select or deselect them directly. This functionality is enabled by setting the property to "**true**". Similarly, the [`EnableVirtualization`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_EnableVirtualization) property enhances performance by rendering only the visible rows and columns during scrolling. This feature is activated by setting the property to "**true**".
+
+    {% if page.publishingplatform == "aspnet-core" %}
+
+    {% tabs %}
+    {% highlight cshtml tabtitle="CSHTML" %}
+    {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %}
+    {% endhighlight %}
+    {% highlight c# tabtitle="Partial.cs" %}
+    {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %}
+    {% endhighlight %}
+    {% endtabs %}
+
+    {% elsif page.publishingplatform == "aspnet-mvc" %}
+
+    {% tabs %}
+    {% highlight razor tabtitle="CSHTML" %}
+    {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %}
+    {% endhighlight %}
+    {% highlight c# tabtitle="Partial.cs" %}
+    {% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%}
+    {% endhighlight %}
+    {% endtabs %}
+    {% endif %} 
+      
 N> You can refer to our [`ASP.NET MVC Tree Grid`](https://www.syncfusion.com/aspnet-mvc-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our [`ASP.NET MVC Tree Grid example`](https://ej2.syncfusion.com/aspnetmvc/TreeGrid/Overview#/material) to knows how to present and manipulate data.
diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/columns-core.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/columns/columns-core.md
diff --git a/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md b/ej2-asp-core-mvc/tree-grid/EJ2_ASP.NETCORE/selection/check-box-selection.md
