Skip to content

Commit c540b60

Browse files
craigshoemakercraigshoemaker
committed
Updated home page and optimized master/detail
1 parent 999787f commit c540b60

File tree

7 files changed

+188
-46
lines changed

7 files changed

+188
-46
lines changed

samples/grid/master-detail/infragistics.theme.css renamed to css/infragistics.theme.css

File renamed without changes.

‎images/home-background.jpg‎

161 KB
Loading

‎images/igniteui-logo.png‎

7.62 KB
Loading

‎index.html‎

Lines changed: 168 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,190 @@
1-
<!DOCTYPE html>
2-
<html>
1+
<!DOCTYPE html>
2+
<html data- ng-app="app">
33
<head>
4-
<title>Source and samples for custom AngularJS directives for Ignite UI</title>
4+
<title>Ignite UI directives for AngularJS</title>
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<script src="//modernizr.com/downloads/modernizr-latest.js"></script>
8-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
7+
<link type="text/css" rel="stylesheet" href="//cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" />
8+
<link type="text/css" rel="stylesheet" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.shared.css" />
9+
<link type="text/css" rel="stylesheet" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.grid.css" />
10+
<link type="text/css" rel="stylesheet" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.editors.css" />
11+
<link type="text/css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
12+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
913
<link rel="stylesheet" href="samples/sample.css" />
14+
<script src="//modernizr.com/downloads/modernizr-latest.js"></script>
15+
<style>
16+
.links a, .links button {
17+
font-size: 1.75em;
18+
color:#999;
19+
margin:.75em .75em 0 0;
20+
}
21+
22+
.billboard {
23+
background: url(images/home-background.jpg) no-repeat center center;
24+
-webkit-background-size: cover;
25+
-moz-background-size: cover;
26+
-o-background-size: cover;
27+
background-size: cover;
28+
color:#fff;
29+
background-color: #aa8c68;
30+
border-bottom: 10px solid #d16717;
31+
}
32+
33+
.billboard .row {
34+
margin: 1em;
35+
}
36+
37+
.lead {
38+
margin-top:1em;
39+
}
40+
41+
@media only screen and (min-width:641px){
42+
43+
.lead {
44+
margin-top:0;
45+
}
46+
47+
.billboard {
48+
min-height: 600px;
49+
}
50+
51+
52+
.billboard .lead {
53+
font-size: 1.2em;
54+
text-transform: uppercase;
55+
}
56+
57+
.billboard .row {
58+
margin:0;
59+
margin-top: 4em;
60+
}
61+
62+
.billboard h1 {
63+
font-size: 6em;
64+
margin-bottom:0;
65+
}
66+
67+
.billboard h2 {
68+
font-size: 2.5em;
69+
margin-top: 0;
70+
}
71+
}
72+
</style>
1073
</head>
11-
<body>
12-
<div class="jumbotron">
74+
<body data-ng-controller="indexController">
75+
<!--[if lt IE 8]>
76+
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
77+
<![endif]-->
78+
<div class="billboard">
1379
<div class="container">
1480
<div class="row">
15-
<div class="col-sm-4"><img src="http://infragistics-blogs.github.io/github-assets/logos/igniteui-trans.png" class="img-responsive" /> </div>
16-
<div class="col-sm-1 h1">+</div>
17-
<div class="col-sm-4"><img src="http://infragistics-blogs.github.io/github-assets/logos/angularjs.png" class="img-responsive" /></div>
81+
<div class="col-sm-12"><a href="http://igniteui.com" target="_blank"><img src="images/igniteui-logo.png" /></a></div>
82+
</div>
83+
<div class="row">
84+
<h1>Ignite UI</h1>
85+
<h2>AngularJS Directives</h2>
1886
</div>
19-
<p>Source and samples for custom <a href="http://angularjs.org/">AngularJS</a> directives for <a href="http://igniteui.com">Ignite UI</a>.</p>
2087
</div>
2188
</div>
2289
<div class="container">
23-
<div class="alert alert-info"><strong>Note:</strong> This code is currently in preview status.</div>
24-
<h2>Samples</h2>
90+
<h2>Try it out...</h2>
2591
<div class="row">
26-
<div class="col-sm-2">
27-
<ul>
28-
<li><a href="samples/igGrid.html">igGrid</a></li>
29-
<li><a href="samples/grid/master-detail/index.html">igGrid: Master Detail</a></li>
30-
<li><a href="samples/igHierarchicalGrid.html">igHierarchicalGrid</a></li>
31-
<li><a href="samples/igGrid-controller.html">igGrid: Controller options</a></li>
32-
<li><a href="samples/igCombo.html">igCombo</a></li>
33-
<li><a href="samples/igDataChart.html">igDataChart</a></li>
34-
<li><a href="samples/igDialog.html">igDialog</a></li>
35-
<li><a href="samples/igEditors.html">igEditors</a></li>
36-
</ul>
92+
<div class="col-sm-8">
93+
<ig-grid id="employees-grid"
94+
data-source="employees"
95+
primary-key="ProductID"
96+
auto-generate-columns="false">
97+
<columns>
98+
<column key="EmployeeID" header-text="ID" data-type="number"></column>
99+
<column key="LastName" header-text="Last Name" data-type="string"></column>
100+
<column key="FirstName" header-text="First Name" data-type="string"></column>
101+
<column key="Title" header-text="Title" data-type="string"></column>
102+
</columns>
103+
</ig-grid>
104+
<div class="hidden-xs hidden-sm">
105+
<h4>Code</h4>
106+
<pre>&lt;ig-grid id=&quot;employees-grid&quot;
107+
data-source=&quot;employees&quot;
108+
primary-key=&quot;productID&quot;
109+
auto-generate-columns=&quot;false&quot;&gt;
110+
&lt;columns&gt;
111+
&lt;column key=&quot;employeeID&quot; header-text=&quot;ID&quot; width=&quot;65px&quot; data-type=&quot;number&quot;&gt;&lt;/column&gt;
112+
&lt;column key=&quot;lastName&quot; header-text=&quot;Last Name&quot; width=&quot;250px&quot; data-type=&quot;string&quot;&gt;&lt;/column&gt;
113+
&lt;column key=&quot;firstName&quot; header-text=&quot;First Name&quot; width=&quot;200px&quot; data-type=&quot;string&quot;&gt;&lt;/column&gt;
114+
&lt;column key=&quot;title&quot; header-text=&quot;Title&quot; data-type=&quot;string&quot;&gt;&lt;/column&gt;
115+
&lt;/columns&gt;
116+
&lt;/ig-grid&gt;</pre>
117+
<p>Ignite UI controls are instantiated using AngularJS directives. This example uses markup, but
118+
you have the ability to use <a href="samples/igGrid-controller.html">controller options</a> as well.</p>
119+
</div>
37120
</div>
38-
<div class="col-sm-2">
39-
<ul>
40-
<li><a href="samples/igHtmlEditor.html">igHtmlEditor</a></li>
41-
<li><a href="samples/igLayoutManager.html">igLayoutManager</a></li>
42-
<li><a href="samples/igTileManager.html">igTileManager</a></li>
43-
<li><a href="samples/igMap.html">igMap</a></li>
44-
<li><a href="samples/igTree.html">igTree</a></li>
45-
<li><a href="samples/igUpload.html">igUpload</a></li>
46-
<li><a href="samples/igVideoPlayer.html">igVideoPlayer</a></li>
121+
<div class="col-sm-4">
122+
<p class="lead">The Ignite UI AngularJS directives offer full
123+
two-way databinding into the controls.</p>
124+
<input type="text" data-ng-model="firstEmployee.LastName" class="form-control" />
125+
<p class="text-muted push-down-xs">This text box is bound to the value of the last name column
126+
of the first record in the grid. Edit the name in the box to see how the changes
127+
are immediately reflected in the grid. This is but a taste as to what's possible
128+
with the AngularJS directives. For full-fledged samples take a look at the
129+
<a href="samples/igGrid.html">basic</a>, <a href="samples/igGrid-controller.html">controller options</a> and <a href="samples/grid/master-detail/index.html">master/detail</a> samples.</p>
130+
</div>
131+
</div>
132+
<hr />
133+
134+
<h2>Samples</h2>
135+
<div class="links">
136+
<div class="btn-group">
137+
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
138+
igGrid <span class="caret"></span>
139+
</button>
140+
<ul class="dropdown-menu" role="menu">
141+
<li><a href="samples/igGrid.html">Basic</a></li>
142+
<li><a href="samples/igGrid-controller.html">Controller Options</a></li>
143+
<li><a href="samples/grid/master-detail/index.html">Master/Detail</a></li>
47144
</ul>
48145
</div>
146+
<a class="btn btn-default" href="samples/igHierarchicalGrid.html">igHierarchicalGrid</a>
147+
<a class="btn btn-default" href="samples/igCombo.html">igCombo</a>
148+
<a class="btn btn-default" href="samples/igDataChart.html">igDataChart</a>
149+
<a class="btn btn-default" href="samples/igDialog.html">igDialog</a>
150+
<a class="btn btn-default" href="samples/igEditors.html">igEditors</a>
151+
<a class="btn btn-default" href="samples/igHtmlEditor.html">igHtmlEditor</a>
152+
<a class="btn btn-default" href="samples/igLayoutManager.html">igLayoutManager</a>
153+
<a class="btn btn-default" href="samples/igTileManager.html">igTileManager</a>
154+
<a class="btn btn-default" href="samples/igMap.html">igMap</a>
155+
<a class="btn btn-default" href="samples/igTree.html">igTree</a>
156+
<a class="btn btn-default" href="samples/igUpload.html">igUpload</a>
157+
<a class="btn btn-default" href="samples/igVideoPlayer.html">igVideoPlayer</a>
49158
</div>
159+
50160
<div class="push-down-md">
51-
<a href="https://github.com/IgniteUI/igniteui-angular" class="btn btn-default btn-primary btn-lg">View on GitHub</a>
161+
<a href="https://github.com/IgniteUI/igniteui-angular" class="btn btn-default btn-primary btn-lg"><i class="fa fa-github"></i> View source on GitHub</a>
52162
</div>
163+
164+
</div>
53165
<footer>
54-
<p>
55-
<a href="https://github.com/IgniteUI/igniteui-angular/issues">Feedback &amp; Questions</a> |
56-
<a href="https://github.com/IgniteUI/igniteui-angular">Clone &amp; Fork</a>
57-
</p>
58-
<p class="small">For more information or to download a trial of Ignite UI, please visit: <a href="http://igniteui.com">http://igniteui.com</a></p>
166+
<div class="container">
167+
<div class="row">
168+
<div class="col-sm-12">
169+
<p><a href="https://github.com/IgniteUI/igniteui-angular/issues">Feedback &amp; Questions</a></p>
170+
<p class="small">For more information or to download a trial of Ignite UI, please visit: <a href="http://igniteui.com">http://igniteui.com</a></p>
171+
</div>
172+
</div>
173+
</div>
59174
</footer>
60-
</div>
175+
176+
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
177+
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
178+
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
179+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
180+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.min.js"></script>
181+
182+
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script>
183+
<script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script>
184+
185+
<script src="src/igniteui-angular.js"></script>
186+
<script>var app = angular.module('app', ['ngRoute','igniteui-directives']);</script>
187+
<script src="samples/js/data/northwind-employees.js"></script>
188+
<script src="indexController.js"></script>
61189
</body>
62190
</html>

‎indexController.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
angular.module('app').controller('indexController',
2+
3+
['$scope', 'northwindEmployees',
4+
function ($scope, northwindEmployees) {
5+
6+
'use strict';
7+
8+
$scope.employees = northwindEmployees.data.slice(0,4);
9+
10+
$scope.firstEmployee = $scope.employees[0];
11+
12+
}]);

‎samples/grid/master-detail/app/controllers/masterDetailController.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,19 @@ app.controller('masterDetailController',
5555
};
5656

5757
$scope.homesGridRowSelectionChanged = function (e, ui) {
58-
58+
5959
var id = ui.row.id;
6060

61-
$scope.homes.forEach(function(home){
62-
if(home.id === id){
61+
for(var i = 0, len = $scope.homes.length; i < len;i++){
62+
if($scope.homes[i].id === id){
6363
$scope.$apply(function () {
64-
$scope.selectedHome = home;
64+
debugger;
65+
$scope.selectedHome = $scope.homes[i];
6566
$scope.message = "'" + $scope.selectedHome.streetAddress + "' is selected";
6667
});
68+
break;
6769
}
68-
});
70+
}
6971
};
7072
// *****************************************
7173

‎samples/grid/master-detail/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.grid.css" rel="stylesheet" />
1010
<link type="text/css" href="//cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.editors.css" rel="stylesheet" />
1111
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" />
12-
<link rel="stylesheet" href="infragistics.theme.css" type="text/css" />
12+
<link rel="stylesheet" href="../../../css/infragistics.theme.css" type="text/css" />
1313
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" />
1414
<style>
1515
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {

0 commit comments

Comments
 (0)