Skip to content

Commit 2876860

Browse files
author
pipeline
committed
feature(EJ2-3757): Editing sample added.
1 parent 47f4b53 commit 2876860

14 files changed

+236
-3
lines changed

‎src/common/sampleList.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/grid/batch-editing-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/grid/batch-editing.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="control-section">
2+
<div class="content-wrapper">
3+
<div id="Grid"></div>
4+
</div>
5+
</div>
6+
7+
<div id="description">
8+
<p>
9+
Batch editing mode is used to send bulk request (add, update and delete) to Grid. You can start editing by double clicking
10+
a cell and can change cell value. Edited cell will be highlighted while navigating to next cell or any other row,
11+
so that you know which fields or cells has been edited.
12+
</p>
13+
<p>In this demo, batch editing is enabled by defining mode as `batch`.</p>
14+
<p style="font-weight: 500">Injecting Module</p>
15+
<p>
16+
Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject
17+
<code><a target="_blank" class="code"
18+
href="http://ej2.syncfusion.com/documentation/grid/api-edit.html">
19+
Edit
20+
</a></code> module using the <code>Grid.Inject(Edit)</code> method.
21+
</p>
22+
</div>

‎src/grid/batch-editing.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Grid, Toolbar, Edit, Page } from '@syncfusion/ej2-grids';
2+
import { orderData } from './datasource';
3+
4+
/**
5+
* Batch Editing sample
6+
*/
7+
Grid.Inject(Edit, Toolbar, Page);
8+
9+
this.default = (): void => {
10+
let grid: Grid = new Grid(
11+
{
12+
dataSource: orderData,
13+
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'batch' },
14+
allowPaging: true,
15+
pageSettings: {pageCount: 5},
16+
toolbar: ['add', 'edit', 'delete', 'update', 'cancel'],
17+
columns: [
18+
{
19+
field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'right',
20+
validationRules: { required: true }, width: 120
21+
},
22+
{
23+
field: 'CustomerID', headerText: 'Customer ID',
24+
validationRules: { required: true }, width: 140
25+
},
26+
{
27+
field: 'Freight', headerText: 'Freight', textAlign: 'right', editType: 'numericedit',
28+
width: 120, format: 'C2'
29+
},
30+
{ field: 'ShipCity', headerText: 'Ship City', width: 170 },
31+
{
32+
field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,
33+
edit: { params: { popupHeight: '300px' } }
34+
}],
35+
});
36+
grid.appendTo('#Grid');
37+
};

‎src/grid/columnchooser-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/grid/columnchooser.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="control-section">
2+
<div class="content-wrapper">
3+
<div id="Grid">
4+
</div>
5+
</div>
6+
</div>
7+
8+
<div id="description">
9+
<p>The Grid columns can be shown/hidden dynamically by using column chooser. To enable column chooser behavior, set <code><a target="_blank" class="code"
10+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#showColumnChooser-boolean">showColumnChooser
11+
</a></code> property as true. You can also prevent to display the particular column in column chooser by setting
12+
<code><a target="_blank" class="code"
13+
href="http://ej2.syncfusion.com/documentation/grid/api-column.html#showInColumnChooser-boolean">columns->showInColumnChooser
14+
</a></code> as false in columns definition.
15+
16+
</p>
17+
<br/>
18+
19+
<p>
20+
In this demo, when the user clicks column chooser icon from the toolbar, then column chooser menu will open, user the can
21+
show or hide the columns by changing the state of the checkbox.
22+
</p>
23+
</div>

‎src/grid/columnchooser.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Grid, Page, Selection, Toolbar } from '@syncfusion/ej2-grids';
2+
import { orderData } from './datasource';
3+
4+
Grid.Inject(Page, Selection, Toolbar);
5+
6+
/**
7+
* Column Chooser Grid sample
8+
*/
9+
this.default = (): void => {
10+
let grid: Grid = new Grid(
11+
{
12+
dataSource: orderData.slice(0, 60),
13+
showColumnChooser: true,
14+
allowPaging: true,
15+
toolbar: ['columnchooser'],
16+
columns: [
17+
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'right' },
18+
{ field: 'CustomerName', headerText: 'Customer Name', width: 150, showInColumnChooser: false },
19+
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'right' },
20+
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'right' },
21+
{ field: 'ShipCountry', visible: false, headerText: 'Ship Country', width: 150 }
22+
]
23+
});
24+
grid.appendTo('#Grid');
25+
};

‎src/grid/dialog-editing-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎src/grid/dialog-editing.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="control-section">
2+
<div class="content-wrapper">
3+
<div id="Grid"></div>
4+
</div>
5+
</div>
6+
7+
<div id="description">
8+
<p>
9+
Dialog Editing is used to edit rows through dialog component. You can start editing by double clicking a row or toolbar `Edit`
10+
button and then you can change the row values.
11+
</p>
12+
<p>In this demo, dialog editing is enabled by defining mode as `dialog`.</p>
13+
<p style="font-weight: 500">Injecting Module</p>
14+
<p>
15+
Grid features are segregated into individual feature-wise modules. To use editing feature, we need to inject
16+
<code><a target="_blank" class="code"
17+
href="http://ej2.syncfusion.com/documentation/grid/api-edit.html">
18+
Edit
19+
</a></code> module using the <code>Grid.Inject(Edit)</code> method.
20+
</p>
21+
</div>

‎src/grid/dialog-editing.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Grid, Edit, Toolbar, Page } from '@syncfusion/ej2-grids';
2+
import { orderData } from './datasource';
3+
4+
/**
5+
* Dialog Editing sample
6+
*/
7+
Grid.Inject(Edit, Toolbar, Page);
8+
this.default = (): void => {
9+
let grid: Grid = new Grid(
10+
{
11+
dataSource: orderData,
12+
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'dialog' },
13+
allowPaging: true,
14+
pageSettings: {pageCount: 5},
15+
toolbar: ['add', 'edit', 'delete', 'update', 'cancel'],
16+
columns: [
17+
{
18+
field: 'OrderID', isPrimaryKey: true, headerText: 'Order ID', textAlign: 'right',
19+
validationRules: { required: true }, width: 120
20+
},
21+
{
22+
field: 'CustomerID', headerText: 'Customer ID',
23+
validationRules: { required: true }, width: 140
24+
},
25+
{
26+
field: 'Freight', headerText: 'Freight', textAlign: 'right', editType: 'numericedit',
27+
width: 120, format: 'C2'
28+
},
29+
{ field: 'ShipCity', headerText: 'Ship City', width: 170 },
30+
{
31+
field: 'ShipCountry', headerText: 'Ship Country', editType: 'dropdownedit', width: 150,
32+
edit:  { params:  {  popupHeight:  '300px' } }
33+
}],
34+
});
35+
grid.appendTo('#Grid');
36+
};

0 commit comments

Comments
 (0)