Skip to content

Commit 5cc7939

Browse files
elenapeskovaelenapeskova
authored
update readme (#2)
* update description * update structure
1 parent dff3a39 commit 5cc7939

File tree

3 files changed

+112
-121
lines changed

3 files changed

+112
-121
lines changed

‎README.md

+109-119
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,118 @@
1-
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/195209760/19.1.3%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/T828659)
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/BatchEditEditItemAndDataItemTemplates/Default.aspx) (VB: [Default.aspx](./VB/BatchEditEditItemAndDataItemTemplates/Default.aspx))
10-
* [Default.aspx.cs](./CS/BatchEditEditItemAndDataItemTemplates/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/BatchEditEditItemAndDataItemTemplates/Default.aspx.vb))
11-
* [BatchEditController.js](./CS/BatchEditEditItemAndDataItemTemplates/BatchEditController.js) (VB: [BatchEditController.js](./VB/BatchEditEditItemAndDataItemTemplates/BatchEditController.js))
12-
<!-- default file list end -->
13-
# ASPxGridView - Batch Edit - How to use EditItemTemplate with DataItemTemplate.
1+
# Grid View for ASP.NET Web Forms - How to use an edit item and data item templates in batch mode
142
<!-- run online -->
153
**[[Run Online]](https://codecentral.devexpress.com/195209760/)**
164
<!-- run online end -->
175

18-
This example shows how to use DataItemTemplate and EditItemTemplate in Batch Edit mode. The templates use ASPxRatingControl as content.
19-
20-
### Follow these steps:
21-
22-
1. Add ASPxGridView to your page and configure it as follows:
23-
```aspx
24-
<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="ID" ClientInstanceName="grid" DataSourceID="ObjectDataSource1">
25-
...
26-
<SettingsEditing Mode="Batch">
27-
<BatchEditSettings EditMode="Cell" AllowRegularDataItemTemplate="true" StartEditAction="FocusedCellClick" />
28-
</SettingsEditing>
29-
<ClientSideEvents BatchEditStartEditing="OnBatchEditStartEditing"
30-
BatchEditEndEditing="OnBatchEditEndEditing"
31-
FocusedCellChanging="OnFocusedCellChanging" Init="OnGridInit" />
32-
</dx:ASPxGridView>
33-
```
34-
>Note the values of the [AllowRegularDataItemTemplate][1] and [StartEditAction][2] properties.
35-
36-
2. Add controls to the DataItemTemplate and EditItemTemplate. Since DataItemTemplate generates multiple instances of a control, the control's ClientInstanceName need to be set dynamically. ClientInstanceName for the control in EditItemTemplate is set statically.
37-
38-
```aspx
39-
<DataItemTemplate>
40-
<dx:ASPxRatingControl ID="ratingControl" runat="server"
41-
ClientInstanceName='<%# "DataItemRateControl"+ Container.VisibleIndex %>'
42-
ItemCount="5" Value='<%# Convert.ToInt32(Eval("RatingValue")) %>'>
43-
<ClientSideEvents ItemClick="OnItemMouseClick_DataItem"
44-
ItemMouseOver="OnItemMouseOver_DataItem" ItemMouseOut="OnItemMouseOut_DataItem" />
45-
</dx:ASPxRatingControl>
46-
</DataItemTemplate>
47-
<EditItemTemplate>
48-
<dx:ASPxRatingControl ID="ratingControl" runat="server" ClientInstanceName="EditItemRateControl" ItemCount="5">
49-
<ClientSideEvents ItemClick="OnItemMouseClick_EditItem" Init="OnRateControlInit_EditItem" />
50-
</dx:ASPxRatingControl>
51-
</EditItemTemplate>
52-
```
53-
54-
3. Add handler for the client-side [BatchEditStartEditing][3] event to set the ASPxRatingControl value inside the EditItemTemplate when editing starts. To save the selected value in the grid when editing ends, use [OnBatchEditEndEditing][4].
55-
```javascript
56-
function OnBatchEditStartEditing(s, e) {
57-
EditItemRateControl.SetValue(e.rowValues[s.GetColumnByField("RatingValue").index].value);
58-
}
59-
function OnBatchEditEndEditing(s, e) {
60-
var templateColumn = s.GetColumnByField("RatingValue");
61-
if (!e.rowValues.hasOwnProperty(templateColumn.index))
62-
return;
63-
var cellInfo = e.rowValues[templateColumn.index];
64-
cellInfo.value = EditItemRateControl.GetValue();
65-
SetRateControlValueByRowIndex_DataItem(e.visibleIndex, cellInfo.value);
66-
}
67-
```
68-
4. Add the client-side ItemMouseClick handler for controls in EditItemTemplate and DataItemTemplate separately.
69-
When the EditItemTemplate's ASPxRatingControl item is clicked, finish editing with the [batchEditApi.EndEdit][5] method. When the event occurs in ASPxRatingControl from DataItemTemplate, set a cell value with the [batchEditApi.SetCellValue][6] method.
70-
71-
```javascript
72-
function OnItemMouseClick_EditItem(s, e) {
73-
grid.batchEditApi.EndEdit();
74-
}
75-
function OnItemMouseClick_DataItem(s, e) {
76-
grid.batchEditApi.SetCellValue(currentFocusedCell.itemVisibleIndex, currentFocusedCell.column.index, s.GetValue());
77-
}
78-
```
79-
5. Add keyboard navigation to the grid. Handle the ASPxClientGridView.Init event and subscribe to the keydown event there. Then, process different key codes in this handler:
80-
```javascript
81-
function OnGridInit(s, e) {
82-
ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "keydown", function (evt) {
83-
return OnKeyDown(evt, s);
84-
});
85-
}
86-
function OnGridViewKeyDown(evt, grid) {
87-
if (typeof (event) != "undefined" && event != null)
88-
evt = event;
89-
if (!grid.InCallback() && NeedProcessDocumentKeyDown(evt)) {
90-
if (evt.shiftKey && evt.keyCode == 9 /*Shift + tab */) {
91-
setTimeout(function () {
92-
grid.batchEditApi.MoveFocusBackward();
93-
}, 0);
94-
} else if (evt.keyCode == 9 /*Tab key*/) {
95-
setTimeout(function () {
96-
grid.batchEditApi.MoveFocusForward();
97-
}, 0);
98-
}
6+
This example demonstrates how to create a column's template, add a rating control to the template, and configure the grid's cell edit functionality in batch mode.
7+
8+
![Templates in Batch Edit Mode](templatesInBatchMode.png)
9+
10+
## Overview:
11+
12+
Follow the steps below to configure the grid's edit functionality for templated cells in batch mode:
13+
14+
1. Create the [Grid View](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxGridView) control, set its [Mode](https://docs.devexpress.com/AspNet/DevExpress.Web.ASPxGridViewEditingSettings.Mode) property to `Batch`, and enable the [AllowRegularDataItemTemplate](https://docs.devexpress.com/AspNet/DevExpress.Web.GridBatchEditSettings.AllowRegularDataItemTemplate) property.
15+
16+
```aspx
17+
<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="ID" ClientInstanceName="grid"
18+
DataSourceID="ObjectDataSource1">
19+
<!-- ... -->
20+
<SettingsEditing Mode="Batch">
21+
<BatchEditSettings EditMode="Cell" AllowRegularDataItemTemplate="true"
22+
StartEditAction="FocusedCellClick" />
23+
</SettingsEditing>
24+
<ClientSideEvents BatchEditStartEditing="OnBatchEditStartEditing"
25+
BatchEditEndEditing="OnBatchEditEndEditing"
26+
FocusedCellChanging="OnFocusedCellChanging" Init="OnGridInit" />
27+
</dx:ASPxGridView>
28+
```
29+
30+
2. Specify a column's [DataItemTemplate](https://docs.devexpress.com/AspNet/DevExpress.Web.GridViewDataColumn.DataItemTemplate) and [EditItemTemplate](https://docs.devexpress.com/AspNet/DevExpress.Web.GridViewDataColumn.EditItemTemplate) properties, add rating controls to the templates, and specify their `ClientInstanceName` properties.
31+
32+
```aspx
33+
<DataItemTemplate>
34+
<dx:ASPxRatingControl ID="ratingControl" runat="server"
35+
ClientInstanceName='<%# "DataItemRateControl"+ Container.VisibleIndex %>'
36+
ItemCount="5" Value='<%# Convert.ToInt32(Eval("RatingValue")) %>'>
37+
<ClientSideEvents ItemClick="OnItemMouseClick_DataItem" ItemMouseOver="OnItemMouseOver_DataItem"
38+
ItemMouseOut="OnItemMouseOut_DataItem" />
39+
</dx:ASPxRatingControl>
40+
</DataItemTemplate>
41+
<EditItemTemplate>
42+
<dx:ASPxRatingControl ID="ratingControl" runat="server" ClientInstanceName="EditItemRateControl" ItemCount="5">
43+
<ClientSideEvents ItemClick="OnItemMouseClick_EditItem" Init="OnRateControlInit_EditItem" />
44+
</dx:ASPxRatingControl>
45+
</EditItemTemplate>
46+
```
47+
48+
3. Handle the grid's client-side [BatchEditStartEditing](https://docs.devexpress.com/AspNet/js-ASPxClientGridView.BatchEditStartEditing) event to assign the edit value to the rating control. To save this value when editing ends, handle the grid's client-side [BatchEditEndEditing](https://docs.devexpress.com/AspNet/js-ASPxClientGridView.BatchEditEndEditing) event.
49+
50+
```js
51+
function OnBatchEditStartEditing(s, e) {
52+
EditItemRateControl.SetValue(e.rowValues[s.GetColumnByField("RatingValue").index].value);
53+
}
54+
function OnBatchEditEndEditing(s, e) {
55+
var templateColumn = s.GetColumnByField("RatingValue");
56+
if (!e.rowValues.hasOwnProperty(templateColumn.index))
57+
return;
58+
var cellInfo = e.rowValues[templateColumn.index];
59+
cellInfo.value = EditItemRateControl.GetValue();
60+
SetRateControlValueByRowIndex_DataItem(e.visibleIndex, cellInfo.value);
61+
}
62+
```
63+
64+
4. For rating controls, handle their client-side `ItemMouseClick` events and do the following in handlers:
65+
66+
* Call the grid's [EndEdit](https://docs.devexpress.com/AspNet/js-ASPxClientGridViewBatchEditApi.EndEdit) method to finish editing after a user clicks a rating control item in the edit item template.
67+
* Call the grid's [SetCellValue](https://docs.devexpress.com/AspNet/js-ASPxClientGridViewBatchEditApi.SetCellValue(visibleIndex-columnFieldNameOrId-value)) method to assign a new value to a rating control item in the data item template.
68+
69+
```javascript
70+
function OnItemMouseClick_EditItem(s, e) {
71+
grid.batchEditApi.EndEdit();
72+
}
73+
function OnItemMouseClick_DataItem(s, e) {
74+
grid.batchEditApi.SetCellValue(currentFocusedCell.itemVisibleIndex, currentFocusedCell.column.index, s.GetValue());
75+
}
76+
```
77+
78+
5. To add keyboard navigation to the grid, handle the grid's client-side `Init` event and add a `KeyDown` event handler. In this handler, process key codes as follows:
79+
80+
```javascript
81+
function OnGridInit(s, e) {
82+
ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "keydown", function (evt) {
83+
return OnKeyDown(evt, s);
84+
});
9985
}
100-
}
101-
```
102-
6. Use the approach from p.5 to add keyboard support in ASPxRatingControl:
103-
```javascript
104-
function OnRateControlInit_EditItem(s, e) {
105-
ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "keydown", function (evt) {
106-
return OnRatingControlKeyDown(evt, s);
107-
});
108-
}
109-
function OnRatingControlKeyDown(evt, ratingControl) {
110-
if (typeof (event) != "undefined" && event != null)
111-
evt = event;
112-
if (!ratingControl.InCallback() && NeedProcessDocumentKeyDown(evt)) {
113-
if (evt.keyCode == 32 /*Space bar*/) {
114-
setTimeout(function () {
115-
MoveFocusToNextStar();
116-
}, 0);
86+
function OnGridViewKeyDown(evt, grid) {
87+
if (typeof (event) != "undefined" && event != null)
88+
evt = event;
89+
if (!grid.InCallback() && NeedProcessDocumentKeyDown(evt)) {
90+
if (evt.shiftKey && evt.keyCode == 9 /*Shift + tab */) {
91+
setTimeout(function () {
92+
grid.batchEditApi.MoveFocusBackward();
93+
}, 0);
94+
} else if (evt.keyCode == 9 /*Tab key*/) {
95+
setTimeout(function () {
96+
grid.batchEditApi.MoveFocusForward();
97+
}, 0);
98+
}
11799
}
118100
}
119-
}
120-
```
101+
```
102+
103+
6. To add keboard navigation to the rating control, handle its client-side `Init` event as described in the previous step.
104+
105+
## Files to Review
106+
107+
* [Default.aspx](./CS/BatchEditEditItemAndDataItemTemplates/Default.aspx) (VB: [Default.aspx](./VB/BatchEditEditItemAndDataItemTemplates/Default.aspx))
108+
* [Default.aspx.cs](./CS/BatchEditEditItemAndDataItemTemplates/Default.aspx.cs) (VB: [Default.aspx.vb](./VB/BatchEditEditItemAndDataItemTemplates/Default.aspx.vb))
109+
* [BatchEditController.js](./CS/BatchEditEditItemAndDataItemTemplates/BatchEditController.js) (VB: [BatchEditController.js](./VB/BatchEditEditItemAndDataItemTemplates/BatchEditController.js))
110+
111+
## Documentation
112+
113+
* [Grid in Batch Edit Mode](https://docs.devexpress.com/AspNet/16443/components/grid-view/concepts/edit-data/batch-edit-mode)
114+
* [Grid View Templates](https://docs.devexpress.com/AspNet/3718/components/grid-view/concepts/templates)
121115
116+
## More Examples
122117
123-
[1]: https://documentation.devexpress.com/AspNet/DevExpress.Web.GridBatchEditSettings.AllowRegularDataItemTemplate.property
124-
[2]: https://documentation.devexpress.com/AspNet/DevExpress.Web.GridBatchEditSettings.StartEditAction.property
125-
[3]: https://docs.devexpress.com/AspNet/js-ASPxClientGridView.BatchEditStartEditing
126-
[4]: https://docs.devexpress.com/AspNet/js-ASPxClientGridView.BatchEditEndEditing
127-
[5]: https://docs.devexpress.com/AspNet/js-ASPxClientGridViewBatchEditApi.EndEdit
128-
[6]: https://docs.devexpress.com/AspNet/js-ASPxClientGridViewBatchEditApi.SetCellValue(visibleIndex-columnFieldNameOrId-value)
118+
* [Grid View for ASP.NET Web Forms - How to use and modify a control placed in templated column in batch edit mode](https://github.com/DevExpress-Examples/aspxgridview-batchedit-how-to-use-and-modify-a-control-placed-in-dataitemtemplate-t506160)

‎config.json

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

‎templatesInBatchMode.png

74.3 KB
Loading

0 commit comments

Comments
 (0)