Skip to content

Commit d69a10a

Browse files
Zhuk, AlexanderZhuk, Alexander
Zhuk, Alexander
authored and
Zhuk, Alexander
committed
ng-include POC
1 parent b5d3b2c commit d69a10a

File tree

3 files changed

+246
-1
lines changed

3 files changed

+246
-1
lines changed

‎demo/100k/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<div class="container">
1515
<a href="#" class="navbar-brand">Angular Data Grid - 100k Example</a>
1616
<ul class="nav navbar-nav navbar-right">
17-
<li><a href="../bootstrap/">Main Demo</a></li>
17+
<li><a href="../bootstrap/">Back to main demo</a></li>
1818
</ul>
1919
</div>
2020
</nav>

‎demo/bootstrap/test.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Angular Data Grid - Bootstrap Design</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>
12+
13+
<div ng-include src="'views/bootstrap.html'"></div>
14+
15+
</body>
16+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
18+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
19+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
20+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
21+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
22+
<script src="../../dist/pagination.min.js"></script>
23+
<script src="../../dist/dataGrid.min.js"></script>
24+
<script src="js/demoApp.js"></script>
25+
26+
</html>

‎demo/bootstrap/views/bootstrap.html‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
<div ng-app="myApp" ng-cloak ng-controller="myAppController">
2+
<nav class="navbar navbar-inverse">
3+
<div class="container">
4+
<a href="#" class="navbar-brand">Angular Data Grid - Bootstrap Design</a>
5+
6+
<div class="navbar-form navbar-right" uib-dropdown>
7+
<button id="single-button" type="button" class="btn btn-info" uib-dropdown-toggle>
8+
Change Theme <span class="caret"></span>
9+
</button>
10+
<ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown">
11+
<li>
12+
<a href="index.html"><strong>Bootstrap Design</strong></a>
13+
</li>
14+
<li>
15+
<a href="../material/">Material Design</a>
16+
</li>
17+
</ul>
18+
</div>
19+
</div>
20+
</nav>
21+
<div class="container">
22+
<div class="margin-bottom-basic">
23+
<h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
24+
Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
25+
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
26+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
27+
</div>
28+
<h4>Additional Demos</h4>
29+
<ul>
30+
<li>
31+
<a href="../100k/" class="margin-bottom-basic">100k rows</a>
32+
</li>
33+
<li>
34+
<a href="../multiple/">Multiple grids on page</a>
35+
</li>
36+
</ul>
37+
<hr>
38+
<div class="row">
39+
<div>
40+
<div class="col-md-4">
41+
<div class="form-group">
42+
<label for="orderIdFilter">Search by Order #</label>
43+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
44+
placeholder="Enter Order #"
45+
ng-change="gridActions.filter()"
46+
ng-model="code"
47+
filter-by="code"
48+
filter-type="text">
49+
</div>
50+
</div>
51+
<div class="col-md-4">
52+
<div class="form-group">
53+
<label for="dateFromFilter">Date From</label>
54+
55+
<div class="input-group">
56+
<input type="text"
57+
id="dateFromFilter"
58+
class="form-control"
59+
uib-datepicker-popup="dd/MM/yyyy"
60+
placeholder="DD/MM/YYYY"
61+
min-date="dateFrom"
62+
max-date="dateTo"
63+
close-text="Close"
64+
ng-model="dateFrom"
65+
show-weeks="true"
66+
is-open="dateFromOpened"
67+
ng-click="dateFromOpened = true"
68+
filter-by="placed"
69+
filter-type="dateFrom"
70+
ng-blur="gridActions.filter()"
71+
ng-focus="gridActions.filter()"
72+
show-weeks="false"
73+
close-text="Close"/>
74+
<span class="input-group-btn">
75+
<label for="dateFromFilter" class="btn btn-default">
76+
<i class="fa fa-calendar"></i></label>
77+
</span>
78+
</div>
79+
</div>
80+
</div>
81+
<div class="col-md-4">
82+
<div class="form-group">
83+
<label for="dateToInput">Date To</label>
84+
85+
<div class="input-group">
86+
<input type="text"
87+
id="dateToInput"
88+
class="form-control"
89+
uib-datepicker-popup="dd/MM/yyyy"
90+
placeholder="DD/MM/YYYY"
91+
min-date="dateFrom"
92+
max-date="dateTo"
93+
close-text="Close"
94+
ng-model="dateTo"
95+
show-weeks="true"
96+
is-open="dateToOpened"
97+
ng-click="dateToOpened = true"
98+
filter-by="placed"
99+
filter-type="dateTo"
100+
ng-blur="gridActions.filter()"
101+
ng-focus="gridActions.filter()"
102+
show-weeks="false"
103+
close-text="Close">
104+
<span class="input-group-btn">
105+
<label for="dateToInput" class="btn btn-default">
106+
<i class="fa fa-calendar"></i></label>
107+
</span>
108+
</div>
109+
</div>
110+
<div ng-show="dateTo || dateFrom" class="buttons-right">
111+
<a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
<hr>
117+
<div class="row">
118+
<div class="col-md-12">
119+
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
120+
<div class="row">
121+
<div class="col-md-3">
122+
<span class="items">{{filtered.length}} items total</span>
123+
</div>
124+
<div class="col-md-9 text-right">
125+
<form class="form-inline pull-right margin-bottom-basic">
126+
<div class="form-group">
127+
<grid-pagination max-size="5"
128+
boundary-links="true"
129+
class="pagination-sm"
130+
total-items="paginationOptions.totalItems"
131+
ng-model="paginationOptions.currentPage"
132+
ng-change="reloadGrid()"
133+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
134+
</div>
135+
<div class="form-group items-per-page">
136+
<label for="itemsOnPageSelect1">Items per page:</label>
137+
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
138+
ng-change="reloadGrid()">
139+
<option>10</option>
140+
<option>25</option>
141+
<option>50</option>
142+
<option>75</option>
143+
</select>
144+
</div>
145+
</form>
146+
</div>
147+
</div>
148+
<table class="table table-bordered table-striped">
149+
<thead>
150+
<tr>
151+
<th sortable="code" class="sortable">
152+
Order #
153+
</th>
154+
<th sortable="placed" class="sortable">
155+
Date Placed
156+
</th>
157+
<th class="st-sort-disable th-dropdown">
158+
<select class="form-control width-15"
159+
filter-by="statusDisplay"
160+
filter-type="select"
161+
ng-model="status"
162+
ng-change="filter()">
163+
<option value="">All Statuses</option>
164+
<option ng-repeat="option in statusOptions track by option.value"
165+
value="{{option.value}}">{{option.text}}
166+
</option>
167+
</select>
168+
</th>
169+
<th sortable='total.value' class="sortable">
170+
Total
171+
</th>
172+
</tr>
173+
</thead>
174+
<tbody>
175+
<tr grid-item>
176+
<td width="30%" ng-bind="item.code"></td>
177+
<td width="30%" ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
178+
<td ng-bind="item.statusDisplay"></td>
179+
<td ng-bind="item.total.formattedValue"></td>
180+
</tr>
181+
</tbody>
182+
</table>
183+
<form class="form-inline pull-right margin-bottom-basic">
184+
<div class="form-group">
185+
<grid-pagination max-size="5"
186+
boundary-links="true"
187+
class="pagination-sm"
188+
total-items="paginationOptions.totalItems"
189+
ng-model="paginationOptions.currentPage"
190+
ng-change="reloadGrid()"
191+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
192+
</div>
193+
<div class="form-group items-per-page">
194+
<label for="itemsOnPageSelect2">Items per page:</label>
195+
<select id="itemsOnPageSelect2" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'"
196+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
197+
<option>10</option>
198+
<option>25</option>
199+
<option>50</option>
200+
<option>75</option>
201+
</select>
202+
</div>
203+
</form>
204+
</div>
205+
</div>
206+
</div>
207+
<hr>
208+
<div>
209+
<button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>
210+
<div ng-show="showCode">
211+
<p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html" data-user="AngularDataGrid" class='codepen'>See the Pen <a
212+
href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a
213+
href='http://codepen.io'>CodePen</a>.</p>
214+
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
215+
</div>
216+
</div>
217+
<hr>
218+
</div>
219+
</div>

0 commit comments

Comments
 (0)