@syncfusion/ej2-grids 20.3.61 → 20.3.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/README.md +48 -2
- package/dist/ej2-grids.min.js +1 -10
- package/dist/ej2-grids.umd.min.js +1 -10
- package/dist/es6/ej2-grids.es2015.js +1 -1
- package/dist/es6/ej2-grids.es5.js +1 -1
- package/dist/global/ej2-grids.min.js +1 -10
- package/dist/global/index.d.ts +0 -9
- package/package.json +82 -82
- package/src/grid/base/grid.js +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# JavaScript Grid Control
|
|
2
2
|
|
|
3
|
-
The [JavaScript Grid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=javascript-grid-npm) control is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull data from a data source, such as array of JSON objects, `OData web services`, or DataManager binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.
|
|
3
|
+
The [JavaScript Grid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid?utm_source=npm&utm_medium=listing&utm_campaign=javascript-grid-npm) control is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull data from a data source, such as array of JSON objects, `OData web services`, or [DataManager](https://ej2.syncfusion.com/documentation/data/data-binding/) binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
6
|
<a href="https://ej2.syncfusion.com/documentation/grid/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-grid-npm">Getting started</a>
|
|
@@ -26,6 +26,52 @@ To install Grid and its dependent packages, use the following command.
|
|
|
26
26
|
```sh
|
|
27
27
|
npm install @syncfusion/ej2-grids
|
|
28
28
|
```
|
|
29
|
+
### Adding Grid control
|
|
30
|
+
|
|
31
|
+
Now, you can start adding the Grid control in the application. For getting started, add a `div` element for Grid control in **index.html**. Then refer the **index.js** file, below **EJ2 style** and **EJ2 script** reference into the **index.html** file.
|
|
32
|
+
|
|
33
|
+
To render the basic Grid, you can include the HTML code example below in your **index.html** file.
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<!DOCTYPE html>
|
|
37
|
+
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
38
|
+
<head>
|
|
39
|
+
<title>Essential JS 2 Grid</title>
|
|
40
|
+
<!-- Essential JS 2 material theme -->
|
|
41
|
+
<link rel="stylesheet" href=https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/material.css />
|
|
42
|
+
<script src="node_modules/@syncfusion/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
|
|
43
|
+
<script src="node_modules/@syncfusion/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
|
|
44
|
+
<script src="node_modules/@syncfusion/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
|
|
45
|
+
<script src="node_modules/@syncfusion/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>
|
|
46
|
+
<script src="index.js" type="text/javascript" defer></script>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<div id="Grid"></div>
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
#### Basic Grid initialization
|
|
55
|
+
you can include the HTML code example below in your **index.js** file.
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
let data = [
|
|
59
|
+
{'OrderID': 10248,'CustomerID': 'VINET', 'ShipCountry': 'France'},
|
|
60
|
+
{'OrderID': 10249,'CustomerID': 'TOMSP', 'ShipCountry': 'Germany'},
|
|
61
|
+
{'OrderID': 10250,'CustomerID': 'HANAR', 'ShipCountry': 'Brazil' },
|
|
62
|
+
{'OrderID': 10251,'CustomerID': 'VICTE', 'ShipCountry': 'France'}
|
|
63
|
+
]
|
|
64
|
+
var grid = new ej.grids.Grid({
|
|
65
|
+
dataSource: data,
|
|
66
|
+
columns: [
|
|
67
|
+
{ field: 'OrderID', headerText: 'Order ID'},
|
|
68
|
+
{ field: 'CustomerID', headerText: 'Customer ID'},
|
|
69
|
+
{ field: 'ShipCountry', headerText: 'Ship Country' }
|
|
70
|
+
],
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
grid.appendTo('#Grid');
|
|
74
|
+
```
|
|
29
75
|
|
|
30
76
|
## Supported frameworks
|
|
31
77
|
|
|
@@ -85,4 +131,4 @@ Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-contr
|
|
|
85
131
|
|
|
86
132
|
See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_medium=listing&utm_campaign=javascript-grid-npm) for more info.
|
|
87
133
|
|
|
88
|
-
|
|
134
|
+
© Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
|