ui-grid.pinning.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. /*!
  2. * ui-grid - v4.4.6 - 2018-04-06
  3. * Copyright (c) 2018 ; License: MIT
  4. */
  5. (function () {
  6. 'use strict';
  7. /**
  8. * @ngdoc overview
  9. * @name ui.grid.pinning
  10. * @description
  11. *
  12. * # ui.grid.pinning
  13. *
  14. * <div class="alert alert-success" role="alert"><strong>Stable</strong> This feature is stable. There should no longer be breaking api changes without a deprecation warning.</div>
  15. *
  16. * This module provides column pinning to the end user via menu options in the column header
  17. *
  18. * <div doc-module-components="ui.grid.pinning"></div>
  19. */
  20. var module = angular.module('ui.grid.pinning', ['ui.grid']);
  21. module.constant('uiGridPinningConstants', {
  22. container: {
  23. LEFT: 'left',
  24. RIGHT: 'right',
  25. NONE: ''
  26. }
  27. });
  28. module.service('uiGridPinningService', ['gridUtil', 'GridRenderContainer', 'i18nService', 'uiGridPinningConstants', function (gridUtil, GridRenderContainer, i18nService, uiGridPinningConstants) {
  29. var service = {
  30. initializeGrid: function (grid) {
  31. service.defaultGridOptions(grid.options);
  32. // Register a column builder to add new menu items for pinning left and right
  33. grid.registerColumnBuilder(service.pinningColumnBuilder);
  34. /**
  35. * @ngdoc object
  36. * @name ui.grid.pinning.api:PublicApi
  37. *
  38. * @description Public Api for pinning feature
  39. */
  40. var publicApi = {
  41. events: {
  42. pinning: {
  43. /**
  44. * @ngdoc event
  45. * @name columnPin
  46. * @eventOf ui.grid.pinning.api:PublicApi
  47. * @description raised when column pin state has changed
  48. * <pre>
  49. * gridApi.pinning.on.columnPinned(scope, function(colDef){})
  50. * </pre>
  51. * @param {object} colDef the column that was changed
  52. * @param {string} container the render container the column is in ('left', 'right', '')
  53. */
  54. columnPinned: function(colDef, container) {
  55. }
  56. }
  57. },
  58. methods: {
  59. pinning: {
  60. /**
  61. * @ngdoc function
  62. * @name pinColumn
  63. * @methodOf ui.grid.pinning.api:PublicApi
  64. * @description pin column left, right, or none
  65. * <pre>
  66. * gridApi.pinning.pinColumn(col, uiGridPinningConstants.container.LEFT)
  67. * </pre>
  68. * @param {gridColumn} col the column being pinned
  69. * @param {string} container one of the recognised types
  70. * from uiGridPinningConstants
  71. */
  72. pinColumn: function(col, container) {
  73. service.pinColumn(grid, col, container);
  74. }
  75. }
  76. }
  77. };
  78. grid.api.registerEventsFromObject(publicApi.events);
  79. grid.api.registerMethodsFromObject(publicApi.methods);
  80. },
  81. defaultGridOptions: function (gridOptions) {
  82. //default option to true unless it was explicitly set to false
  83. /**
  84. * @ngdoc object
  85. * @name ui.grid.pinning.api:GridOptions
  86. *
  87. * @description GridOptions for pinning feature, these are available to be
  88. * set using the ui-grid {@link ui.grid.class:GridOptions gridOptions}
  89. */
  90. /**
  91. * @ngdoc object
  92. * @name enablePinning
  93. * @propertyOf ui.grid.pinning.api:GridOptions
  94. * @description Enable pinning for the entire grid.
  95. * <br/>Defaults to true
  96. */
  97. gridOptions.enablePinning = gridOptions.enablePinning !== false;
  98. /**
  99. * @ngdoc object
  100. * @name hidePinLeft
  101. * @propertyOf ui.grid.pinning.api:GridOptions
  102. * @description Hide Pin Left for the entire grid.
  103. * <br/>Defaults to false
  104. */
  105. gridOptions.hidePinLeft = gridOptions.enablePinning && gridOptions.hidePinLeft;
  106. /**
  107. * @ngdoc object
  108. * @name hidePinRight
  109. * @propertyOf ui.grid.pinning.api:GridOptions
  110. * @description Hide Pin Right pinning for the entire grid.
  111. * <br/>Defaults to false
  112. */
  113. gridOptions.hidePinRight = gridOptions.enablePinning && gridOptions.hidePinRight;
  114. },
  115. pinningColumnBuilder: function (colDef, col, gridOptions) {
  116. //default to true unless gridOptions or colDef is explicitly false
  117. /**
  118. * @ngdoc object
  119. * @name ui.grid.pinning.api:ColumnDef
  120. *
  121. * @description ColumnDef for pinning feature, these are available to be
  122. * set using the ui-grid {@link ui.grid.class:GridOptions.columnDef gridOptions.columnDefs}
  123. */
  124. /**
  125. * @ngdoc object
  126. * @name enablePinning
  127. * @propertyOf ui.grid.pinning.api:ColumnDef
  128. * @description Enable pinning for the individual column.
  129. * <br/>Defaults to true
  130. */
  131. colDef.enablePinning = colDef.enablePinning === undefined ? gridOptions.enablePinning : colDef.enablePinning;
  132. /**
  133. * @ngdoc object
  134. * @name hidePinLeft
  135. * @propertyOf ui.grid.pinning.api:ColumnDef
  136. * @description Hide Pin Left for the individual column.
  137. * <br/>Defaults to false
  138. */
  139. colDef.hidePinLeft = colDef.hidePinLeft === undefined ? gridOptions.hidePinLeft : colDef.hidePinLeft;
  140. /**
  141. * @ngdoc object
  142. * @name hidePinRight
  143. * @propertyOf ui.grid.pinning.api:ColumnDef
  144. * @description Hide Pin Right for the individual column.
  145. * <br/>Defaults to false
  146. */
  147. colDef.hidePinRight = colDef.hidePinRight === undefined ? gridOptions.hidePinRight : colDef.hidePinRight;
  148. /**
  149. * @ngdoc object
  150. * @name pinnedLeft
  151. * @propertyOf ui.grid.pinning.api:ColumnDef
  152. * @description Column is pinned left when grid is rendered
  153. * <br/>Defaults to false
  154. */
  155. /**
  156. * @ngdoc object
  157. * @name pinnedRight
  158. * @propertyOf ui.grid.pinning.api:ColumnDef
  159. * @description Column is pinned right when grid is rendered
  160. * <br/>Defaults to false
  161. */
  162. if (colDef.pinnedLeft) {
  163. col.renderContainer = 'left';
  164. col.grid.createLeftContainer();
  165. }
  166. else if (colDef.pinnedRight) {
  167. col.renderContainer = 'right';
  168. col.grid.createRightContainer();
  169. }
  170. if (!colDef.enablePinning) {
  171. return;
  172. }
  173. var pinColumnLeftAction = {
  174. name: 'ui.grid.pinning.pinLeft',
  175. title: i18nService.get().pinning.pinLeft,
  176. icon: 'ui-grid-icon-left-open',
  177. shown: function () {
  178. return typeof(this.context.col.renderContainer) === 'undefined' || !this.context.col.renderContainer || this.context.col.renderContainer !== 'left';
  179. },
  180. action: function () {
  181. service.pinColumn(this.context.col.grid, this.context.col, uiGridPinningConstants.container.LEFT);
  182. }
  183. };
  184. var pinColumnRightAction = {
  185. name: 'ui.grid.pinning.pinRight',
  186. title: i18nService.get().pinning.pinRight,
  187. icon: 'ui-grid-icon-right-open',
  188. shown: function () {
  189. return typeof(this.context.col.renderContainer) === 'undefined' || !this.context.col.renderContainer || this.context.col.renderContainer !== 'right';
  190. },
  191. action: function () {
  192. service.pinColumn(this.context.col.grid, this.context.col, uiGridPinningConstants.container.RIGHT);
  193. }
  194. };
  195. var removePinAction = {
  196. name: 'ui.grid.pinning.unpin',
  197. title: i18nService.get().pinning.unpin,
  198. icon: 'ui-grid-icon-cancel',
  199. shown: function () {
  200. return typeof(this.context.col.renderContainer) !== 'undefined' && this.context.col.renderContainer !== null && this.context.col.renderContainer !== 'body';
  201. },
  202. action: function () {
  203. service.pinColumn(this.context.col.grid, this.context.col, uiGridPinningConstants.container.NONE);
  204. }
  205. };
  206. //// Skip from menu if hidePinLeft or hidePinRight is true
  207. if (!colDef.hidePinLeft && !gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinLeft')) {
  208. col.menuItems.push(pinColumnLeftAction);
  209. }
  210. if (!colDef.hidePinRight && !gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.pinRight')) {
  211. col.menuItems.push(pinColumnRightAction);
  212. }
  213. if (!gridUtil.arrayContainsObjectWithProperty(col.menuItems, 'name', 'ui.grid.pinning.unpin')) {
  214. col.menuItems.push(removePinAction);
  215. }
  216. },
  217. pinColumn: function(grid, col, container) {
  218. if (container === uiGridPinningConstants.container.NONE) {
  219. col.renderContainer = null;
  220. col.colDef.pinnedLeft = col.colDef.pinnedRight = false;
  221. }
  222. else {
  223. col.renderContainer = container;
  224. if (container === uiGridPinningConstants.container.LEFT) {
  225. grid.createLeftContainer();
  226. }
  227. else if (container === uiGridPinningConstants.container.RIGHT) {
  228. grid.createRightContainer();
  229. }
  230. }
  231. grid.refresh()
  232. .then(function() {
  233. grid.api.pinning.raise.columnPinned( col.colDef, container );
  234. });
  235. }
  236. };
  237. return service;
  238. }]);
  239. module.directive('uiGridPinning', ['gridUtil', 'uiGridPinningService',
  240. function (gridUtil, uiGridPinningService) {
  241. return {
  242. require: 'uiGrid',
  243. scope: false,
  244. compile: function () {
  245. return {
  246. pre: function ($scope, $elm, $attrs, uiGridCtrl) {
  247. uiGridPinningService.initializeGrid(uiGridCtrl.grid);
  248. },
  249. post: function ($scope, $elm, $attrs, uiGridCtrl) {
  250. }
  251. };
  252. }
  253. };
  254. }]);
  255. })();