angular-gantt

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="canonical" href="https://www.angular-gantt.com/configuration/api/"> <link rel="shortcut icon" href="../../img/favicon.ico"> <title>API - angular-gantt</title> <link href="../../css/bootstrap-custom.min.css" rel="stylesheet"> <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet"> <link href="../../css/prettify-1.0.css" rel="stylesheet"> <link href="../../css/base.css" rel="stylesheet">   </head> <body> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container">  <div class="navbar-header">  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> Toggle navigation </button>  <a class="navbar-brand" href="../..">angular-gantt</a> </div>  <div class="navbar-collapse collapse">  <ul class="nav navbar-nav"> <li > <a href="../../get-started">Get Started</a> </li> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration </a> <ul class="dropdown-menu"> <li > <a href="../data">Data</a> </li> <li > <a href="../timespans">Timespans</a> </li> <li > <a href="../attributes">Attributes</a> </li> <li > <a href="../plugins">Plugins</a> </li> <li > <a href="../customize">Customize</a> </li> <li class="active"> <a href=".">API</a> </li> <li > <a href="../write_plugin">Write a Plugin</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins </a> <ul class="dropdown-menu"> <li > <a href="../../plugins/labels">Labels</a> </li> <li > <a href="../../plugins/table">Table</a> </li> <li > <a href="../../plugins/tree">Tree</a> </li> <li > <a href="../../plugins/corner">Corner</a> </li> <li > <a href="../../plugins/groups">Groups</a> </li> <li > <a href="../../plugins/dependencies">Dependencies</a> </li> <li > <a href="../../plugins/sortable">Sortable</a> </li> <li > <a href="../../plugins/movable">Movable</a> </li> <li > <a href="../../plugins/drawtask">Draw Task</a> </li> <li > <a href="../../plugins/tooltips">Tooltips</a> </li> <li > <a href="../../plugins/bounds">Bounds</a> </li> <li > <a href="../../plugins/sections">Sections</a> </li> <li > <a href="../../plugins/progress">Progress</a> </li> <li > <a href="../../plugins/overlap">Overlap</a> </li> <li > <a href="../../plugins/resizeSensor">Resize Sensor</a> </li> </ul> </li> <li > <a href="../../sources">Sources</a> </li> <li > <a href="../../contribute">Contribute</a> </li> <li > <a href="../../faq">FAQ</a> </li> <li > <a href="../../about">About</a> </li> </ul>  <ul class="nav navbar-nav navbar-right"> <li > <a rel="next" href="../customize"> Previous </a> </li> <li > <a rel="prev" href="../write_plugin"> Next </a> </li> <li> <a href="https://github.com/angular-gantt/angular-gantt"> GitHub </a> </li> </ul> </div> </div> </div> <div class="container"> <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary"> <ul class="nav bs-sidenav"> <li class="main active"><a href="#api">API</a></li> <li><a href="#events">Events</a></li> <li><a href="#methods">Methods</a></li> </ul> </div></div> <div class="col-md-9" role="main"> <h1 id="api">API</h1> angular-gantt has an API to call methods of the component and listen or raise events. Register the API Object using <code>api</code> attribute. <pre><code><div gantt api="registerApi"></div> </code></pre>  <pre><code>$scope.registerApi = function(api) { api.core.on.ready($scope, function () { // Call API methods and register events. }); } </code></pre> API Object contains features, like <code>api.core</code>, <code>api.data</code>, <code>api.rows</code> or <code>api.columns</code>. Each feature has attached methods, like <code>api.data.load(data)</code> or <code>api.core.getDateByPosition(position)</code>. On each feature, <code>on</code> object is used to register listeners, and <code>raise</code> object to fire events manually. <pre><code>// Listen an event called 'eventName' of a feature called 'featureName'. api.featureName.on.eventName($scope, function(data) { // Called when 'eventName' is raised. }); // Raise an event called 'eventName' of a feature called 'featureName'. api.featureName.raise.eventName(data); // Call method called 'methodName' of a feature called 'featureName'. api.featureName.methodName(); </code></pre> <h2 id="events">Events</h2> <h4 id="core">core</h4> <ul> <li> api.core.on.ready(api) Gantt is initialized and ready to load data. </li> <li> api.core.on.rendered(api) Gantt is fully rendered in browser. </li> </ul> <h4 id="data">data</h4> <ul> <li> api.data.on.change(newData, oldData) Data has changed. </li> <li> api.data.on.load(data) DEPRECATED - Use <code>change</code> event instead Data has been loaded. </li> <li> api.data.on.remove(data) DEPRECATED - Use <code>change</code> event instead Data has been removed. </li> <li> api.data.on.clear() DEPRECATED - Use <code>change</code> event instead Data has been cleared. </li> </ul> <h4 id="directives">directives</h4> Directives events are entry points to build <a href="../customize#template-hooks">Template Hooks</a> and <a href="../write_plugin">Plugins</a>. <ul> <li> api.directives.on.new(directiveName, scope, iElement, iAttrs, controller) A directive instance controller will be created. It can be used to register <a href="../customize#dom-event-listener">DOM Event Listener</a> (<code>click</code>, <code>dblclick</code>, ...) on any directive. </li> <li> api.directives.on.controller(directiveName, scope, iElement, iAttrs, controller) A directive instance is in controller phase. </li> <li> api.directives.on.preLink(directiveName, scope, iElement, iAttrs, controller) A directive instance is in preLink phase. </li> <li> api.directives.on.postLink(directiveName, scope, iElement, iAttrs, controller) A directive instance is in postLink phase. </li> <li> api.directives.on.destroy(directiveName, scope, iElement, iAttrs, controller) A directive instance scope has been destroyed. </li> </ul> <h4 id="tasks">tasks</h4> <ul> <li> api.tasks.on.add(task), api.tasks.on.change(task), api.tasks.on.remove(task) A task has been added, changed or removed </li> <li> api.tasks.on.viewChange(task) A task view has been changed and displayed. </li> <li> api.tasks.on.rowChange(task, oldRow), api.tasks.on.beforeRowChange(task, newRow) A task has been (or will be) moved from one row to another. </li> <li> api.tasks.on.viewRowChange(task, oldRow), api.tasks.on.beforeViewRowChange(task, newRow) A task view has been (or will be) moved from one row to another. </li> <li> api.tasks.on.displayed(tasks, filteredTasks, visibleTasks) Tasks have been displayed. </li> <li> api.tasks.on.filter(tasks, filteredTasks, visibleTasks) Tasks have been filtered out. </li> <li> api.tasks.on.clean(taskModel) Model of a task has been cleaned and will be loaded. </li> </ul> <h4 id="timespans">timespans</h4> <ul> <li> api.timespans.on.add(timespan), api.timespans.on.change(timespan), api.timespans.on.remove(timespan) A timespan has been added, changed or removed. </li> <li> api.timespans.on.clean(timespanModel) Model of a timespans has been cleaned and will be loaded. </li> </ul> <h4 id="rows">rows</h4> <ul> <li> api.rows.on.add(row), api.rows.on.change(row), api.rows.on.remove(row) A row has been added, changed or removed. </li> <li> api.rows.on.move(row, oldIndex, newIndex) A row has been moved. </li> <li> api.rows.on.displayed(rows, filteredRows, visibleRows) Rows have been displayed. </li> <li> api.rows.on.filter(rows, filteredRows) Rows have been filtered out. </li> <li> api.rows.on.clean(row) Model of a row has been cleaned and will be loaded. </li> </ul> <h4 id="columns">columns</h4> <ul> <li> api.columns.on.generate(columns, headers) Columns have been generated. </li> <li> api.columns.on.clear() Columns have been cleared. </li> </ul> <h4 id="side">side</h4> <ul> <li> api.side.on.resizeBegin(width), api.side.on.resize(width), api.side.on.resizeEnd(width) Side area is starting to resize, resizing or has stopped resizing. </li> </ul> <h4 id="scroll">scroll</h4> <ul> <li> api.scroll.on.scroll(left, date, direction) The user scrolls to the left or right side of the chart. Use this event to load more data on the fly. </li> </ul> <h2 id="methods">Methods</h2> <h4 id="core_1">core</h4> <ul> <li> api.core.getDateByPosition(position) Retrieves the date from position in gantt. </li> <li> api.core.getPositionByDate(date) Retrieves the position in gantt from date. </li> </ul> <h4 id="data_1">data</h4> <ul> <li> api.data.load(data) DEPRECATED - Use <code>data</code> attribute instead Loads more data to the Gantt. See <a href="../data">Data</a> for more information. </li> <li> api.data.remove(data) DEPRECATED - Use <code>data</code> attribute instead Removes data from the Gantt. It is possible to remove complete rows or specific tasks </li> <li> api.data.clear() DEPRECATED - Use <code>data</code> attribute instead Removes all rows and tasks at once. </li> <li> api.data.get() Get the data model bound to the gantt. </li> </ul> <h4 id="timespans_1">timespans</h4> <ul> <li> api.timespans.load(timespans) Loads timespans to the Gantt. See <a href="../timespans">Timespans</a> for more information. </li> <li> api.timespans.remove(timespans) Removes timespans from the Gantt. </li> <li> api.timespans.clear() Removes all timespans at once. </li> </ul> <h4 id="columns_1">columns</h4> <ul> <li> api.columns.clear() Removes all columns. </li> <li> api.columns.generate() Generates all columns and display them. </li> <li> api.columns.getColumnsWidth() Get the actual width of the columns. </li> <li> api.columns.getColumnsWidthToFit() Get the width of the columns that would fit the gantt available width. </li> <li> api.columns.getDateRange(visibleOnly) Get the column date range. If <code>visibleOnly=true</code> then only the current visible range will be returned. Returns an array of two dates <code>[dateOfFirstColumn, endDateOfLastColumn]</code> or <code>undefined</code> if there are no columns. </li> <li> api.columns.refresh() Refresh columns and current date. It will also apply filters, and may be required if you use <a href="../attributes#filter-task-filter-task-comparator">filter-task</a> or <a href="../attributes##filter-row-filter-row-comparator">filter-row</a> with a function. </li> </ul> <h4 id="side_1">side</h4> <ul> <li> api.side.setWidth(width) Set side area width. If given <code>width</code> is <code>undefined</code>, it will be computed automatically based on content. Calling this function after setting or updating gantt data may lead to unexpected results. Wrap the call in <code>$timeout</code> function if the computed width doesn't seem to use the new data to compute the width. </li> <li> api.side.getWidth() Get side area width. </li> </ul> <h4 id="rows_1">rows</h4> <ul> <li> api.rows.sort() Sort rows based on <code>sort-mode</code> value. </li> <li> api.rows.applySort() Apply the actual sort provided by <code>sort-mode</code> to gantt model data. </li> <li> api.rows.refresh() Refresh rows. It will also apply filters, and may be required if you use <a href="../attributes#filter-task-filter-task-comparator">filter-task</a> or <a href="../attributes##filter-row-filter-row-comparator">filter-row</a> with a function. </li> <li> api.rows.addRowSorter(sorter), api.rows.removeRowSorter(sorter) Register a function that will be called to customize sorting of rows. <pre><code>sorter = function(rows) { return rows.reverse(); } api.rows.addRowSorter(sorter); $scope.$on('$destroy', function() { api.rows.removeRowSorter(sorter); }; </code></pre> </li> <li> api.rows.addRowFilter(filter), api.rows.removeRowFilter(filter) Register a function that will be called to customize filtering of rows. <pre><code>filter = function(rows) { rows.pop(); return rows; } api.rows.addRowFilter(filter); $scope.$on('$destroy', function() { api.rows.removeRowFilter(filter); }; </code></pre> </li> <li> api.rows.setFilterImpl(func) Register a function to use for filtering. The default filtering function is based on AngularJS <a href="https://docs.angularjs.org/api/ng/filter/filter">$filter('filter')</a>. <pre><code>function(sortedRows, filterRow, filterRowComparator) { return $filter('filter')(sortedRows, filterRow, filterRowComparator); }; </code></pre> </li> </ul> <h4 id="timeframes">timeframes</h4> <ul> <li> api.timeframes.registerTimeFrames(timeframes) Register an array of TimeFrame objects. </li> <li> api.timeframes.clearTimeframes() Removes all registered TimeFrame objects. </li> <li> api.timeframes.registerDateFrames(timeframes) Register an array of DateFrame objects. </li> <li> api.timeframes.clearDateFrames() Removes all registered DateFrame objects. </li> <li> api.timeframes.registerTimeFrameMappings(timeframes) Register an array of TimeFrameMapping objects. </li> <li> api.timeframes.clearTimeFrameMappings() Removes all registered TimeFrameMapping objects. </li> </ul> <h4 id="scroll_1">scroll</h4> <ul> <li> api.scroll.to(position) Scrolls to position. </li> <li> api.scroll.toDate(date) Scrolls to date. </li> <li> api.scroll.left(offset) Moves scroll to left by offset. </li> <li> api.scroll.right(offset) Moves scroll to right by offset. </li> </ul> </div> </div> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="../../js/bootstrap-3.0.3.min.js"></script> <script src="../../js/prettify-1.0.min.js"></script> <script src="../../js/base.js"></script> <script src="../../skeletons/plugin.js"></script> </body> </html>