// declare app module
var app = angular.module('app', ['wj']);
// controller
app.controller('appCtrl', function ($scope, $http, $interval) {
// initialize detail visibility mode
$scope.detailMode = wijmo.grid.detail.DetailVisibilityMode.ExpandSingle;
// initialize detail row FlexGrid with Northwind data, DetailProvider version
// this is used to show how to use the FlexGridDetailProvider without a directive
$scope.initDetailProvider = function (s, e) {
var dp = new wijmo.grid.detail.FlexGridDetailProvider(s);
dp.maxHeight = 350;
// create detail cells for a given row
dp.createDetailCell = function (row) {
var cell = document.createElement('div');
s.hostElement.appendChild(cell);
var detailGrid = new wijmo.grid.FlexGrid(cell, {
headersVisibility: wijmo.grid.HeadersVisibility.Column,
autoGenerateColumns: false,
itemsSource: $scope.getProducts(row.dataItem.CategoryID),
columns: [
{ header: 'ID', binding: 'ProductID'},
{ header: 'Name', binding: 'ProductName'},
{ header: 'Qty/Unit', binding: 'QuantityPerUnit'},
{ header: 'Unit Price', binding: 'UnitPrice' },
{ header: 'Discontinued', binding: 'Discontinued'}
]
});
cell.parentElement.removeChild(cell);
return cell;
};
// remove details from items with odd CategoryID
dp.rowHasDetail = function (row) {
return true;
};
}
// ** get NorthWind data to demonstrate
// get products for a given category
var products = {};
$scope.getProducts = function (categoryID) {
var view = products[categoryID];
if (!view) {
view = new wijmo.collections.CollectionView($scope.products.sourceCollection);
view.filter = function (item) {
return item.CategoryID == categoryID;
}
products[categoryID] = view;
}
return view;
}
// get categories and products from server
$scope.categories = new wijmo.collections.CollectionView();
getData($scope.categories, 'Categories');
$scope.products = new wijmo.collections.CollectionView();
getData($scope.products, 'Products');
// function to fill a CollectionView with data from an OData source
function getData(view, url) {
// build request url
var serviceBase = 'http://services.odata.org/Northwind/Northwind.svc/';
url = serviceBase + url;
url += (url.indexOf('?') < 0) ? '?' : '&' + '$format=json';
// submit request
$http.get(url)
.success(function (data, status, headers, config) {
// handle this batch
var items = data.value;
for (var i = 0; i < items.length; i++) {
view.sourceCollection.push(items[i]);
}
// and go fetch more...
var next = data['odata.nextLink'];
if (next) {
getData(view, next);
}
// update scope
if (!$scope.$$phase) {
$scope.$apply();
}
});
}
});
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Detail Row</title>
<!-- Angular/Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="wijmo.grid.detail.min.js"></script>
<link href="http://cdn.wijmo.com/5.20152.70/styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/5.20152.70/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>
<!-- Wijmo custom theme (optional, include the theme you like) -->
<link href="http://cdn.wijmo.com/5.20152.70/styles/themes/wijmo.theme.minimal.min.css" rel="stylesheet" type="text/css" />
<script src="app.js"></script>
<link href="stle.css" rel="stylesheet" />
</head>
<body ng-app="app" ng-controller="appCtrl">
<wj-flex-grid
allow-dragging="Both"
items-source="categories">
<wj-flex-grid-column header="Name" binding="CategoryName"></wj-flex-grid-column>
<wj-flex-grid-column header="Description" binding="Description" width="*"></wj-flex-grid-column>
<wj-flex-grid-detail max-height="250" detail-visibility-mode="{{detailMode}}">
<wj-flex-grid
items-source="getProducts($item.CategoryID)"
headers-visibility="Column"
height="300px" >
<wj-flex-grid-column header="ID" binding="ProductID"></wj-flex-grid-column>
<wj-flex-grid-column header="Name" binding="ProductName"></wj-flex-grid-column>
<wj-flex-grid-column header="Quantity" binding="QuantityPerUnit"></wj-flex-grid-column>
</wj-flex-grid>
</wj-flex-grid-detail>
</wj-flex-grid>
</body>
</html>
/* Put your css in here */
/* sample styles */
.wj-flexgrid {
max-height: 500px;
}
.wj-flexgrid .wj-group {
background-color: white;
}
.wj-flexgrid .wj-cell.wj-header {
white-space: nowrap;
}
h1, h2, h3, h4 {
margin-left: -14pt;
}
h3, h4 {
margin-top: 25pt;
padding-top: 6pt;
border-top: 1px solid #c0c0c0
}
/*
*
* Wijmo Library 5.20152.70
* http://wijmo.com/
*
* Copyright(c) GrapeCity, Inc. All rights reserved.
*
* Licensed under the Wijmo Commercial License.
* sales@wijmo.com
* http://wijmo.com/products/wijmo-5/license/
*
*/
var __extends,wijmo;(function(n){(function(t){(function(i){"use strict";(function(n){n[n.Code=0]="Code";n[n.Selection=1]="Selection";n[n.ExpandSingle=2]="ExpandSingle";n[n.ExpandMulti=3]="ExpandMulti"})(i.DetailVisibilityMode||(i.DetailVisibilityMode={}));var r=i.DetailVisibilityMode,u=function(){function u(n){this._mode=2;this._g=n;n.mergeManager=new i.DetailMergeManager(n);n.rowHeaders.hostElement.addEventListener("click",this._hdrClick.bind(this));n.formatItem.addHandler(this._formatItem,this);n.selectionChanged.addHandler(this._selectionChanged,this);n.resizedRow.addHandler(this._resizedRow,this);var t=this;n.loadingRows.addHandler(function(){t.hideDetail()});n.draggingRow.addHandler(function(n,i){t.hideDetail(i.row)})}return Object.defineProperty(u.prototype,"grid",{get:function(){return this._g},enumerable:!0,configurable:!0}),Object.defineProperty(u.prototype,"detailVisibilityMode",{get:function(){return this._mode},set:function(t){t!=this._mode&&(this._mode=n.asEnum(t,r),this.hideDetail(),this._g.invalidate())},enumerable:!0,configurable:!0}),Object.defineProperty(u.prototype,"maxHeight",{get:function(){return this._maxHeight},set:function(t){this._maxHeight=n.asNumber(t,!0)},enumerable:!0,configurable:!0}),Object.defineProperty(u.prototype,"createDetailCell",{get:function(){return this._createDetailCellFn},set:function(t){this._createDetailCellFn=n.asFunction(t,!0)},enumerable:!0,configurable:!0}),Object.defineProperty(u.prototype,"disposeDetailCell",{get:function(){return this._disposeDetailCellFn},set:function(t){this._disposeDetailCellFn=n.asFunction(t,!0)},enumerable:!0,configurable:!0}),Object.defineProperty(u.prototype,"rowHasDetail",{get:function(){return this._rowHasDetailFn},set:function(t){this._rowHasDetailFn=n.asFunction(t,!0)},enumerable:!0,configurable:!0}),u.prototype.isDetailVisible=function(n){var t=this._g.rows;return(n=this._toIndex(n),t[n]instanceof i.DetailRow)?!0:n<t.length-1&&t[n+1]instanceof i.DetailRow?!0:!1},u.prototype.isDetailAvailable=function(n){var t=this._g.rows;return n=this._toIndex(n),this._hasDetail(n)},u.prototype.hideDetail=function(t){var r=this._g.rows,u;if(t==null){for(u=0;u<r.length;u++)r[u]instanceof i.DetailRow&&this.hideDetail(u);return}t=this._toIndex(t);!(r[t]instanceof i.DetailRow)&&t<r.length-1&&r[t+1]instanceof i.DetailRow&&t++;r[t]instanceof i.DetailRow&&(this.disposeDetailCell&&this.disposeDetailCell(r[t]),n.Control.disposeAll(r[t].detail),r.removeAt(t))},u.prototype.showDetail=function(n,t){var u,e,f,o,r;if(typeof t=="undefined"&&(t=!1),u=this._g.rows,n=this._toIndex(n),!this.isDetailVisible(n)&&this._hasDetail(n)&&(e=new i.DetailRow(u[n]),e.detail=this._createDetailCell(u[n]),e.detail&&(u.insert(n+1,e),this._g.scrollIntoView(n,-1))),t){for(f=this._g.selection,o=!1,n>0&&u[n]instanceof i.DetailRow&&n--,r=0;r<u.length-1;r++)r!=n&&u[r+1]instanceof i.DetailRow&&(this.hideDetail(r),r<n&&n--,r<f.row&&(f.row--,f.row2--,o=!0));o&&this._g.select(f,!1)}},u.prototype._toIndex=function(i){return i instanceof t.Row&&(i=i.index),n.asNumber(i,!1,!0)},u.prototype._hdrClick=function(n){var i,t,r;(this._mode==3||this._mode==2)&&(i=this._g,t=i.hitTest(n),t.row>-1&&(r=i.rows[t.row],this.isDetailVisible(t.row)?this.hideDetail(t.row):this.showDetail(t.row,this._mode==2)))},u.prototype._selectionChanged=function(n){if(this._mode==1){var t=this;t._toSel&&clearTimeout(t._toSel);t._toSel=setTimeout(function(){n.selection.row>-1?t.showDetail(n.selection.row,!0):t.hideDetail()},300)}},u.prototype._formatItem=function(t,r){var f=this._g,u=r.panel.rows[r.row],s=this,h,e,o,c;r.panel==f.cells&&u instanceof i.DetailRow&&u.detail!=null&&(n.addClass(r.cell,"wj-detail"),r.cell.textContent="",r.cell.appendChild(u.detail),u.height==null?(h=getComputedStyle(r.cell),e=u.detail.scrollHeight+parseInt(h.paddingTop)+parseInt(h.paddingBottom),s._maxHeight>0&&e>s._maxHeight&&(e=s._maxHeight),u.height=e,u.detail.style.height||(u.detail.style.height="100%"),o=u.detail.querySelector(".wj-flexgrid"),o&&!o.style.height&&(o.style.height="100%")):setTimeout(function(){n.Control.refreshAll(u.detail)}));(this._mode==3||this._mode==2)&&r.panel==f.rowHeaders&&r.col==0&&this._hasDetail(r.row)&&(c=r.row<f.rows.length-1&&f.rows[r.row+1]instanceof i.DetailRow,r.cell.innerHTML=c?'<span class="wj-glyph-minus"><\/span>':'<span class="wj-glyph-plus"><\/span>')},u.prototype._resizedRow=function(t,r){var u=r.panel.rows[r.row];u instanceof i.DetailRow&&u.detail&&n.Control.refreshAll(u.detail)},u.prototype._hasVisibleDetail=function(n){return n instanceof i.DetailRow||n instanceof t.GroupRow||n instanceof t._NewRowTemplate?!1:!0},u.prototype._hasDetail=function(t){return n.isFunction(this._rowHasDetailFn)?this._rowHasDetailFn(this._g.rows[t]):!0},u.prototype._createDetailCell=function(n,t){return this.createDetailCell?this.createDetailCell(n,t):null},u}();i.FlexGridDetailProvider=u})(t.detail||(t.detail={}));var i=t.detail})(n.grid||(n.grid={}));var t=n.grid})(wijmo||(wijmo={}));__extends=this.__extends||function(n,t){function r(){this.constructor=n}for(var i in t)t.hasOwnProperty(i)&&(n[i]=t[i]);r.prototype=t.prototype;n.prototype=new r},function(n){(function(n){(function(t){"use strict";var i=function(i){function r(n){i.call(this,n)}return __extends(r,i),r.prototype.getMergedRange=function(r,u,f){switch(r.cellType){case 1:if(r.rows[u]instanceof t.DetailRow)return new n.CellRange(u,0,u,r.columns.length-1);break;case 3:if(r.rows[u]instanceof t.DetailRow)return new n.CellRange(u-1,f,u,f);if(u<r.rows.length-1&&r.rows[u+1]instanceof t.DetailRow)return new n.CellRange(u,f,u+1,f)}return i.prototype.getMergedRange.call(this,r,u,f)},r}(n.MergeManager);t.DetailMergeManager=i})(n.detail||(n.detail={}));var t=n.detail})(n.grid||(n.grid={}));var t=n.grid}(wijmo||(wijmo={}));__extends=this.__extends||function(n,t){function r(){this.constructor=n}for(var i in t)t.hasOwnProperty(i)&&(n[i]=t[i]);r.prototype=t.prototype;n.prototype=new r},function(n){(function(t){(function(t){"use strict";var i=function(n){function t(){n.call(this);this.isReadOnly=!0}return __extends(t,n),Object.defineProperty(t.prototype,"detail",{get:function(){return this._detail},set:function(n){this._detail=n},enumerable:!0,configurable:!0}),t}(n.grid.Row);t.DetailRow=i})(t.detail||(t.detail={}));var i=t.detail})(n.grid||(n.grid={}));var t=n.grid}(wijmo||(wijmo={}))