Skip to content

Commit d9d14c0

Browse files
Zhuk, AlexanderZhuk, Alexander
Zhuk, Alexander
authored and
Zhuk, Alexander
committed
multiple grids initial example
1 parent d69a10a commit d9d14c0

File tree

5 files changed

+278
-28
lines changed

5 files changed

+278
-28
lines changed

‎demo/bootstrap/index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,21 @@
2828
</div>
2929
</nav>
3030
<div class="container">
31-
<div>
31+
<div class="margin-bottom-basic">
3232
<h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
3333
Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
3434
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
3535
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
3636
</div>
37+
<h4>Additional Demos</h4>
38+
<ul>
39+
<li>
40+
<a href="../100k/" class="margin-bottom-basic" target="_blank">100k rows</a>
41+
</li>
42+
<li>
43+
<a href="multiple.html" target="_blank">Multiple grids on page</a>
44+
</li>
45+
</ul>
3746
<hr>
3847
<div class="row">
3948
<div>

‎demo/bootstrap/js/multipleApp.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
2+
.controller('myAppController', ['$scope', function ($scope) {
3+
4+
$scope.gridOptions1 = {
5+
data: generateJSON(100)
6+
};
7+
8+
$scope.gridActions1 = {};
9+
10+
$scope.gridOptions2 = {
11+
data: generateJSON(100)
12+
};
13+
14+
$scope.gridActions2 = {};
15+
16+
function generateJSON(length) {
17+
var jsonObj = [],
18+
i,
19+
max,
20+
names = ['Ann', 'Ben', 'Patrick', 'Steve', 'Fillip', 'Bob'],
21+
item;
22+
for (i = 0, max = length; i < max; i++) {
23+
24+
item = {};
25+
item.id = i;
26+
item.name = names[Math.round(Math.random() * (names.length - 1))];
27+
item.phone = '+375-29-' + Math.round(Math.random() * 1000000);
28+
item.date = Math.round(Math.random() * 1000000000000);
29+
jsonObj.push(item);
30+
31+
}
32+
return jsonObj;
33+
}
34+
35+
}])
36+
37+

‎demo/bootstrap/multiple.html‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Angular Data Grid - Multiple Grids</title>
6+
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
10+
</head>
11+
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
12+
<nav class="navbar navbar-inverse">
13+
<div class="container">
14+
<a href="#" class="navbar-brand">Angular Data Grid - Multiple Grids Example</a>
15+
<ul class="nav navbar-nav navbar-right">
16+
<li><a href="../bootstrap/">Back to main demo</a></li>
17+
</ul>
18+
</div>
19+
</nav>
20+
<div class="container">
21+
<div>
22+
<h3>Angular Data Grid - Multiple Grids Example</h3>
23+
Do not forget to assign <code>id</code> attribute for each grid instance on a page to make them work simultaneously. Otherwise grids will share sorting and filtering actions.<br>
24+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
25+
</div>
26+
<hr>
27+
<div class="row">
28+
<div class="col-md-12">
29+
<h2>First Grid</h2>
30+
31+
<div class="row">
32+
<div class="col-md-4">
33+
<div class="form-group">
34+
<label for="orderIdFilter">Search by User Name</label>
35+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
36+
placeholder="Enter User Name"
37+
ng-change="gridActions1.filter()"
38+
ng-model="name"
39+
filter-by="name"
40+
filter-type="text">
41+
</div>
42+
</div>
43+
</div>
44+
<div grid-data id='grid1' grid-options="gridOptions1" grid-actions="gridActions1">
45+
<div class="row">
46+
<div class="col-md-12 text-right">
47+
<form class="form-inline pull-right margin-bottom-basic">
48+
<div class="form-group">
49+
<grid-pagination max-size="5"
50+
boundary-links="true"
51+
class="pagination-sm"
52+
total-items="paginationOptions.totalItems"
53+
ng-model="paginationOptions.currentPage"
54+
ng-change="reloadGrid()"
55+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
56+
</div>
57+
<div class="form-group items-per-page">
58+
<label for="itemsOnPageSelect1">Items per page:</label>
59+
<select id="itemsOnPageSelect1" class="form-control input-sm"
60+
ng-init="paginationOptions.itemsPerPage = '10'"
61+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
62+
<option>10</option>
63+
<option>25</option>
64+
<option>50</option>
65+
<option>75</option>
66+
</select>
67+
</div>
68+
</form>
69+
</div>
70+
</div>
71+
<table class="table table-bordered table-striped">
72+
<thead>
73+
<tr>
74+
<th sortable="id" class="sortable">
75+
User Id
76+
</th>
77+
78+
<th sortable='name' class="sortable">
79+
Name
80+
</th>
81+
<th sortable='phone' class="sortable">
82+
Phone
83+
</th>
84+
<th sortable="date" class="sortable">
85+
Date Of Birth
86+
</th>
87+
</tr>
88+
</thead>
89+
<tbody>
90+
<tr grid-item>
91+
<td width="30%" ng-bind="item.id"></td>
92+
<td ng-bind="item.name"></td>
93+
<td ng-bind="item.phone"></td>
94+
<td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
95+
</tr>
96+
</tbody>
97+
</table>
98+
<form class="form-inline pull-right margin-bottom-basic">
99+
<div class="form-group">
100+
<grid-pagination max-size="5"
101+
boundary-links="true"
102+
class="pagination-sm"
103+
total-items="paginationOptions.totalItems"
104+
ng-model="paginationOptions.currentPage"
105+
ng-change="reloadGrid()"
106+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
107+
</div>
108+
<div class="form-group items-per-page">
109+
<label for="itemsOnPageSelect2">Items per page:</label>
110+
<select id="itemsOnPageSelect2" class="form-control input-sm"
111+
ng-init="paginationOptions.itemsPerPage = '10'"
112+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
113+
<option>10</option>
114+
<option>25</option>
115+
<option>50</option>
116+
<option>75</option>
117+
</select>
118+
</div>
119+
</form>
120+
</div>
121+
</div>
122+
</div>
123+
<div class="row">
124+
<div class="col-md-12">
125+
<h2>Second Grid</h2>
126+
<div class="row">
127+
<div class="col-md-4">
128+
<div class="form-group">
129+
<label>Search by User Name</label>
130+
<input type="text" class="form-control order-search-box"
131+
placeholder="Enter User Name"
132+
ng-change="gridActions2.filter()"
133+
ng-model="name"
134+
filter-by="name"
135+
filter-type="text">
136+
</div>
137+
</div>
138+
</div>
139+
<div grid-data id="grid2" grid-options="gridOptions2" grid-actions="gridActions2">
140+
<div class="row">
141+
<div class="col-md-12 text-right">
142+
<form class="form-inline pull-right margin-bottom-basic">
143+
<div class="form-group">
144+
<grid-pagination max-size="5"
145+
boundary-links="true"
146+
class="pagination-sm"
147+
total-items="paginationOptions.totalItems"
148+
ng-model="paginationOptions.currentPage"
149+
ng-change="reloadGrid()"
150+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
151+
</div>
152+
<div class="form-group items-per-page">
153+
<label>Items per page:</label>
154+
<select class="form-control input-sm"
155+
ng-init="paginationOptions.itemsPerPage = '10'"
156+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
157+
<option>10</option>
158+
<option>25</option>
159+
<option>50</option>
160+
<option>75</option>
161+
</select>
162+
</div>
163+
</form>
164+
</div>
165+
</div>
166+
<table class="table table-bordered table-striped">
167+
<thead>
168+
<tr>
169+
<th sortable="id" class="sortable">
170+
User Id
171+
</th>
172+
173+
<th sortable='name' class="sortable">
174+
Name
175+
</th>
176+
<th sortable='phone' class="sortable">
177+
Phone
178+
</th>
179+
<th sortable="date" class="sortable">
180+
Date Of Birth
181+
</th>
182+
</tr>
183+
</thead>
184+
<tbody>
185+
<tr grid-item>
186+
<td width="30%" ng-bind="item.id"></td>
187+
<td ng-bind="item.name"></td>
188+
<td ng-bind="item.phone"></td>
189+
<td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
190+
</tr>
191+
</tbody>
192+
</table>
193+
<form class="form-inline pull-right margin-bottom-basic">
194+
<div class="form-group">
195+
<grid-pagination max-size="5"
196+
boundary-links="true"
197+
class="pagination-sm"
198+
total-items="paginationOptions.totalItems"
199+
ng-model="paginationOptions.currentPage"
200+
ng-change="reloadGrid()"
201+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
202+
</div>
203+
<div class="form-group items-per-page">
204+
<label for="itemsOnPageSelect22">Items per page:</label>
205+
<select id="itemsOnPageSelect22" class="form-control input-sm"
206+
ng-init="paginationOptions.itemsPerPage = '10'"
207+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
208+
<option>10</option>
209+
<option>25</option>
210+
<option>50</option>
211+
<option>75</option>
212+
</select>
213+
</div>
214+
</form>
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
</body>
220+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
221+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
222+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
223+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
224+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
225+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
226+
<script src="../../dist/pagination.min.js"></script>
227+
<script src="../../dist/dataGrid.min.js"></script>
228+
<script src="js/multipleApp.js"></script>
229+
230+
</html>

‎demo/bootstrap/test.html‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
<meta http-equiv="refresh" content="2;url=demo/bootstrap/" />
77
</head>
88
<body>
9-
9+
Redirect...
1010
</body>
1111
</html>

0 commit comments

Comments
 (0)