Getting Started

27 Nov 201717 minutes to read

Before we start with the Kanban, please refer this page for general information regarding integrating Syncfusion widget’s.

Adding Javascript and CSS reference

To render the Kanban control, the following list of external dependencies are needed.

Refer to the internal dependencies in the following table.

Files Description/Usage
ej.core.min.js It is referred always before using all the JS controls.
ej.data.min.js Used to handle data operation and is used while binding data to the JS controls.
ej.touch.min.js It is referred when using touch functionalities in Kanban.
ej.draggable.min.js It is referred when using drag and drop in Kanban.
ej.kanban.min.js The Kanban’s main file.
ej.globalize.min.js It is referred when using localization in Kanban.
ej.scroller.min.js It is referred when scrolling is used in the Kanban.
ej.waitingpopup.min.js It is referred when waiting popup used.
ej.dropdownlist.min.js These files are used while enable the Editing feature in the Kanban.
ej.dialog.min.js
ej.button.min.js
ej.datepicker.min.js
ej.datetimepicker.min.js
ej.editor.min.js
ej.toolbar.min.js These files are used while enable the Filtering feature in the Kanban.
ej.menu.min.js These files are used while enable the context menu feature in the Kanban.
ej.checkbox.min.js
ej.rte.min.js These files are used while using the cell edit type as RTE in the Kanban.

NOTE

Kanban uses one or more script files, therefore refer the ej.web.all.min.js (which encapsulates all the ej controls and frameworks in a single file) in the application instead of referring all the above specified internal dependencies.

To get the real appearance of the Kanban, the dependent CSS file ej.web.all.min.css (which includes styles of all the widgets) should also needs to be referred.

Create a Kanban

  • Open the command prompt in the folder ember-app or the folder in which the application is created.

  • Use the command ember generate route kanban/default to create template default.hbs file in templates folder and router default.js file in routes folder. It also add the routing content in router.js.

  • Use below code in default.hbs in templates folder to render the Kanban.

  • HTML
    • <div class="e-control">
	
	{{ej-kanban id="Kanban" e-columns=model.columns }}
    
</div>
    • Use the below code in default.js in routes folder to bind the model to the Kanban.
  • HTML
    • import Ember from 'ember';

export default Ember.Route.extend({
     model() {
        return {
            columns: [
                { headerText: "Backlog"},
                { headerText: "In Progress" },
                { headerText: "Done"}
            ],
        }
    }
});

    Running the application

    • To run the application, execute below command.
  • JAVASCRIPT
    • ember serve
    • Browse to http://localhost:4200 to see the application. And navigate to Kanban sample. The component is rendered as like the below screenshot. You can make changes in the code found under app folder and the browser should auto-refresh itself while you save files.

    Data Binding

    Data binding in the Kanban is achieved by using the ej.DataManager that supports both RESTful JSON data services binding and local JSON array binding. To set the data source to Kanban, the dataSource property is assigned with the instance of the ej.DataManger.

  • HTML
    • <div class="e-control">
    
	{{ej-kanban id="Kanban" e-dataSource=model.dataSource e-columns=model.columns }}
    
</div>
  • HTML
    • import Ember from 'ember';

export default Ember.Route.extend({
     model() {
		  var kanbanData = [
                 { Id: 1, Status: "Open", Summary: "Analyze the new requirements gathered from the customer.", Type: "Story", Priority: "Low", Tags: "Analyze,Customer", Estimate: 3.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/1.png", RankId: 1 },
				 { Id: 2, Status: "InProgress", Summary: "Improve application performance", Type: "Improvement", Priority: "Normal", Tags: "Improvement", Estimate: 6, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/2.png", RankId: 1 },
				 { Id: 3, Status: "Open", Summary: "Arrange a web meeting with the customer to get new requirements.", Type: "Others", Priority: "Critical", Tags: "Meeting", Estimate: 5.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 4, Status: "InProgress", Summary: "Fix the issues reported in the IE browser.", Type: "Bug", Priority: "Release Breaker", Tags: "IE", Estimate: 2.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 5, Status: "Testing", Summary: "Fix the issues reported by the customer.", Type: "Bug", Priority: "Low", Tags: "Customer", Estimate: "3.5", Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/5.png", RankId: 1 },
				 { Id: 6, Status: "Close", Summary: "Arrange a web meeting with the customer to get the login page requirements.", Type: "Others", Priority: "Low", Tags: "Meeting", Estimate: 2, Assignee: "Janet", ImageUrl: "/images/kanban/6.png", RankId: 1 },
				 { Id: 7, Status: "Validate", Summary: "Validate new requirements", Type: "Improvement", Priority: "Low", Tags: "Validation", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/7.png", RankId: 1 },
				 { Id: 8, Status: "Close", Summary: "Login page validation", Type: "Story", Priority: "Release Breaker", Tags: "Validation,Fix", Estimate: 2.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/8.png", RankId: 2 },
				 { Id: 9, Status: "Testing", Summary: "Fix the issues reported in Safari browser.", Type: "Bug", Priority: "Release Breaker", Tags: "Fix,Safari", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/1.png", RankId: 2 },
				 { Id: 10, Status: "Close", Summary: "Test the application in the IE browser.", Type: "Story", Priority: "Low", Tags: "Testing,IE", Estimate: 5.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/4.png", RankId: 3 }
		      ];
        return {
			dataSource: kanbanData,
            columns: [
                { headerText: "Backlog"},
                { headerText: "In Progress" },
                { headerText: "Done"}
            ],
        }
    }
});

    NOTE

    ODataAdaptor is the default adaptor used within DataManager. While binding to other web services, proper data adaptor needs to be set for adaptor option of DataManager.

    Mapping Values

    In order to display cards in Kanban control, you need to map the database fields to Kanban cards and columns. The required mapping field are listed as follows

    • keyField - Map the column name to use as key values to columns.
    • columns - Map the corresponding key values of keyField column to each columns
    • fields.content - Map the column name to use as content to cards.
    • fields.primaryKey - Map the column name to use as primary Key.
  • HTML
    • <div class="e-control">
    
	{{ej-kanban id="Kanban" e-dataSource=model.dataSource e-columns=model.columns e-keyField=model.keyField e-fields=model.fields }}
    
</div>
  • HTML
    • import Ember from 'ember';

export default Ember.Route.extend({
     model() {
		  var kanbanData = [
                 { Id: 1, Status: "Open", Summary: "Analyze the new requirements gathered from the customer.", Type: "Story", Priority: "Low", Tags: "Analyze,Customer", Estimate: 3.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/1.png", RankId: 1 },
				 { Id: 2, Status: "InProgress", Summary: "Improve application performance", Type: "Improvement", Priority: "Normal", Tags: "Improvement", Estimate: 6, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/2.png", RankId: 1 },
				 { Id: 3, Status: "Open", Summary: "Arrange a web meeting with the customer to get new requirements.", Type: "Others", Priority: "Critical", Tags: "Meeting", Estimate: 5.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 4, Status: "InProgress", Summary: "Fix the issues reported in the IE browser.", Type: "Bug", Priority: "Release Breaker", Tags: "IE", Estimate: 2.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 5, Status: "Testing", Summary: "Fix the issues reported by the customer.", Type: "Bug", Priority: "Low", Tags: "Customer", Estimate: "3.5", Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/5.png", RankId: 1 },
				 { Id: 6, Status: "Close", Summary: "Arrange a web meeting with the customer to get the login page requirements.", Type: "Others", Priority: "Low", Tags: "Meeting", Estimate: 2, Assignee: "Janet", ImageUrl: "/images/kanban/6.png", RankId: 1 },
				 { Id: 7, Status: "Validate", Summary: "Validate new requirements", Type: "Improvement", Priority: "Low", Tags: "Validation", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/7.png", RankId: 1 },
				 { Id: 8, Status: "Close", Summary: "Login page validation", Type: "Story", Priority: "Release Breaker", Tags: "Validation,Fix", Estimate: 2.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/8.png", RankId: 2 },
				 { Id: 9, Status: "Testing", Summary: "Fix the issues reported in Safari browser.", Type: "Bug", Priority: "Release Breaker", Tags: "Fix,Safari", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/1.png", RankId: 2 },
				 { Id: 10, Status: "Close", Summary: "Test the application in the IE browser.", Type: "Story", Priority: "Low", Tags: "Testing,IE", Estimate: 5.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/4.png", RankId: 3 }
		      ];
        return {
			dataSource: kanbanData,
            columns: [
                { headerText: "Backlog", key: "Open"},
                { headerText: "In Progress", key: "InProgress"},
                { headerText: "Done", key: "Close"}
            ],
			keyField: "Status",
			fields: {
				content: "Summary",
				primaryKey: "Id"
			}
        }
    }
});

    NOTE

    fields.primaryKey field is mandatory for “Drag and Drop” ,”Selection” and “Editing” Features.

    Enable Swimlane

    Swimlane can be enabled by mapping the fields.swimlaneKey to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values.

  • HTML
    • <div class="e-control">
    
	{{ej-kanban id="Kanban" e-dataSource=model.dataSource e-columns=model.columns e-keyField=model.keyField e-fields=model.fields }}
    
</div>
  • HTML
    • import Ember from 'ember';

export default Ember.Route.extend({
     model() {
		  var kanbanData = [
                 { Id: 1, Status: "Open", Summary: "Analyze the new requirements gathered from the customer.", Type: "Story", Priority: "Low", Tags: "Analyze,Customer", Estimate: 3.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/1.png", RankId: 1 },
				 { Id: 2, Status: "InProgress", Summary: "Improve application performance", Type: "Improvement", Priority: "Normal", Tags: "Improvement", Estimate: 6, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/2.png", RankId: 1 },
				 { Id: 3, Status: "Open", Summary: "Arrange a web meeting with the customer to get new requirements.", Type: "Others", Priority: "Critical", Tags: "Meeting", Estimate: 5.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 4, Status: "InProgress", Summary: "Fix the issues reported in the IE browser.", Type: "Bug", Priority: "Release Breaker", Tags: "IE", Estimate: 2.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 5, Status: "Testing", Summary: "Fix the issues reported by the customer.", Type: "Bug", Priority: "Low", Tags: "Customer", Estimate: "3.5", Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/5.png", RankId: 1 },
				 { Id: 6, Status: "Close", Summary: "Arrange a web meeting with the customer to get the login page requirements.", Type: "Others", Priority: "Low", Tags: "Meeting", Estimate: 2, Assignee: "Janet", ImageUrl: "/images/kanban/6.png", RankId: 1 },
				 { Id: 7, Status: "Validate", Summary: "Validate new requirements", Type: "Improvement", Priority: "Low", Tags: "Validation", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/7.png", RankId: 1 },
				 { Id: 8, Status: "Close", Summary: "Login page validation", Type: "Story", Priority: "Release Breaker", Tags: "Validation,Fix", Estimate: 2.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/8.png", RankId: 2 },
				 { Id: 9, Status: "Testing", Summary: "Fix the issues reported in Safari browser.", Type: "Bug", Priority: "Release Breaker", Tags: "Fix,Safari", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/1.png", RankId: 2 },
				 { Id: 10, Status: "Close", Summary: "Test the application in the IE browser.", Type: "Story", Priority: "Low", Tags: "Testing,IE", Estimate: 5.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/4.png", RankId: 3 }
		      ];
        return {
			dataSource: kanbanData,
            columns: [
                { headerText: "Backlog", key: "Open"},
                { headerText: "In Progress", key: "InProgress"},
                { headerText: "Done", key: "Close"}
            ],
			keyField: "Status",
			fields: {
				content: "Summary",
				primaryKey: "Id",
				swimlaneKey: "Assignee"
			}
        }
    }
});

    Adding Filters

    Filters allows to filter the collection of cards from dataSource which meets the predefined query in the filters collection. To enable filtering, define filterSettings collection with display text and ej.Query.

  • HTML
    • <div class="e-control">
    
	{{ej-kanban id="Kanban" e-dataSource=model.dataSource e-columns=model.columns e-keyField=model.keyField e-fields=model.fields e-filterSettings=model.filterSettings }}
    
</div>
  • HTML
    • import Ember from 'ember';

export default Ember.Route.extend({
     model() {
		  var kanbanData = [
                 { Id: 1, Status: "Open", Summary: "Analyze the new requirements gathered from the customer.", Type: "Story", Priority: "Low", Tags: "Analyze,Customer", Estimate: 3.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/1.png", RankId: 1 },
				 { Id: 2, Status: "InProgress", Summary: "Improve application performance", Type: "Improvement", Priority: "Normal", Tags: "Improvement", Estimate: 6, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/2.png", RankId: 1 },
				 { Id: 3, Status: "Open", Summary: "Arrange a web meeting with the customer to get new requirements.", Type: "Others", Priority: "Critical", Tags: "Meeting", Estimate: 5.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 4, Status: "InProgress", Summary: "Fix the issues reported in the IE browser.", Type: "Bug", Priority: "Release Breaker", Tags: "IE", Estimate: 2.5, Assignee: "Janet", ImageUrl: "/images/kanban/3.png", RankId: 2 },
				 { Id: 5, Status: "Testing", Summary: "Fix the issues reported by the customer.", Type: "Bug", Priority: "Low", Tags: "Customer", Estimate: "3.5", Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/5.png", RankId: 1 },
				 { Id: 6, Status: "Close", Summary: "Arrange a web meeting with the customer to get the login page requirements.", Type: "Others", Priority: "Low", Tags: "Meeting", Estimate: 2, Assignee: "Janet", ImageUrl: "/images/kanban/6.png", RankId: 1 },
				 { Id: 7, Status: "Validate", Summary: "Validate new requirements", Type: "Improvement", Priority: "Low", Tags: "Validation", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/7.png", RankId: 1 },
				 { Id: 8, Status: "Close", Summary: "Login page validation", Type: "Story", Priority: "Release Breaker", Tags: "Validation,Fix", Estimate: 2.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/8.png", RankId: 2 },
				 { Id: 9, Status: "Testing", Summary: "Fix the issues reported in Safari browser.", Type: "Bug", Priority: "Release Breaker", Tags: "Fix,Safari", Estimate: 1.5, Assignee: "Janet", ImageUrl: "/images/kanban/1.png", RankId: 2 },
				 { Id: 10, Status: "Close", Summary: "Test the application in the IE browser.", Type: "Story", Priority: "Low", Tags: "Testing,IE", Estimate: 5.5, Assignee: "Andrew Fuller", ImageUrl: "/images/kanban/4.png", RankId: 3 }
		      ];
        return {
			dataSource: kanbanData,
            columns: [
                { headerText: "Backlog", key: "Open"},
                { headerText: "In Progress", key: "InProgress"},
                { headerText: "Done", key: "Close"}
            ],
			keyField: "Status",
			fields: {
				content: "Summary",
				primaryKey: "Id",
				swimlaneKey: "Assignee"
			},
			filterSettings: [
                { text: "Janet Issues", query: new ej.Query().where("Assignee", "equal", "Janet") },
                { text: "Closed Issues", query: new ej.Query().where("Status", "equal", "Close") }
            ]
        }
    }
});