added row directive

Author: hjalmers

directive/generic-table/generic-table.html

@@ -9,8 +9,8 @@
         </tr>
         </thead>
         <tbody>
-        <tr ng-repeat="row in gtDisplayData | limitTo: displayRows" gt-event ng-class="::gtRowTransition ? 'fade-in animate':''">
-            <td ng-repeat="field in ::gtFields | orderBy:'columnOrder' track by field.objectKey" ng-show=":gtRefresh:gtSettings | getProperty:field.objectKey:'visible'" ng-class="::[(gtFields | getProperty:field.objectKey:'classNames'), (field.objectKey | camelToDash) + '-column']"><span ng-class="::field.click ? 'gt-click-enabled':''" ng-bind-html="::gtFields | gtRender:row:field.objectKey" ng-click="::!field.click || field.click(row)"></span></td>
+        <tr generic-row ng-repeat="row in gtDisplayData | limitTo: displayRows" gt-event ng-class="::gtRowTransition ? 'fade-in animate':''">
+            <td ng-repeat="field in ::gtFields | orderBy:'columnOrder' track by field.objectKey" ng-show=":gtRefresh:gtSettings | getProperty:field.objectKey:'visible'" ng-class="::[(gtFields | getProperty:field.objectKey:'classNames'), (field.objectKey | camelToDash) + '-column']"><span ng-class="::field.click ? 'gt-click-enabled':''" ng-bind-html="::gtFields | gtRender:row:field.objectKey" ng-click=":gtRefresh:!field.click || field.click(row);!field.expand || toggleRow(field.expand,(gtSettings | filter:{'visible':true}:true).length,row,field.objectKey);"></span></td>
         </tr>
         </tbody>
         <tr ng-if="pagination === false"><td class="gt-no-data" colspan="{{:gtRefresh:(gtSettings | filter:{'visible':true}:true).length}}">{{::gtNoDataTxt}}</td></t></tr>

directive/generic-table/generic-table.js

@@ -345,6 +345,37 @@ angular.module('generic.table').directive('genericTable', function() {
 
     };
 
+}).directive('genericRow', function($compile) {
+    return {
+        restrict: 'A',
+        scope:false,
+        link: function(scope, element, attrs, fn) {
+            var isOpen;
+            scope.toggleRow = function(content,columns,row,key){
+                console.log(isOpen,columns);
+                if(!isOpen){
+                    var row = $compile('<tr><td colspan="'+columns+'">'+content(row,key)+'</td></tr>')(scope);
+                    element.after(row);
+                    isOpen = true;
+                } else {
+                    element.next().remove();
+                    isOpen = false;
+                }
+                //isOpen != isOpen;
+                console.log(isOpen);
+            };
+            scope.openRow = function(){
+                var row = '<tr><td colspan="4">Test</td></tr>';
+                element.after(row);
+            };
+            scope.closeRow = function(){
+                element.next().remove();
+            };
+            scope.$on('gt-open-row',function(){
+                console.log('open row');
+            });
+        }
+    };
 }).directive('gtEvent', function() {
     return {
         restrict: 'A',

partial/examples/examples.js

@@ -411,7 +411,8 @@ angular.module('generic.table').controller('DocumentationController',function($s
                 objectKey:'age',
                 classNames:"text-right",
                 render: function(row){return moment().diff(moment.unix(row.birthday),'years')},
-                value: function(row){return moment().diff(moment.unix(row.birthday),'years')}
+                value: function(row){return moment().diff(moment.unix(row.birthday),'years')},
+                expand:function(row){return'<custom-dir>'+ row.age +'</custom-dir>'}
             }
         ],
         data:[]
@@ -444,4 +445,13 @@ angular.module('generic.table').controller('DocumentationController',function($s
     return {
         "getJsonData":getJsonData
     };
-});
+}).directive('customDir', function() {
+    return {
+        replace:true,
+        template:'<div>something</div>',
+        restrict: 'E',
+        link: function(scope, element, attrs, fn) {
+            console.log('custom');
+        }
+    };
+})