Kanban board component for AngularJS.
- Product page: DlhSoft.com/KanbanLibrary
<ds-kanban-board items="items" groups="groups" states="states" assignable-resources="assignableResources"
on-adding-new-item="initializeNewItem(item)" on-editing-item="editItem(item)"
on-item-state-changed="onItemStateChanged(item, state)">
</ds-kanban-board>
var state1: KanbanState = { name: 'New' },
state2: KanbanState = { name: 'In progress', areNewItemButtonsHidden: true },
state3: KanbanState = { name: 'Done', isCollapsedByDefaultForGroups: true, areNewItemButtonsHidden: true };
var states: KanbanState[] = [state1, state2, state3];
var resource1: KanbanAssignableResource = { name: 'Resource 1', imageUrl: 'Images/Resource1.png' },
resource2: KanbanAssignableResource = { name: 'Resource 2', imageUrl: 'Images/Resource2.png' };
var assignableResources: KanbanAssignableResource[] = [resource1, resource2];
var group1: KanbanGroup = { name: 'Story 1', state: state2, assignedResource: resource1 },
group2: KanbanGroup = { name: 'Story 2', state: state3, assignedResource: resource2 };
var groups: KanbanGroup[] = [group1, group2];
var items: KanbanItem[] = [
{ name: 'Task 1', group: group1, state: state1, assignedResource: resource1 },
{ name: 'Task 2', group: group1, state: state2, assignedResource: resource1 },
{ name: 'Bug 1', group: group1, state: state2, assignedResource: resource1, itemType: KanbanBoard.defaultItemTypes.bug },
{ name: 'Task 3', group: group1, state: state1, assignedResource: resource2 },
{ name: 'Task 4', group: group1, state: state1, assignedResource: resource1 },
{ name: 'Task 5', group: group2, state: state1, assignedResource: resource2 },
{ name: 'Task 6', group: group2, state: state2, assignedResource: resource2 },
{ name: 'Task 7', group: group2, state: state2, assignedResource: resource1 },
{ name: 'Task 8', group: group2, state: state3, assignedResource: resource2 }
];
$scope.states = states;
$scope.groups = groups;
$scope.items = items;
$scope.assignableResources = assignableResources;
$scope.initializeNewItem = (item: KanbanItem): void => {
item.assignedResource = resource1;
console.log('A new item was created.');
};
$scope.editItem = (item: KanbanItem): void => {
console.log('Editing item ' + item.name);
};
$scope.onItemStateChanged = (item: KanbanItem, state: KanbanState): void => {
console.log('State of ' + item.name + ' was changed to: ' + state.name);
};
- Available as: element, attribute (e.g. on
div
), or as comment directive. - Transcludes content: to title displayed in the header area of the board.
- Some accepted arguments:
items
(required): array of items (such as tasks), defined usingItem
type, having these members:name
: string representing the item; may be overriden by the field defined byitemNameField
orgroupNameField
arguments of the directivegroup
: reference to the group (from thegroups
array) indicating the vertical group area that the item should be displayed within (e.g. the story that the task belongs to)state
: reference to the state (from thestates
array) indicating the horizontal state area that the item should be displayed within (e.g. New, In progress, Done)itemType
: reference to the item type (from theitemTypes
array) indicating the type of item (e.g. task, bug, story, feature)assignedResource
: reference to the resource (from theassignableResources
array) indicating the resource that the item is assigned to (e.g. an employee that need to perform work on a task)color
: string indicating a color of the item, overriding the color of the item type (displayed as a left header area for the item rectangle)backgroundColor
: string indicating the background color of the item, overriding the color of the item typeisReadOnly
: Boolean value indicating whether or not this item should be read only
groups
: array of groups (such as stories), defined usingGroup
type; if not set, group headers area is not displayed, and items are all assigned to a default group behind the scenesstates
: array of states, defined usingState
type; defaults to a built-in array containing these states: New, Active, Resolved, Closed.assignableResources
: Array of available resources for item assignments, defined usingAssignableResource
type; if not set, resource assignment area is not displayed for items, and for groups it is replaced by a count of child itemsisReadOnly
: Boolean value indicating whether or not all items should be read onlyonAddingNewItem(item)
: function called when a new item is created and added to a group and stateonEditingItem(item)
,onEditingGroup(group)
: functions called when the end user initiate editing for an item or a grouponItemStateChanged(item, state, previousState)
,onItemGroupChanged(item, group, previousGroup)
: functions called when the end user drags and drops an item to a different state and/or group area.
Kanban.Library/Kanban.Angular.Components
- HTML:
index.html
- CSS:
app.css
- TypeScript:
app-angular.ts
- JavaScript:
app-angular.js
- NuGet:
Install-Package DlhSoft.KanbanLibrary
- Bower:
bower install http://DlhSoft.com/Packages/DlhSoft.KanbanLibrary.zip
- Node:
npm install http://DlhSoft.com/Packages/DlhSoft.KanbanLibrary.tar
This product is provided for free and "as is", so it doesn't include any official support. If you would like to receive full DlhSoft support for it, you can get it by purchasing a product license.