Skip to content
Kanban board component for AngularJS
Branch: master
Clone or download
Latest commit f2befd5 Jul 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Kanban.Library Style correction to better support Safari (iPhone) Mar 29, 2017
.gitignore Initial commit Dec 4, 2015
LICENSE Initial commit Dec 4, 2015
README.md Update README.md Jul 5, 2018

README.md

Angular-Kanban

Kanban board component for AngularJS. Kanban board

Run demos

Usage

<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);
};

ds-kanban-board directive

  • 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 using Item type, having these members:
      • name: string representing the item; may be overriden by the field defined by itemNameField or groupNameField arguments of the directive
      • group: reference to the group (from the groups 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 the states 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 the itemTypes array) indicating the type of item (e.g. task, bug, story, feature)
      • assignedResource: reference to the resource (from the assignableResources array) indicating the resource that the item is assigned to (e.g. an employee that needs 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 type
      • isReadOnly: Boolean value indicating whether or not this item should be read only
    • groups: array of groups (such as stories), defined using Group type; if not set, group headers area is not displayed, and items are all assigned to a default group behind the scenes
    • states: array of states, defined using State type; defaults to a built-in array containing these states: New, Active, Resolved, Closed.
    • assignableResources: Array of available resources for item assignments, defined using AssignableResource type; if not set, resource assignment area is not displayed for items, and for groups it is replaced by a count of child items
    • isReadOnly: Boolean value indicating whether or not the component (i.e. all items) should be read only
    • onAddingNewItem(item): function called when a new item is created and added to a group and state
    • onEditingItem(item), onEditingGroup(group): functions called when the end user initiate editing for an item or a group
    • onItemStateChanged(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.

Demo source code

Kanban.Library/Kanban.Angular.Components

  • HTML: index.html
  • CSS: app.css
  • TypeScript: app-angular.ts
  • JavaScript: app-angular.js

Package installation

  • 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
    

Support

This product is provided for free and "as is", so it doesn't include any official support. If needed, however, you may purchase a DlhSoft product license with support.

You can’t perform that action at this time.