Skip to content

Commit 3720b79

Browse files
SenthilarasuBaluSenthilarasuBalu
authored
Merge branch 'development' into EJ2-998699-ChatAttachment
2 parents 8a5d825 + 0ff1bea commit 3720b79

File tree

8 files changed

+260
-79
lines changed

8 files changed

+260
-79
lines changed

‎ej2-asp-core-mvc/Release-notes/32.1.19.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ documentation: ug
77

88
# Essential Studio for ##Platform_Name## - v32.1.19 Release Notes
99

10-
{% include release-info.html date="December 15, 2025" version="v32.1.19" passed="68209" failed="0" %}
10+
{% include release-info.html date="December 16, 2025" version="v32.1.19" passed="68209" failed="0" %}
1111

1212
{% directory path: _includes/release-notes/v32.1.19 %}
1313

‎ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var treeData = GroceryDataGenerator.GenerateGroceriesData();
4+
ViewData["datasource"] = treeData;
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@Html.EJS().TreeGrid("GroceriesItems").DataSource((IEnumerable<object>)ViewData["datasource"]).Columns(col =>
2+
{
3+
col.Field("Id").IsPrimaryKey(true).Visible(false).Add();
4+
col.Field("Name").HeaderText("Items").Width(180).ShowCheckbox(true).Add();
5+
col.Field("Description").HeaderText("Description").Width(300).Add();
6+
col.Field("Quantity").HeaderText("Quantity").TextAlign(TextAlign.Right).Width(120).Add();
7+
col.Field("Price").HeaderText("Price").Width(200).TextAlign(TextAlign.Right).Format("C2").Add();
8+
col.Field("Status").HeaderText("Status").Width(100).TextAlign(TextAlign.Right).Add();
9+
col.Field("Popularity").HeaderText("Popularity").Width(150).Add();
10+
11+
}).Aggregates(agg =>
12+
{
13+
agg.Columns(new List<Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn>
14+
() { new Syncfusion.EJ2.TreeGrid.TreeGridAggregateColumn() { Field = "Price", Type = "Custom", FooterTemplate = "<span class=\"selected-total\">Total Price of Selected Rows: $0.00</span>" } }).Add();
15+
}).Height(400).ChildMapping("Items").TreeColumnIndex(1).EnableVirtualization(true).AutoCheckHierarchy(true).CheckboxChange("updateFooterTotal").DataBound("updateFooterTotal").Render()
16+
</div>
17+
18+
<script>
19+
20+
var calculateSelectedTotal = () => {
21+
var treegrid = document.getElementById('GroceriesItems').ej2_instances[0]
22+
var checkedRecords = treegrid.getCheckedRecords();
23+
var checkedRecordsPrice = checkedRecords.reduce((sum, rec) => sum + (parseFloat(rec.Price) || 0), 0);
24+
return checkedRecordsPrice;
25+
};
26+
var updateFooterTotal = () => {
27+
var totalPrice = calculateSelectedTotal();
28+
var treegrid = document.getElementById('GroceriesItems').ej2_instances[0]
29+
var footerEl = treegrid.getFooterContent().querySelector('.selected-total');
30+
if (footerEl) {
31+
footerEl.innerHTML = `Total Price of Selected Rows: <strong>$${totalPrice.toFixed(2)}</strong>`;
32+
}
33+
};
34+
</script>
35+
36+
<style>
37+
.e-treerowcell {
38+
height: 60px;
39+
font-weight: bold;
40+
}
41+
</style>

‎ej2-asp-core-mvc/code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<ejs-treegrid id="TreeGrid"
2+
dataSource="@GroceryDataGenerator.GenerateGroceriesData()"
3+
height="400"
4+
treeColumnIndex="1"
5+
childMapping="Items"
6+
enableVirtualization="true"
7+
autoCheckHierarchy="true">
8+
<e-treegrid-aggregates>
9+
<e-treegrid-aggregate>
10+
<e-treegrid-aggregate-columns>
11+
<e-treegrid-aggregate-column field="Price"
12+
type="Custom"
13+
footerTemplate=
14+
"<div class='selected-total'>Total Price of Selected Rows: $0.00</div>">
15+
</e-treegrid-aggregate-column>
16+
</e-treegrid-aggregate-columns>
17+
</e-treegrid-aggregate>
18+
</e-treegrid-aggregates>
19+
20+
<e-treegrid-columns>
21+
<e-treegrid-column field="Id" visible="false" isPrimaryKey="true"></e-treegrid-column>
22+
<e-treegrid-column field="Name" headerText="Item" width="150" showCheckbox="true"></e-treegrid-column>
23+
<e-treegrid-column field="Description" headerText="Description" width="200"></e-treegrid-column>
24+
<e-treegrid-column field="Quantity" headerText="Quantity" width="120" textAlign="Right"></e-treegrid-column>
25+
<e-treegrid-column field="Price" headerText="Price" width="400" textAlign="Right" format="C2"></e-treegrid-column>
26+
<e-treegrid-column field="Status" headerText="Status" width="100"></e-treegrid-column>
27+
<e-treegrid-column field="Popularity" headerText="Popularity" width="150"></e-treegrid-column>
28+
</e-treegrid-columns>
29+
</ejs-treegrid>
30+
<script>
31+
var treegrid = document.getElementById('TreeGrid').ej2_instances[0];
32+
treegrid.checkboxChange = function (args) {
33+
updateFooter();
34+
};
35+
treegrid.dataBound = function (args) {
36+
updateFooter();
37+
};
38+
var calculateSelectedTotal = () => {
39+
var checkedRecords = treegrid.getCheckedRecords();
40+
var checkedRecordsPrice = checkedRecords.reduce((sum, rec) => sum + (parseFloat(rec.Price) || 0), 0);
41+
return checkedRecordsPrice;
42+
};
43+
44+
45+
var updateFooter = () => {
46+
var totalPrice = calculateSelectedTotal();
47+
var footerEl = treegrid.getFooterContent().querySelector('.selected-total');
48+
if (footerEl) {
49+
footerEl.innerHTML = `Total Price of Selected Rows: <strong>$${totalPrice.toFixed(2)}</strong>`;
50+
}
51+
};
52+
</script>

‎ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/columns/columns-mvc.md‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ N> 1. If the column [`Field`](https://help.syncfusion.com/cr/aspnetcore-js2/Sync
2222

2323
## Format
2424

25-
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)
25+
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)
2626
values.
2727

2828
{% if page.publishingplatform == "aspnet-core" %}
@@ -47,7 +47,7 @@ values.
4747

4848

4949

50-
N> By default, the [`number`](../../common/internationalization/#number-formatting) and [`date`](../../common/internationalization/#manipulating-datetime) values are formatted in `en-US` locale.
50+
N> By default, the [`number`](../../common/internationalization#number-formatting) and [`date`](../../common/internationalization#manipulating-datetime) values are formatted in `en-US` locale.
5151

5252
### Number formatting
5353

@@ -59,13 +59,13 @@ N | Denotes numeric type. | The numeric format is followed by integer value as N
5959
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.
6060
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.
6161

62-
Refer to the link to know more about [`Number formatting`](../../common/internationalization/#number-formatting).
62+
Refer to the link to know more about [`Number formatting`](../../common/internationalization#number-formatting).
6363

6464
### Date formatting
6565

6666
You can format date values either using built-in date format string or custom format string.
6767

68-
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).
68+
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).
6969

7070
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.
7171

@@ -121,8 +121,8 @@ In the below example, Duration column is locked and its reordering functionality
121121

122122
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.
123123

124-
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)
125-
or [date](../../common/internationalization/#manipulating-datetime)).
124+
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)
125+
or [date](../../common/internationalization#manipulating-datetime)).
126126

127127
TreeGrid column supports the following types:
128128
* string
@@ -134,38 +134,6 @@ TreeGrid column supports the following types:
134134
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).
135135

136136

137-
138-
## Checkbox column
139-
140-
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**.
141-
142-
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.
143-
144-
{% if page.publishingplatform == "aspnet-core" %}
145-
146-
{% tabs %}
147-
{% highlight cshtml tabtitle="CSHTML" %}
148-
{% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %}
149-
{% endhighlight %}
150-
{% highlight c# tabtitle="Checkbox.cs" %}
151-
{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
152-
{% endhighlight %}
153-
{% endtabs %}
154-
155-
{% elsif page.publishingplatform == "aspnet-mvc" %}
156-
157-
{% tabs %}
158-
{% highlight razor tabtitle="CSHTML" %}
159-
{% include code-snippet/tree-grid/columns-mvc/checkbox/razor %}
160-
{% endhighlight %}
161-
{% highlight c# tabtitle="Checkbox.cs" %}
162-
{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
163-
{% endhighlight %}
164-
{% endtabs %}
165-
{% endif %}
166-
167-
168-
169137
## Controlling Tree Grid actions
170138

171139
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
194162

195163
## Show/hide columns by external button
196164

197-
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.
165+
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.
198166

199167
{% if page.publishingplatform == "aspnet-core" %}
200168

‎ej2-asp-core-mvc/tree-grid/EJ2_ASP.MVC/selection/check-box-selection.md‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,9 @@ In checkbox selection, selection can also be done by clicking on rows. This sele
7676

7777
> Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode.
7878
79-
## Conditional row selection using isRowSelectable
79+
## Conditional row selection
8080

81-
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.
81+
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.
8282

8383
{% if page.publishingplatform == "aspnet-core" %}
8484

@@ -103,4 +103,64 @@ The TreeGrid supports conditional row selection through the [isRowSelectable](ht
103103
{% endtabs %}
104104
{% endif %}
105105

106+
In this sample, checkbox selection is disabled for rows where the "Progress" column has the value **"Completed"**.
107+
108+
## Checkbox Selection In Tree Column
109+
110+
1. ### Enable checkboxes in tree column
111+
112+
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**.
113+
114+
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.
115+
116+
{% if page.publishingplatform == "aspnet-core" %}
117+
118+
{% tabs %}
119+
{% highlight cshtml tabtitle="CSHTML" %}
120+
{% include code-snippet/tree-grid/columns-mvc/checkbox/tagHelper %}
121+
{% endhighlight %}
122+
{% highlight c# tabtitle="Checkbox.cs" %}
123+
{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
124+
{% endhighlight %}
125+
{% endtabs %}
126+
127+
{% elsif page.publishingplatform == "aspnet-mvc" %}
128+
129+
{% tabs %}
130+
{% highlight razor tabtitle="CSHTML" %}
131+
{% include code-snippet/tree-grid/columns-mvc/checkbox/razor %}
132+
{% endhighlight %}
133+
{% highlight c# tabtitle="Checkbox.cs" %}
134+
{% include code-snippet/tree-grid/columns-mvc/checkbox/checkbox.cs %}
135+
{% endhighlight %}
136+
{% endtabs %}
137+
{% endif %}
138+
139+
2. ### Checkbox selection in tree column with virtualization
140+
141+
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**".
142+
143+
{% if page.publishingplatform == "aspnet-core" %}
144+
145+
{% tabs %}
146+
{% highlight cshtml tabtitle="CSHTML" %}
147+
{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %}
148+
{% endhighlight %}
149+
{% highlight c# tabtitle="Partial.cs" %}
150+
{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs %}
151+
{% endhighlight %}
152+
{% endtabs %}
153+
154+
{% elsif page.publishingplatform == "aspnet-mvc" %}
155+
156+
{% tabs %}
157+
{% highlight razor tabtitle="CSHTML" %}
158+
{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/razor %}
159+
{% endhighlight %}
160+
{% highlight c# tabtitle="Partial.cs" %}
161+
{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%}
162+
{% endhighlight %}
163+
{% endtabs %}
164+
{% endif %}
165+
106166
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.

0 commit comments

Comments
 (0)