Skip to content

Commit c41b3a5

Browse files
elenapeskovaelenapeskova
authored
update description (#1)
1 parent 3f1c6e1 commit c41b3a5

File tree

3 files changed

+100
-45
lines changed

3 files changed

+100
-45
lines changed

‎Readme.md‎

Lines changed: 97 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,118 @@
1-
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/128532999/16.2.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/T517531)
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/Default.aspx) (VB: [Default.aspx](./VB/Default.aspx))
10-
* [Default.aspx.cs](./CS/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/Default.aspx.vb))
11-
<!-- default file list end -->
12-
# ASPxGridView - Batch Editing - How to update summaries when HighlightDeletedRows=true
1+
# Grid View for ASP.NET Web Forms - How to update total summaries on the client in batch edit mode when deleted rows are highlighted
132
<!-- run online -->
143
**[[Run Online]](https://codecentral.devexpress.com/t517531/)**
154
<!-- run online end -->
165

6+
This example demonstrates how to calculate the total summary dynamically in batch edit mode when the grid's [HighlightDeletedRows](https://docs.devexpress.com/AspNet/DevExpress.Web.GridViewBatchEditSettings.HighlightDeletedRows) property is enabled.
7+
8+
![Calculate total summaries in batch edit mode](TotalSummaryBatchMode.png)
9+
10+
## Overview
11+
12+
### Create a Custom Summary Item
13+
14+
Add a total summary item for the corresponding column. Use the item's [Tag](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxSummaryItemBase.Tag) property to identify the summary item and get its value.
15+
16+
```aspx
17+
<TotalSummary>
18+
<dx:ASPxSummaryItem SummaryType="Sum" FieldName="C2" Tag="C2_Sum" />
19+
</TotalSummary>
20+
```
1721

18-
<p>This example illustrates how to modify the <a href="https://www.devexpress.com/Support/Center/p/T114923">ASPxGridView - How to update total summaries on the client side in Batch Edit mode</a> example to correctly calculate the total summary if the <a href="https://documentation.devexpress.com/#AspNet/DevExpressWebGridViewBatchEditSettings_HighlightDeletedRowstopic">GridViewBatchEditSettings.HighlightDeletedRows</a> property is enabled. <br><br></p>
19-
<p><strong>See Also:</strong></p>
20-
<p><a href="https://www.devexpress.com/Support/Center/p/T114539">ASPxGridView - Batch Edit - How to calculate values on the fly</a> <br><a href="https://www.devexpress.com/Support/Center/p/T116925">ASPxGridView - Batch Edit - How to calculate unbound column and total summary values on the fly</a> <br><br><strong>ASP.NET MVC Example:</strong><br><a href="https://www.devexpress.com/Support/Center/p/T137186">GridView - How to update total summaries on the client side in Batch Edit mode</a></p>
21-
22-
23-
<h3>Description</h3>
24-
25-
<p>For this,&nbsp;create a custom Recovery button:</p>
26-
<code lang="aspx">&lt;dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowDeleteButton="true"&gt;
27-
&lt;CustomButtons&gt;
28-
&lt;dx:GridViewCommandColumnCustomButton ID="customRecover" Text="Recover"&gt;&lt;/dx:GridViewCommandColumnCustomButton&gt;
29-
&lt;/CustomButtons&gt;
30-
&lt;/dx:GridViewCommandColumn&gt;
31-
</code>
32-
<p>&nbsp;To manipulate the button visibility, add the following custom CSS classes:</p>
33-
<code lang="aspx">&lt;Styles&gt;
34-
&lt;CommandColumnItem CssClass="commandCell"&gt;&lt;/CommandColumnItem&gt;
35-
&lt;BatchEditDeletedRow CssClass="deletedRow"&gt;&lt;/BatchEditDeletedRow&gt;
36-
&lt;/Styles&gt;
37-
</code>
38-
<p>&nbsp;These CSS rules allow showing a custom Recovery button when it is required:</p>
39-
<code lang="css">.deletedRow a[data-args*="customRecover"].commandCell {
22+
```cs
23+
protected object GetTotalSummaryValue() {
24+
ASPxSummaryItem summaryItem = Grid.TotalSummary.First(i => i.Tag == "C2_Sum");
25+
return Grid.GetTotalSummaryValue(summaryItem);
26+
}
27+
```
28+
29+
Replace the summary item with a custom [footer template](https://docs.devexpress.com/AspNet/DevExpress.Web.GridViewColumn.FooterTemplate).
30+
31+
```aspx
32+
<dx:GridViewDataSpinEditColumn Width="100" FieldName="C2">
33+
<FooterTemplate>
34+
Sum =
35+
<dx:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="labelSum" Text='<%# GetTotalSummaryValue() %>' />
36+
</FooterTemplate>
37+
</dx:GridViewDataSpinEditColumn>
38+
```
39+
40+
Handle the grid's client-side [BatchEditEndEditing](https://docs.devexpress.com/AspNet/js-ASPxClientGridView.BatchEditEndEditing) and [BatchEditRowDeleting](https://docs.devexpress.com/AspNet/js-ASPxClientGridView.BatchEditRowDeleting) events. In handlers, use the grid's [batchEditApi.GetCellValue](https://docs.devexpress.com/AspNet/js-ASPxClientGridViewBatchEditApi.GetCellValue(visibleIndex-columnFieldNameOrId)) method to get initial cell values and `rowValues` argument property to get new cell values. Then recalculate the summary value and assign it to the label.
41+
42+
```js
43+
function OnBatchEditEndEditing(s, e) {
44+
CalculateSummary(s, e.rowValues, e.visibleIndex, false);
45+
}
46+
function CalculateSummary(grid, rowValues, visibleIndex, isDeleting) {
47+
var originalValue = grid.batchEditApi.GetCellValue(visibleIndex, "C2");
48+
var newValue = rowValues[(grid.GetColumnByField("C2").index)].value;
49+
var dif = isDeleting ? -newValue : newValue - originalValue;
50+
labelSum.SetValue((parseFloat(labelSum.GetValue()) + dif).toFixed(1));
51+
}
52+
function OnBatchEditRowDeleting(s, e) {
53+
CalculateSummary(s, e.rowValues, e.visibleIndex, true);
54+
}
55+
```
56+
57+
### Create a Custom Recovery Button
58+
59+
Use the command column's [CustomButtons](https://docs.devexpress.com/AspNet/DevExpress.Web.GridViewCommandColumn.CustomButtons) property to create a custom **Recovery** button.
60+
61+
```aspx
62+
<dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowDeleteButton="true" ShowRecoverButton="true">
63+
<CustomButtons>
64+
<dx:GridViewCommandColumnCustomButton ID="customRecover" Text="Recover"></dx:GridViewCommandColumnCustomButton>
65+
</CustomButtons>
66+
</dx:GridViewCommandColumn>
67+
```
68+
69+
Add custom CSS classes to control the custom button's visibility based on a condition and hide the default **Recovery** button.
70+
71+
```aspx
72+
<Styles>
73+
<CommandColumnItem CssClass="commandCell"></CommandColumnItem>
74+
<BatchEditDeletedRow CssClass="deletedRow"></BatchEditDeletedRow>
75+
</Styles>
76+
```
77+
78+
```css
79+
.deletedRow a[data-args*="customRecover"].commandCell {
4080
display: inline !important;
4181
}
82+
4283
a[data-args*="customRecover"].commandCell {
4384
display: none;
4485
}
45-
</code>
46-
<p>&nbsp;To hide the standard Recovery button, use the following rule:</p>
47-
<code lang="css">a[data-args*="Recover"].commandCell {
86+
87+
a[data-args*="Recover"].commandCell {
4888
display: none;
4989
}
50-
</code>
51-
<p>&nbsp;Finally, handle the&nbsp;<a href="https://documentation.devexpress.com/#AspNet/DevExpressWebScriptsASPxClientGridView_CustomButtonClicktopic">ASPxClientGridView.CustomButtonClick</a>&nbsp;event to restore the row and calculate the total summary after that:&nbsp;</p>
52-
<code lang="js">function OnCustomButtonClick(s, e) {
90+
```
91+
92+
Handle the grid's client-side [CustomButtonClick](https://docs.devexpress.com/AspNet/js-ASPxClientGridView.CustomButtonClick) event to restore the deleted row and recalculate the total summary.
93+
94+
```js
95+
function OnCustomButtonClick(s, e) {
5396
if (e.buttonID == 'customRecover') {
5497
s.batchEditApi.ResetChanges(e.visibleIndex);
5598
var value = s.batchEditApi.GetCellValue(e.visibleIndex, "C2");
5699
labelSum.SetValue((parseFloat(labelSum.GetValue()) + value).toFixed(1));
57100
}
58101
}
59-
</code>
60-
<p>&nbsp;</p>
102+
```
103+
104+
## Files to Review
105+
106+
* [Default.aspx](./CS/Default.aspx) (VB: [Default.aspx](./VB/Default.aspx))
107+
* [Default.aspx.cs](./CS/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/Default.aspx.vb))
108+
109+
## Documentation
61110

62-
<br/>
111+
* [Grid in Batch Edit Mode](https://docs.devexpress.com/AspNet/16443/components/grid-view/concepts/edit-data/batch-edit-mode)
63112

113+
## More Examples
64114

115+
* [Grid View for ASP.NET Web Forms - How to update total summaries on the client in batch edit mode](https://github.com/DevExpress-Examples/asp-net-web-forms-grid-update-total-summaries-on-client-in-batch-mode)
116+
* [Grid View for ASP.NET Web Forms - How to calculate values dynamically in batch edit mode](https://github.com/DevExpress-Examples/asp-net-web-forms-gridview-calculate-values-dynamically-batch-mode)
117+
* [Grid View for ASP.NET Web Forms - How to calculate values and update total summaries dynamically in batch edit mode](https://github.com/DevExpress-Examples/asp-net-web-forms-grid-calculate-column-values-and-total-summaries-in-batch-mode)
118+
* [Grid View for ASP.NET MVC - How to update total summaries on the client in batch edit mode](https://github.com/DevExpress-Examples/asp-net-mvc-grid-update-total-summaries-on-client-in-batch-mode)

‎TotalSummaryBatchMode.png‎

29.5 KB
Loading

‎config.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
{
22
"runOnWeb": true,
3-
"autoGenerateVb": true
4-
}
3+
"autoGenerateVb": true,
4+
"useLegacyVbConverter": true
5+
}

0 commit comments

Comments
 (0)