Skip to content

Commit 44fa22b

Browse files
rajapandiyan-setturajapandiyan-settu
authored
Merge pull request #4660 from syncfusion-content/994214-detailGrid-dev
994214: Included detail row event topic - Development
2 parents 70f453e + a701878 commit 44fa22b

File tree

7 files changed

+132
-0
lines changed

7 files changed

+132
-0
lines changed

‎ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/html.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+
ViewBag.DataSource = OrderDetails.GetAllRecords();
4+
ViewBag.EmployeeDataSource = EmployeeDetails.GetAllRecords();
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/razor‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@{
2+
var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
3+
{
4+
DataSource = (IEnumerable<object>)ViewBag.DataSource,
5+
QueryString = "EmployeeID",
6+
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
7+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
8+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="150" },
9+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
10+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
11+
},
12+
};
13+
}
14+
15+
<div>
16+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.EmployeeDataSource).Columns(col =>
17+
{
18+
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
19+
col.Field("FirstName").HeaderText("Name").Width("150").Add();
20+
col.Field("City").HeaderText("City").Width("150").Add();
21+
col.Field("Country").HeaderText("Country").Width("150").Add();
22+
}).ChildGrid(ChildGrid).DetailExpand("detailExpand").DetailCollapse("detailCollapse").Render()
23+
</div>
24+
25+
<script>
26+
// Prevent expanding detail row.
27+
function detailExpand(args) {
28+
if (args.data.FirstName === 'Nancy') {
29+
args.cancel = true;
30+
}
31+
}
32+
// Prevent collapsing detail row.
33+
function detailCollapse(args){
34+
if (args.data.FirstName === 'Andrew') {
35+
args.cancel = true;
36+
}
37+
}
38+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@{
2+
ViewData["Title"] = "Home page";
3+
var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
4+
{
5+
DataSource = ViewBag.DataSource,
6+
QueryString = "EmployeeID",
7+
Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
8+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="OrderID", HeaderText="Order ID", Width="120" },
9+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="CustomerID", HeaderText="Customer ID", Width="150" },
10+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipCity", HeaderText="Ship City", Width="120" },
11+
new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" },
12+
},
13+
};
14+
}
15+
16+
<div>
17+
<ejs-grid id="Grid" dataSource="@ViewBag.EmployeeDataSource" childGrid="@ChildGrid" detailExpand='detailExpand' detailCollapse='detailCollapse'>
18+
<e-grid-columns>
19+
<e-grid-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="120"></e-grid-column>
20+
<e-grid-column field="FirstName" headerText="Name" width="150"></e-grid-column>
21+
<e-grid-column field="City" headerText="City" width="150"></e-grid-column>
22+
<e-grid-column field="Country" headerText="Country" width="150"></e-grid-column>
23+
</e-grid-columns>
24+
</ejs-grid>
25+
</div>
26+
27+
<script>
28+
// Prevent expanding detail row.
29+
function detailExpand(args) {
30+
if (args.data.FirstName === 'Nancy') {
31+
args.cancel = true;
32+
}
33+
}
34+
// Prevent collapsing detail row.
35+
function detailCollapse(args){
36+
if (args.data.FirstName === 'Andrew') {
37+
args.cancel = true;
38+
}
39+
}
40+
</script>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,27 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and
295295

296296
![Customize hierarchy Grid icons](images/hierarchy-grid/change-icon.png)
297297

298+
## Detail row events
299+
300+
The Grid component provides the `detailExpand` and `detailCollapse` events, which are triggered when a detail row is about to expand or collapse. These events fire before the detail row actually expands or collapses, allowing you to control whether the action should proceed.
301+
302+
`detailExpand` – This event is triggered before a detail row begins to expand. You can access the expansion details through the event arguments and optionally prevent the expansion by setting:
303+
`args.cancel = true`;
304+
305+
`detailCollapse` – This event is triggered before a detail row begins to collapse. You can access the collapse details through the event arguments and optionally prevent the collapse by setting:
306+
`args.cancel = true`;
307+
308+
In the example below, expansion is prevented for the **Nancy** row, and collapse is prevented for the **Andrew** row.
309+
310+
{% tabs %}
311+
{% highlight cshtml tabtitle="CSHTML" %}
312+
{% include code-snippet/grid/hierarchy-grid/detail-row-events/razor %}
313+
{% endhighlight %}
314+
{% highlight c# tabtitle="Html.cs" %}
315+
{% include code-snippet/grid/hierarchy-grid/detail-row-events/html.cs %}
316+
{% endhighlight %}
317+
{% endtabs %}
318+
298319
## Customize the child grid
299320

300321
The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid.

‎ej2-asp-core-mvc/grid/EJ2_ASP.MVC/row/detail-template.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,6 @@ Detail template is not supported with the following features:
107107
* Lazy load grouping
108108
* State persistence
109109

110+
## See also
111+
112+
* [Detail row events](../hierarchy-grid#detail-row-events)

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,6 +295,27 @@ In the demo below, the expand/collapse icons have been changed to arrow-down and
295295

296296
![Customize hierarchy Grid icons](images/hierarchy-grid/change-icon.png)
297297

298+
## Detail row events
299+
300+
The Grid component provides the `detailExpand` and `detailCollapse` events, which are triggered when a detail row is about to expand or collapse. These events fire before the detail row actually expands or collapses, allowing you to control whether the action should proceed.
301+
302+
`detailExpand` – This event is triggered before a detail row begins to expand. You can access the expansion details through the event arguments and optionally prevent the expansion by setting:
303+
`args.cancel = true`;
304+
305+
`detailCollapse` – This event is triggered before a detail row begins to collapse. You can access the collapse details through the event arguments and optionally prevent the collapse by setting:
306+
`args.cancel = true`;
307+
308+
In the example below, expansion is prevented for the **Nancy** row, and collapse is prevented for the **Andrew** row.
309+
310+
{% tabs %}
311+
{% highlight cshtml tabtitle="CSHTML" %}
312+
{% include code-snippet/grid/hierarchy-grid/detail-row-events/tagHelper %}
313+
{% endhighlight %}
314+
{% highlight c# tabtitle="Html.cs" %}
315+
{% include code-snippet/grid/hierarchy-grid/detail-row-events/html.cs %}
316+
{% endhighlight %}
317+
{% endtabs %}
318+
298319
## Customize the child grid
299320

300321
The Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Grid component offers various ways to customize the child grid appearance using both default CSS and custom themes. To access the child grid elements, you can use the **.e-detailcell** class selector, which targets the child grid.

‎ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/row/detail-template.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,6 @@ Detail template is not supported with the following features:
105105
* Lazy load grouping
106106
* State persistence
107107

108+
## See also
109+
110+
* [Detail row events](../hierarchy-grid#detail-row-events)

0 commit comments

Comments
 (0)