Skip to content

Commit 2980f34

Browse files
YukeshNarayanB-SF5087YukeshNarayanB-SF5087
committed
998198-updated the core and mvc samples
1 parent 1fb65c0 commit 2980f34

File tree

7 files changed

+247
-60
lines changed

7 files changed

+247
-60
lines changed

‎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: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -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).

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

Lines changed: 61 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ 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

8181
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.
8282

@@ -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/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) 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/cref_files/aspnetmvc-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) 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.

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

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -132,34 +132,7 @@ N> If the [`type`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Sync
132132

133133

134134

135-
## Checkbox column
136135

137-
To render checkboxes in existing column, you need to set [`showCheckbox`] property of [`e-treegrid-column`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn.html) as **true**.
138-
139-
It is also possible to select the rows hierarchically using checkboxes in TreeGrid by enabling [`autoCheckHierarchy`] property. When we check on any parent record checkbox then the child record checkboxes will get checked.
140-
141-
{% if page.publishingplatform == "aspnet-core" %}
142-
143-
{% tabs %}
144-
{% highlight cshtml tabtitle="CSHTML" %}
145-
{% include code-snippet/tree-grid/columns-core/checkbox/tagHelper %}
146-
{% endhighlight %}
147-
{% highlight c# tabtitle="Checkbox.cs" %}
148-
{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %}
149-
{% endhighlight %}
150-
{% endtabs %}
151-
152-
{% elsif page.publishingplatform == "aspnet-mvc" %}
153-
154-
{% tabs %}
155-
{% highlight razor tabtitle="CSHTML" %}
156-
{% include code-snippet/tree-grid/columns-core/checkbox/razor %}
157-
{% endhighlight %}
158-
{% highlight c# tabtitle="Checkbox.cs" %}
159-
{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %}
160-
{% endhighlight %}
161-
{% endtabs %}
162-
{% endif %}
163136

164137

165138

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,91 @@ In checkbox selection, selection can also be done by clicking on rows. This sele
7777

7878
> Checkbox Selection feature is intended for row selection only; it is not compatible with cell selection mode.
7979
80+
## Conditional row selection
81+
82+
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.
83+
84+
{% if page.publishingplatform == "aspnet-core" %}
85+
86+
{% tabs %}
87+
{% highlight cshtml tabtitle="CSHTML" %}
88+
{% include code-snippet/tree-grid/selection/partial-selection/tagHelper %}
89+
{% endhighlight %}
90+
{% highlight c# tabtitle="Partial.cs" %}
91+
{% include code-snippet/tree-grid/selection/partial-selection/partial.cs %}
92+
{% endhighlight %}
93+
{% endtabs %}
94+
95+
{% elsif page.publishingplatform == "aspnet-mvc" %}
96+
97+
{% tabs %}
98+
{% highlight razor tabtitle="CSHTML" %}
99+
{% include code-snippet/tree-grid/selection/partial-selection/razor %}
100+
{% endhighlight %}
101+
{% highlight c# tabtitle="Partial.cs" %}
102+
{% include code-snippet/tree-grid/selection/partial-selection/partial.cs %}
103+
{% endhighlight %}
104+
{% endtabs %}
105+
{% endif %}
106+
107+
In this sample, checkbox selection is disabled for rows where the "Progress" column has the value **"Completed"**.
108+
109+
## Checkbox Selection In Tree Column
110+
111+
1. ### Enable checkboxes in tree column
112+
113+
To render checkboxes in tree column, you need to set [`showCheckbox`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGridColumn.html#Syncfusion_EJ2_TreeGrid_TreeGridColumn_ShowCheckbox) property of as **true**.
114+
115+
It is possible to select rows hierarchically using checkboxes in TreeGrid by enabling the [`AutoCheckHierarchy`](https://help.syncfusion.com/cr/aspnetcore-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.
116+
117+
{% if page.publishingplatform == "aspnet-core" %}
118+
119+
{% tabs %}
120+
{% highlight cshtml tabtitle="CSHTML" %}
121+
{% include code-snippet/tree-grid/columns-core/checkbox/tagHelper %}
122+
{% endhighlight %}
123+
{% highlight c# tabtitle="Checkbox.cs" %}
124+
{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %}
125+
{% endhighlight %}
126+
{% endtabs %}
127+
128+
{% elsif page.publishingplatform == "aspnet-mvc" %}
129+
130+
{% tabs %}
131+
{% highlight razor tabtitle="CSHTML" %}
132+
{% include code-snippet/tree-grid/columns-core/checkbox/razor %}
133+
{% endhighlight %}
134+
{% highlight c# tabtitle="Checkbox.cs" %}
135+
{% include code-snippet/tree-grid/columns-core/checkbox/checkbox.cs %}
136+
{% endhighlight %}
137+
{% endtabs %}
138+
{% endif %}
139+
140+
2. ### Checkbox selection in tree column with virtualization
141+
142+
The TreeGrid component is designed to handle large datasets while providing flexible checkbox selection with virtualization enabled. The [`ShowCheckbox`](https://help.syncfusion.com/cr/cref_files/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.TreeGrid.TreeGridColumn~ShowCheckbox.html) 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/aspnetcore-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**".
143+
144+
{% if page.publishingplatform == "aspnet-core" %}
145+
146+
{% tabs %}
147+
{% highlight cshtml tabtitle="CSHTML" %}
148+
{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/tagHelper %}
149+
{% endhighlight %}
150+
{% highlight c# tabtitle="Partial.cs" %}
151+
{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.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/selection/showCheckbox-Virtualization/razor %}
160+
{% endhighlight %}
161+
{% highlight c# tabtitle="Partial.cs" %}
162+
{% include code-snippet/tree-grid/selection/showCheckbox-Virtualization/groceriesData.cs%}
163+
{% endhighlight %}
164+
{% endtabs %}
165+
{% endif %}
166+
80167
N> You can refer to our [`ASP.NET Core Tree Grid`](https://www.syncfusion.com/aspnet-core-ui-controls/tree-grid) feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example [`ASP.NET Core Tree Grid example`](https://ej2.syncfusion.com/aspnetcore/TreeGrid/Overview#/material) to knows how to present and manipulate data.

0 commit comments

Comments
 (0)