This repository was archived by the owner on Oct 14, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathbatchediting.html
More file actions
72 lines (70 loc) · 5.43 KB
/
Copy pathbatchediting.html
File metadata and controls
72 lines (70 loc) · 5.43 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 1 : batch editing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link href="../content/bootstrap.min.css" rel="stylesheet" />
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
<link href="../content/default.css" rel="stylesheet" />
<link href="../content/default-responsive.css" rel="styleheet" />
<link href="../content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="../scripts/jquery-1.11.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="../scripts/jquery-3.4.1.min.js"></script>
<!--<![endif]-->
<script src="../scripts/jquery.validate.min.js"></script>
<script src="../scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="../scripts/jsondata.min.js"></script>
<script src="../scripts/jsrender.min.js"></script>
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
<script src="../scripts/properties.js" type="text/javascript"></script>
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="Grid"></div>
</div>
</div>
</div>
<script type="text/javascript">
var Data = [
{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 1, Employee:{Address:'507 - 20th Ave. E.Apt. 2A'},Freight: 33.38,ShipName:'Alfreds Futterkiste',ShipCountry:'Brazil'},
{ OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 2, Employee:{Address:'722 Moss Bay Blvd.'},Freight: 11.61,ShipName:'Ana Trujillo Emparedados y helados',ShipCountry:'France'},
{ OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 3, Employee:{Address:'908 W. Capital Way'},Freight: 65.83,ShipName:'Antonio Moreno Taquería',ShipCountry:'Denmark'},
{ OrderID: 10255, CustomerID: 'ANTON', EmployeeID: 3, Employee:{Address:'7 Houndstooth Rd.'},Freight: 18.33,ShipName:'Hanari Carnes',ShipCountry:'Britain'},
{ OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 6, Employee:{Address:'4110 Old Redmond Rd.'},Freight: 58.17,ShipName:'Berglunds snabbköp',ShipCountry:'Austria'},
{ OrderID: 10253, CustomerID: 'WELLI', EmployeeID: 9, Employee:{Address:'Coventry HouseMiner Rd.'},Freight: 58.17,ShipName:'Vins et alcools Chevalier',ShipCountry:'Mexico'},
{ OrderID: 10254, CustomerID: 'HILLA', EmployeeID: 4, Employee:{Address:'722 Moss Bay Blvd.'},Freight: 148.33,ShipName:'Toms Spezialitäten',ShipCountry:'Belgium'},
{ OrderID: 10255, CustomerID: 'ANTON', EmployeeID: 3, Employee:{Address:'908 W. Capital Way'},Freight: 18.33,ShipName:'Hanari Carnes',ShipCountry:'Britain'},
{ OrderID: 10256, CustomerID: 'AROUT', EmployeeID: 2, Employee:{Address:'4726 - 11th Ave. N.E.'},Freight: 13.33,ShipName:'Hanari Carnes',ShipCountry:'France'},
{ OrderID: 10257, CustomerID: 'CENTC', EmployeeID: 1, Employee:{Address:'7 Houndstooth Rd.'},Freight: 14.33,ShipName:'Chop-suey Chinese',ShipCountry:'Denmark'},
{ OrderID: 10258, CustomerID: 'ANTON', EmployeeID: 3, Employee:{Address:'507 - 20th Ave. E.Apt. 2A'},Freight: 18.33,ShipName:'Hanari Carnes',ShipCountry:'Britain'},
{ OrderID: 10259, CustomerID: 'ANDREW', EmployeeID: 7, Employee: { Address: '14 Garrett Hill' }, Freight: 10.33, ShipName: 'Hanari Carnes', ShipCountry: 'Britain' },
{ OrderID: 10260, CustomerID: "OTTIK", EmployeeID: 4,Employee: { Address: 'Coventry HouseMiner Rd.' }, ShipName: "Ottilies Käseladen", ShipCountry: "Britain", Freight: 55.0900 },
{ OrderID: 10261, CustomerID: "QUEDE", EmployeeID: 4,Employee: { Address: '4110 Old Redmond Rd.' }, ShipName: "Que Delícia", ShipCountry: "France", Freight: 3.0500 }
];
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: Data,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },
{ field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },
{ field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80 },
{ field: "Employee.Address", headerText: "Address", width: 110, },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },
{ field: "ShipName", headerText: 'Ship Name', width: 150 },
{ field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 }
]
});
});
</script>
</body>
</html>