/* define the controller for getting started */
var app = angular.module('app');
app.controller('appGSCtrl', function ($scope, dataSvc) {
var cv = new wijmo.collections.CollectionView(dataSvc.getData(10));
$scope.fieldNames = dataSvc.getNames();
$scope.viewItems = cv.items;
});
/* set default grid height and some shadow */
.sGrid {
background-color: #fff;
box-shadow: 4px 4px 10px 0 rgba(50, 50, 50, 0.75);
height: 300px;
margin-bottom: 12px;
overflow: auto;
}
/* Define the controller for current record management */
var app = angular.module('app');
app.controller('appCRMCtrl', function ($scope, dataSvc) {
var cv = new wijmo.collections.CollectionView(dataSvc.getData(10));
$scope.cvCRM = cv;
$scope.fieldNames = dataSvc.getNames();
// Forbid changing the current record when the 4th one is current.
var stopCurrentIn4th = function (sender, e) {
// When the current record is the 4th record, stop moving.
if (sender.currentPosition === 3) {
e.cancel = true;
}
}
$scope.stopCurrent = function () {
cv.currentChanging.addHandler(stopCurrentIn4th);
};
// Restore the ability to change the current record.
$scope.reset = function () {
cv.currentChanging.removeHandler(stopCurrentIn4th);
};
});
/* Define the controller for sorting. */
var app = angular.module('app');
app.controller('appSortingCtrl', function ($scope, dataSvc) {
// Initialize the CollectionView.
var cv = new wijmo.collections.CollectionView(dataSvc.getData(10));
// Initialize the scope data.
$scope.cvSorting = cv;
$scope.fieldNames = dataSvc.getNames();
// Sorting
$scope.toggleSort = function (fieldName) {
// Get all of the sort descriptions.
var sd = cv.sortDescriptions;
var ascending = true;
// Find whether the field is sorted.
if (sd.length > 0 && sd[0].property === fieldName) {
// If sorting is found, toggle the sort order.
ascending = !sd[0].ascending;
}
// Create a new SortDescription object.
var sdNew = new wijmo.collections.SortDescription(fieldName, ascending);
// Remove any old sort descriptions and add the newly created one.
sd.splice(0, sd.length, sdNew);
};
// Get the sort label.
$scope.getSort = function (propName) {
var sd = cv.sortDescriptions;
if (sd.length > 0 && sd[0].property === propName) {
return sd[0].ascending ? '▲' : '▼';
}
return '';
};
});
<div class="appGroupingCtrl">
<div class="row-fluid well">
<select
class="form-control"
ng-model="selectedGroupOpt"
ng-options="opt for opt in fieldNames">
<option value="" selected="selected">
Please choose the field you want to group by...</option>
</select>
</div>
<div class="sGrid">
<table class="table table-condensed table-bordered">
<thead>
<tr class="active">
<th class="text-center" ng-repeat="fieldName in fieldNames">
{{fieldName}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in groupItems">
<td class="active" ng-show="isGroupItem(item)" colspan="6">
<span ng-style="{
display:'inline-block',
width: (item.level*25) + 'px'}"></span>
<b>{{item.name | globalize}}</b>
({{item.items.length}} items)
</td>
<td class="text-center" colspan="2" ng-show="isGroupItem(item)">
{{avgAmount(item)}}
</td>
<td
class="text-center"
ng-repeat="name in fieldNames"
ng-hide="isGroupItem(item)">
{{item[name] | globalize}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
/* define the controller for grouping */
var app = angular.module('app');
app.controller('appGroupingCtrl', function ($scope, dataSvc) {
// initialize the collectionview
var cv = new wijmo.collections.CollectionView(dataSvc.getData(20));
// initialize the scope data.
$scope.cvGrouping = cv;
$scope.fieldNames = dataSvc.getNames();
$scope.groupItems = cv.items;
$scope.selectedGroupOpt = '';
$scope.isGroupItem = function (item) {
return item instanceof wijmo.collections.CollectionViewGroup;
};
$scope.avgAmount = function (item) {
// it only works when the item is a group item.
if (!$scope.isGroupItem(item)) {
return;
}
// get the average value of group amount values.
var avg = item.getAggregate(wijmo.Aggregate.Avg, 'amount');
return wijmo.Globalize.format(avg);
};
// update the group list
cv.collectionChanged.addHandler(function () {
$scope.groupItems = cv.items;
if (cv.groups && cv.groups.length > 0) {
$scope.groupItems = [];
for (var i = 0; i < cv.groups.length; i++) {
addGroup(cv.groups[i]);
}
}
});
function addGroup(g) {
$scope.groupItems.push(g);
if (g.isBottomLevel) {
for (var i = 0; i < g.items.length; i++) {
$scope.groupItems.push(g.items[i]);
}
}
else {
for (var i = 0; i < g.groups.length; i++) {
addGroup(g.groups[i]);
}
}
}
//apply the group setting
$scope.$watch('selectedGroupOpt', function () {
var gd,
fieldName = $scope.selectedGroupOpt;
gd = cv.groupDescriptions;
if (!fieldName) {
// clear all the group settings.
gd.splice(0, gd.length);
return;
}
if (findGroup(fieldName) >= 0) {
return;
}
if (fieldName === 'amount') {
// when grouping by amount, use ranges instead of specific values
gd.push(new wijmo.collections.PropertyGroupDescription(fieldName, function (item, propName) {
var value = item[propName]; // amount
if (value > 1000) return 'Large Amounts';
if (value > 100) return 'Medium Amounts';
if (value > 0) return 'Small Amounts';
return 'Negative Amounts';
}));
}
else {
// group by specific property values
gd.push(new wijmo.collections.PropertyGroupDescription(fieldName));
}
});
// check whether the group with the specified property name already exists.
function findGroup(propName) {
var gd = cv.groupDescriptions;
for (var i = 0; i < gd.length; i++) {
if (gd[i].propertyName === propName) {
return i;
}
}
return -1;
}
});
/* define the controller for editing */
var app = angular.module('app');
app.controller('appEditingCtrl', function ($scope, dataSvc) {
// initialize the collectionview
var cv = new wijmo.collections.CollectionView(dataSvc.getData(10));
// define the new item value.
cv.newItemCreator = function () {
var item = dataSvc.getData(1)[0];
// aggregate the max value of id in the collection.
item.id = wijmo.getAggregate(wijmo.Aggregate.Max, cv.sourceCollection, 'id') + 1;
return item;
}
// initialize the scope data.
$scope.cvEditing = cv;
$scope.fieldNames = dataSvc.getNames();
$scope.currentItem = cv.currentItem;
$scope.confirmUpdate = function () {
// commit edit or addition
cv.commitEdit();
cv.commitNew();
};
$scope.cancelUpdate = function () {
// cancel editing or adding
cv.cancelEdit();
cv.cancelNew();
};
// Sync the currentItem scope with the CollectionView.
cv.currentChanged.addHandler(function () {
$scope.currentItem = cv.currentItem;
});
});
/* define the controller for paging */
var app = angular.module('app');
app.controller('appPagingCtrl', function ($scope, dataSvc) {
// initialize the collectionview
var cv = new wijmo.collections.CollectionView(dataSvc.getData(55));
// initialize the page size with 10.
cv.pageSize = 10;
// initialize the scope data.
$scope.cvPaging = cv;
$scope.fieldNames = dataSvc.getNames();
});
/* define the controller for tracking changes */
var app = angular.module('app');
app.controller('appTCCtrl', function ($scope, dataSvc) {
// initialize the collectionview
var cv = new wijmo.collections.CollectionView(dataSvc.getData(6));
//track the changes
cv.trackChanges = true;
// initialize the scope data.
$scope.cvTrackingChanges = cv;
});
/* set default grid height and some shadow */
.sGrid {
background-color: #fff;
box-shadow: 4px 4px 10px 0 rgba(50, 50, 50, 0.75);
height: 300px;
margin-bottom: 12px;
overflow: auto;
}
/* set the record grids height and some shadow */
.tcGrid {
background-color: #fff;
box-shadow: 4px 4px 10px 0 rgba(50, 50, 50, 0.75);
height: 100px;
margin-bottom: 12px;
overflow: auto;
}
/* define the controller for tracking changes with extra/custom tracking */
var app = angular.module('app');
app.controller('appTCCtrlX', function ($scope, dataSvc) {
// initialize the collectionview
var cv = new wijmo.collections.CollectionView(dataSvc.getData(6));
//track the changes
cv.trackChanges = true;
// initialize the scope data.
$scope.cvTrackingChanges = cv;
// keep the original state of the current item
var current = cv.currentItem ? JSON.stringify(cv.currentItem) : null;
cv.currentChanged.addHandler(function (s, e) {
current = s.currentItem ? JSON.stringify(s.currentItem) : null;
});
// keep track of the original state of edited items
var original = [];
cv.itemsEdited.collectionChanged.addHandler(function (s, e) {
if (e.action == wijmo.collections.NotifyCollectionChangedAction.Add ||
e.action == wijmo.collections.NotifyCollectionChangedAction.Change) {
// check if we have this item's original data
var index = cv.sourceCollection.indexOf(e.item);
var found = -1;
for (var i = 0; i < original.length && found < 0; i++) {
if (original[i].index == index) {
found = i;
}
}
// if we have the item, check original value
if (found > -1) {
// if the current value is the same as the original, remove
var valueNow = JSON.stringify(e.item);
if (valueNow == original[found].value) {
original.splice(found, 1);
index = cv.itemsEdited.indexOf(e.item);
cv.itemsEdited.splice(index, 1);
}
} else { // if we don't, store it now
found = original.length;
original.push({ index: index, value: current });
}
}
});
});
/* set default grid height and some shadow */
.sGrid {
background-color: #fff;
box-shadow: 4px 4px 10px 0 rgba(50, 50, 50, 0.75);
height: 300px;
margin-bottom: 12px;
overflow: auto;
}
/* set the record grids height and some shadow */
.tcGrid {
background-color: #fff;
box-shadow: 4px 4px 10px 0 rgba(50, 50, 50, 0.75);
height: 100px;
margin-bottom: 12px;
overflow: auto;
}