// 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={}))