Skip to content

Commit bdeacf9

Browse files
elenapeskovaelenapeskova
authored
update description (#1)
1 parent 647fd74 commit bdeacf9

File tree

2 files changed

+105
-16
lines changed

2 files changed

+105
-16
lines changed

‎Readme.md

+105-16
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,113 @@
1-
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/128543288/14.1.6%2B)
3-
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T146190)
4-
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
5-
<!-- default badges end -->
6-
<!-- default file list -->
7-
*Files to look at*:
8-
9-
* **[Default.aspx](./CS/WebSite/Default.aspx) (VB: [Default.aspx](./VB/WebSite/Default.aspx))**
10-
* [Default.aspx.cs](./CS/WebSite/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/WebSite/Default.aspx.vb))
11-
* [UpdateLogic.js](./CS/WebSite/UpdateLogic.js) (VB: [UpdateLogic.js](./VB/WebSite/UpdateLogic.js))
12-
<!-- default file list end -->
13-
# How to update master and detail grids simultaneously in Batch Edit mode
1+
# Grid View for ASP.NET Web Forms - How to update master and detail grids simultaneously in batch edit mode
142
<!-- run online -->
153
**[[Run Online]](https://codecentral.devexpress.com/t146190/)**
164
<!-- run online end -->
175

6+
This example demonstrates how to implement master-detail functionality and update all grid controls on a custom button click in batch edit mode.
7+
8+
![Master Detail Grids](masterDetail.png)
9+
10+
## Overview
11+
12+
Follow the steps below to update master and detail grids simultaneously:
13+
14+
1. Create a master grid control, specify its [Templates.DetailRow](https://docs.devexpress.com/AspNet/DevExpress.Web.GridViewTemplates.DetailRow) property, and add a detail grid to the template.
15+
16+
2. Hide default command buttons in the grid's server-side [CommandButtonInitialize](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxGridView.CommandButtonInitialize) event handler and use the master grid's [StatusBar](https://docs.devexpress.com/AspNet/DevExpress.Web.GridViewTemplates.StatusBar) property to create custom **Save Changes** and **Cancel Changes** buttons.
17+
18+
```aspx
19+
<Templates>
20+
<!-- ... -->
21+
<StatusBar>
22+
<div style="text-align: right">
23+
<dx:ASPxButton ID="btn" Text="Save Changes" RenderMode="Link" AutoPostBack="false" runat="server">
24+
<ClientSideEvents Click="OnClick" />
25+
</dx:ASPxButton>
26+
<dx:ASPxButton ID="btn2" Text="Cancel Changes" RenderMode="Link" AutoPostBack="false" runat="server">
27+
<ClientSideEvents Click="OnCancel" />
28+
</dx:ASPxButton>
29+
</div>
30+
</StatusBar>
31+
</Templates>
32+
```
33+
34+
```csharp
35+
protected void Grid_CommandButtonInitialize(object sender, ASPxGridViewCommandButtonEventArgs e) {
36+
if (e.ButtonType == ColumnCommandButtonType.Update || e.ButtonType == ColumnCommandButtonType.Cancel) {
37+
e.Visible = false;
38+
}
39+
}
40+
```
41+
42+
3. Handle the master grid's client-side [DetailRowCollapsing](https://docs.devexpress.com/AspNet/js-ASPxClientGridView.DetailRowCollapsing) and [DetailRowExpanding](https://docs.devexpress.com/AspNet/js-ASPxClientGridView.DetailRowExpanding) events to get the visible indexes of expanded rows.
43+
44+
```js
45+
var visibleIndicies = [];
46+
function AddCurrentDetailGrid(visibleIndex) {
47+
if (visibleIndicies.indexOf(visibleIndex) == -1)
48+
visibleIndicies.push(visibleIndex);
49+
}
50+
function RemoveCurrentDetailGrid(visibleIndex) {
51+
var arrayIndex = visibleIndicies.indexOf(visibleIndex);
52+
if (arrayIndex > -1)
53+
visibleIndicies.splice(arrayIndex, 1);
54+
}
55+
function OnExpanding(s, e) {
56+
AddCurrentDetailGrid(e.visibleIndex);
57+
}
58+
function OnCollapsing(s, e) {
59+
RemoveCurrentDetailGrid(e.visibleIndex);
60+
}
61+
```
62+
63+
4. In the custom button's `Click` event handler, call the master grid's `PerformCallback` method to update all grid controls on the server.
64+
65+
```js
66+
var buttonFlag = false;
67+
function OnClick(s, e) {
68+
if (visibleIndicies.length == 0)
69+
grid.UpdateEdit();
70+
else {
71+
buttonFlag = true;
72+
grid.PerformCallback(visibleIndicies);
73+
}
74+
}
75+
```
76+
77+
5. Handle the master grid's server-side [CustomCallback](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxGridView.CustomCallback) event. In the handler, call the master grid's [FindDetailRowTemplateContol](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxGridView.FindDetailRowTemplateControl(System.Int32-System.String)) method to access all detail grids and use their [UpdateEdit](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxGridView.UpdateEdit) methods to update data.
78+
79+
```csharp
80+
protected void Grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) {
81+
ASPxGridView parentGrid = sender as ASPxGridView;
82+
parentGrid.UpdateEdit();
83+
parentGrid.DataBind();
84+
if (String.IsNullOrEmpty(e.Parameters))
85+
return;
86+
string[] paramArray = e.Parameters.Split(',');
87+
for (int i = 0; i < paramArray.Length; i++) {
88+
if (String.IsNullOrWhiteSpace(paramArray[i]))
89+
continue;
90+
ASPxGridView child = parentGrid.FindDetailRowTemplateControl(Convert.ToInt32(paramArray[i]), "grid2") as ASPxGridView;
91+
if (child != null) {
92+
child.UpdateEdit();
93+
child.DataBind();
94+
}
95+
}
96+
}
97+
```
98+
99+
## Files to Review
100+
101+
* [Default.aspx](./CS/WebSite/Default.aspx) (VB: [Default.aspx](./VB/WebSite/Default.aspx))
102+
* [Default.aspx.cs](./CS/WebSite/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/WebSite/Default.aspx.vb))
103+
* [UpdateLogic.js](./CS/WebSite/UpdateLogic.js) (VB: [UpdateLogic.js](./VB/WebSite/UpdateLogic.js))
18104
19-
<p>It's necessary to perform the following steps to accomplish this task:</p>
20-
<p><br />1) Hide built-in command buttons using the <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_CommandButtonInitializetopic">CommandButtonInitialize</a>  event and create custom ones;<br />2) Handle the client-side<a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_DetailRowCollapsingtopic"> DetailRowCollapsing</a> , <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_DetailRowExpandingtopic">DetailRowExpanding</a> events to track what detail grids are currently expanded; <br />3) Use the master grid's custom callback (the client-side <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_PerformCallbacktopic">PerformCallback</a>  method) to update all grids simultaneously on the server side;<br />4) Use the <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewScriptsASPxClientGridView_BatchEditConfirmShowingtopic">BatchEditConfirmShowing</a>  event to avoid losing changes in detail grids on an external callback;<br />5) Handle the server-side <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_CustomCallbacktopic">CustomCallback</a>  event to get all detail grids using the <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_FindDetailRowTemplateControltopic">FindDetailRowTemplateControl</a>  method and update them using the <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebASPxGridViewASPxGridView_UpdateEdittopic">UpdateEdit</a>  method.<br /><br />The attached example illustrates how to implement all these steps. </p>
105+
## Documentation
21106
22-
<br/>
107+
* [Master-Detail Relationship](https://docs.devexpress.com/AspNet/3772/components/grid-view/concepts/master-detail-relationship)
108+
* [Grid View Templates](https://docs.devexpress.com/AspNet/3718/components/grid-view/concepts/templates)
23109
110+
## More Examples
24111
112+
* [Grid View for ASP.NET Web Forms - Simple master-detail implementation](https://github.com/DevExpress-Examples/asp-net-web-forms-grid-master-detail-implementation)
113+
* [Grid View for ASP.NET Web Forms - How to refresh a master grid on a detail grid callback](https://github.com/DevExpress-Examples/asp-net-web-forms-grid-refresh-master-grid-on-detail-grid-callback)

‎masterDetail.png

49.9 KB
Loading

0 commit comments

Comments
 (0)