Skip to content

Commit c2d10a4

Browse files
dhiltdhilt
committed
introduce grid demos
1 parent 0f3d0d5 commit c2d10a4

File tree

9 files changed

+64
-25
lines changed

9 files changed

+64
-25
lines changed

‎demo/grid-dnd-sort-2/grid-dnd-sort.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Grid dnd sort</title>
5+
<title>Grid dnd sort (applyLayout)</title>
66
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
77
<script src="./angular-dnd.js"></script>
88
<script src="../../dist/ui-scroll.js"></script>
9-
<script src="../../src/ui-scroll-grid.js"></script>
9+
<script src="../../dist/ui-scroll-grid.js"></script>
1010
<script src="../../dist/ui-scroll-jqlite.js"></script>
1111
<script src="grid-dnd-sort.js"></script>
1212
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
@@ -18,10 +18,10 @@
1818

1919
<a class="back" href="../index.html">browse other examples</a>
2020

21-
<h1 class="page-header page-header-exapmle">Grid sort</h1>
21+
<h1 class="page-header page-header-exapmle">Grid drag and drop sort, applyLayout</h1>
2222

2323
<div class="description">
24-
Here we have an implementation of drag and drop grid columns sorting through the applyLayout method call.</br>
24+
Here is the implementation sample of drag and drop grid columns sorting through the applyLayout method call.</br>
2525
Also this demo demonstrates an option of an integration with some external components.</br>
2626
And here is being used <a href="https://github.com/Tuch/angular-dnd">angular-dnd</a> component to provide
2727
columns drag and drop functionality.

‎demo/grid-dnd-sort/grid-dnd-sort.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,17 @@
1717

1818
<a class="back" href="../index.html">browse other examples</a>
1919

20-
<h1 class="page-header page-header-exapmle">Grid drag and drop sort</h1>
20+
<h1 class="page-header page-header-exapmle">Grid drag and drop sort, moveBefore</h1>
2121

2222
<div class="description">
23-
In this demo <a href="https://github.com/Tuch/angular-dnd">angular-dnd</a> component is being used to provide
24-
columns drag and drop functionality.
25-
23+
<div class="code">
24+
Here two methods are being demonstrated. columnFromPoint() which allows you to get the appropriate ColumnAdapter object by coordinates:
25+
<pre>
26+
target = $scope.adapter.gridAdapter.columnFromPoint(evt.clientX, evt.clientY)</pre>
27+
Another method is moveBefore() which provides an ability to move one column in front of another:
28+
<pre>
29+
column.moveBefore(target)</pre>
30+
</div>
2631
</div>
2732

2833
<table class="grid" ui-scroll-viewport>

‎demo/grid-dnd-sort/grid-dnd-sort.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,28 +34,22 @@ angular.module('application', ['ui.scroll', 'ui.scroll.jqlite', 'ui.scroll.grid'
3434
}];
3535

3636
$scope.dragStart = function (evt) {
37-
let column = $scope.adapter.gridAdapter.columnFromPoint(evt.clientX, evt.clientY);
38-
37+
var column = $scope.adapter.gridAdapter.columnFromPoint(evt.clientX, evt.clientY);
3938
evt.dataTransfer.setData('application/x-data',
4039
$scope.adapter.gridAdapter.columns.findIndex((c) => c.columnId === column.columnId)
4140
);
42-
// evt.dataTransfer.effectAllowed = "move";
43-
// console.log(column.columnId);
4441
}
4542

4643
$scope.dragOver = function (evt) {
4744
evt.preventDefault();
48-
// evt.dataTransfer.dropEffect = "move";
49-
// console.log(column.columnId);
5045
return false;
5146
}
5247

5348
$scope.dragDrop = function (evt) {
54-
let target = $scope.adapter.gridAdapter.columnFromPoint(evt.clientX, evt.clientY);
55-
let column = $scope.adapter.gridAdapter.columns[evt.dataTransfer.getData('application/x-data')];
49+
var target = $scope.adapter.gridAdapter.columnFromPoint(evt.clientX, evt.clientY);
50+
var column = $scope.adapter.gridAdapter.columns[evt.dataTransfer.getData('application/x-data')];
5651
column.moveBefore(target);
57-
console.log(evt.dataTransfer);//.setData('application/x-data', column);
58-
// console.log(column.columnId);
52+
console.log(evt.dataTransfer);
5953
}
6054

6155
}

‎demo/grid-dnd-widths/grid-dnd-widths.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
<meta charset="utf-8">
55
<title>Grid dnd widths</title>
66
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
7-
<script src="../../src/ui-scroll.js"></script>
8-
<script src="../../src/ui-scroll-grid.js"></script>
9-
<script src="../../src/ui-scroll-jqlite.js"></script>
7+
<script src="../../dist/ui-scroll.js"></script>
8+
<script src="../../dist/ui-scroll-grid.js"></script>
9+
<script src="../../dist/ui-scroll-jqlite.js"></script>
1010
<script src="grid-dnd-widths.js"></script>
1111
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
1212
<link rel="stylesheet" type="text/css" href="grid.css"/>
@@ -20,11 +20,12 @@
2020
<h1 class="page-header page-header-exapmle">Grid drag and drop widths</h1>
2121

2222
<div class="description">
23-
To manipulate grid columns widths there is a special method on gridAdapter:
23+
To manipulate grid columns widths .css method on gridAdapter column is available:
2424
<div class="code">
2525
<pre>
2626
$scope.adapter.gridAdapter.columns[0].css('width', '200px');</pre>
2727
</div>
28+
You also can set any css property this way.
2829
</div>
2930

3031
<table class="grid" ui-scroll-viewport>

‎demo/grid-layout-manipulations-2/grid-layout-manipulations-2.html‎ renamed to ‎demo/grid-layout-apply/grid-layout-apply.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Grid layout manipulations 2</title>
5+
<title>Grid layout apply</title>
66
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
77
<script src="../../dist/ui-scroll.js"></script>
88
<script src="../../dist/ui-scroll-grid.js"></script>
99
<script src="../../dist/ui-scroll-jqlite.js"></script>
10-
<script src="grid-layout-manipulations-2.js"></script>
10+
<script src="grid-layout-apply.js"></script>
1111
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
1212
<link rel="stylesheet" href="grid.css" type="text/css"/>
1313
</head>
@@ -17,7 +17,7 @@
1717

1818
<a class="back" href="../index.html">browse other examples</a>
1919

20-
<h1 class="page-header page-header-exapmle">Grid layout manipulations 2</h1>
20+
<h1 class="page-header page-header-exapmle">Grid layout apply</h1>
2121

2222
<br/>
2323
<button ng-click="applyLayout()">Apply layout</button> - should apply bg-colors and a new columns order

‎demo/grid-layout-manipulations-2/grid-layout-manipulations-2.js‎ renamed to ‎demo/grid-layout-apply/grid-layout-apply.js‎

File renamed without changes.

‎demo/grid-layout-manipulations-2/grid.css‎ renamed to ‎demo/grid-layout-apply/grid.css‎

File renamed without changes.

‎demo/grid-layout-manipulations/grid-layout-manipulations.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ <h1 class="page-header page-header-exapmle">Grid layout manipulations</h1>
2323
<p>
2424
Here we have a demo on grid layout manipulations.
2525
The layout can be updated out of the components core, saved and applied.
26+
To apply some layout you may call applyLayout method on gridAdapter:
27+
<div class="code">
28+
<pre>
29+
$scope.adapter.gridAdapter.applyLayout(layout)</pre>
30+
The "layout" variable must have an appropriate format which exactly matches the format of getLayout() method call result.
31+
</div>
32+
<pre>
33+
layout = $scope.adapter.gridAdapter.getLayout()</pre>
34+
Note that saving via cookie does not work when you run this demo locally.
2635
</p>
2736
</div>
2837

‎demo/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,36 @@ <h1 class="page-header">Scroller Examples</h1>
131131
</li>
132132
</ul>
133133

134+
<div class="more-wrap"></div>
135+
136+
<ul class="example-list">
137+
<li>
138+
<a href="grid-layout-apply/grid-layout-apply.html">
139+
Grid layout apply
140+
</a>
141+
</li>
142+
<li>
143+
<a href="grid-layout-manipulations/grid-layout-manipulations.html">
144+
Grid layout manipulations
145+
</a>
146+
</li>
147+
<li>
148+
<a href="grid-dnd-sort/grid-dnd-sort.html">
149+
Grid drag and drop sort, moveBefore
150+
</a>
151+
</li>
152+
<li>
153+
<a href="grid-dnd-sort-2/grid-dnd-sort.html">
154+
Grid drag and drop sort, applyLayout
155+
</a>
156+
</li>
157+
<li>
158+
<a href="grid-dnd-widths/grid-dnd-widths.html">
159+
Grid drag and drop widths manipulation
160+
</a>
161+
</li>
162+
</ul>
163+
134164
<div class="more-wrap">
135165
<a href="https://github.com/angular-ui/ui-scroll/">read more...</a>
136166
</div>

0 commit comments

Comments
 (0)