Data binding in React Kanban component
29 Aug 202324 minutes to read
The Kanban uses DataManager
, which supports both RESTful data service binding and JavaScript object array binding. The dataSource
property of Kanban can be assigned either with the instance of DataManager
or JavaScript object array collection, as it supports the following two data binding methods:
- Local data
- Remote data
Local data
To bind local JSON data to the Kanban, you can simply assign a JavaScript object array to the dataSource
property. The JSON object dataSource can also be provided as an instance of DataManager
and assigned to the Kanban dataSource
property.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Local Data</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Local Data" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Local Data</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Local Data" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
By default,
DataManager
usesJsonAdaptor
for binding local data.
Remote data
To bind remote data to kanban component, assign service data as an instance of DataManager
to the dataSource
property. To interact with remote data source, provide the endpoint url.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component {
data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
DialogOpen(args) {
args.cancel = true;
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
public data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
private DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Remote Data</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Remote Data" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App() {
let data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
function DialogOpen(args) {
args.cancel = true;
}
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
function App(){
let data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
function DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Remote Data</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Remote Data" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
By default,
DataManager
uses ODataAdaptor for remote data-binding.
OData services
OData
is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component {
data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor,
crossDomain: true
});
DialogOpen(args) {
args.cancel = true;
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
public data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor,
crossDomain: true
});
private DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban OData</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban OData" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App() {
let data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor,
crossDomain: true
});
function DialogOpen(args) {
args.cancel = true;
}
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
function App(){
let data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor,
crossDomain: true
});
function DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban OData</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban OData" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
OData v4 services
The ODataV4 is an improved version of OData protocols, and the DataManager
can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation
. To bind OData v4 service, use the ODataV4Adaptor.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component {
data = new DataManager({
url: 'https://services.odata.org/v4/northwind/northwind.svc/Suppliers',
adaptor: new ODataV4Adaptor
});
DialogOpen(args) {
args.cancel = true;
}
render() {
return <KanbanComponent id="kanban" keyField="ContactTitle" dataSource={this.data} cardSettings={{ contentField: "ContactName", headerField: "SupplierID" }} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="Order Administrator" keyField="Order Administrator"/>
<ColumnDirective headerText="Sales Representative" keyField="Sales Representative"/>
<ColumnDirective headerText="Export Administrator" keyField="Export Administrator"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
public data = new DataManager({
url: 'https://services.odata.org/v4/northwind/northwind.svc/Suppliers',
adaptor: new ODataV4Adaptor
});
private DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
render() {
return <KanbanComponent id="kanban" keyField="ContactTitle" dataSource={this.data} cardSettings={{ contentField: "ContactName", headerField: "SupplierID" }} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="Order Administrator" keyField="Order Administrator" />
<ColumnDirective headerText="Sales Representative" keyField="Sales Representative" />
<ColumnDirective headerText="Export Administrator" keyField="Export Administrator" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban ODataV4</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban ODataV4" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App() {
let data = new DataManager({
url: 'https://services.odata.org/v4/northwind/northwind.svc/Suppliers',
adaptor: new ODataV4Adaptor
});
function DialogOpen(args) {
args.cancel = true;
}
return (<KanbanComponent id="kanban" keyField="ContactTitle" dataSource={data} cardSettings={{ contentField: "ContactName", headerField: "SupplierID" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="Order Administrator" keyField="Order Administrator"/>
<ColumnDirective headerText="Sales Representative" keyField="Sales Representative"/>
<ColumnDirective headerText="Export Administrator" keyField="Export Administrator"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
function App(){
let data = new DataManager({
url: 'https://services.odata.org/v4/northwind/northwind.svc/Suppliers',
adaptor: new ODataV4Adaptor
});
function DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
return(
<KanbanComponent id="kanban" keyField="ContactTitle" dataSource={data} cardSettings={{ contentField: "ContactName", headerField: "SupplierID" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="Order Administrator" keyField="Order Administrator" />
<ColumnDirective headerText="Sales Representative" keyField="Sales Representative" />
<ColumnDirective headerText="Export Administrator" keyField="Export Administrator" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban ODataV4</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban ODataV4" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Web API
You can use WebApiAdaptor to bind kanban with Web API created using OData endpoint.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
public data = new DataManager({
url: '/api/Tasks',
adaptor: new WebApiAdaptor
});
private DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
function App(){
let data = new DataManager({
url: '/api/Tasks',
adaptor: new WebApiAdaptor
});
function DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
Below server-side controller code to get the Kanban data.
[HttpGet]
public object Get()
{
var data = OrdersDetails.GetAllRecords().ToList();
return data;
}
URL adaptor
The CRUD (Create, Read, Update and Delete) actions can be performed easily on Kanban cards using the various adaptors available within the DataManager
. Most preferably, we will be using UrlAdaptor
for performing CRUD actions on Kanban.
The CRUD operation in Kanban can be mapped to server-side controller actions using the properties insertUrl
, removeUrl
, updateUrl
, and crudUrl
.
-
insertUrl
– You can perform a single insertion operation on the server-side. -
updateUrl
– You can update single data on the server-side. -
removeUrl
– You can remove single data on the server-side. -
crudUrl
– You can perform bulk data operation on the server-side.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
public data = new DataManager({
url: 'Home/DataSource',
updateUrl: 'Home/Update',
insertUrl: 'Home/Insert',
removeUrl: 'Home/Delete',
adaptor: new UrlAdaptor(),
crossDomain: true
});
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App(){
let data = new DataManager({
url: 'Home/DataSource',
updateUrl: 'Home/Update',
insertUrl: 'Home/Insert',
removeUrl: 'Home/Delete',
adaptor: new UrlAdaptor(),
crossDomain: true
});
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
The server-side controller code to handle the CRUD operations are as follows.
private NORTHWNDEntities db = new NORTHWNDEntities();
public ActionResult DataSource() {
var DataSource = db.Tasks.ToList();
return Json(DataSource, JsonRequestBehavior.AllowGet);
}
public ActionResult Insert(Params value) {
//Insert card data into the database
return Json(value, JsonRequestBehavior.AllowGet);
}
public ActionResult Update(Params value) {
//Update card data into the database
return Json(value, JsonRequestBehavior.AllowGet);
}
public void Delete(Params value) {
//Delete card data from the database
}
public class Params {
public int Id { get; set; }
public string Status { get; set; }
public string Summary { get; set; }
public string Assignee { get; set; }
}
private NORTHWNDEntities db = new NORTHWNDEntities();
public ActionResult DataSource() {
var DataSource = db.Tasks.ToList();
return Json(DataSource, JsonRequestBehavior.AllowGet);
}
public ActionResult Insert(Params value) {
//Insert card data into the database
return Json(value, JsonRequestBehavior.AllowGet);
}
public ActionResult Update(Params value) {
//Update card data into the database
return Json(value, JsonRequestBehavior.AllowGet);
}
public void Delete(Params value) {
//Delete card data from the database
}
public class Params {
public int Id { get; set; }
public string Status { get; set; }
public string Summary { get; set; }
public string Assignee { get; set; }
}
The
crudUrl
is used to update the bulk data sent to the server-side. Multiple selections andsortBy
asIndex
properties are used forcrudUrl
properties to update the modified bulk data to the server-side.
Custom adaptor
It is possible to create your own custom adaptor by extending the built-in available adaptors. The following example demonstrates the custom adaptor usage and how to add a custom field TaskId
for the cards by overriding the built-in response processing using the processResponse
method of the ODataAdaptor
.
[Class-component]
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';
export class TaskIdAdaptor extends ODataAdaptor {
processResponse() {
let i = 0;
/* calling base class processResponse function */
const original = super.processResponse.apply(this, arguments);
/* adding Task Id */
original.forEach((item) => setValue('Id', 'Task - ' + ++i, item));
return original;
}
}
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';
export class TaskIdAdaptor extends ODataAdaptor {
public processResponse() {
let i = 0;
/* calling base class processResponse function */
const original = super.processResponse.apply(this, arguments);
/* adding Task Id */
original.forEach((item: any) => setValue('Id', 'Task - ' + ++i, item));
return original;
}
}
[Functional-component]
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';
export class TaskIdAdaptor extends ODataAdaptor {
processResponse() {
let i = 0;
/* calling base class processResponse function */
const original = super.processResponse.apply(this, arguments);
/* adding Task Id */
original.forEach((item) => setValue('Id', 'Task - ' + ++i, item));
return original;
}
}
import { setValue } from '@syncfusion/ej2-base';
import { ODataAdaptor } from '@syncfusion/ej2-data';
export class TaskIdAdaptor extends ODataAdaptor {
public processResponse() {
let i = 0;
/* calling base class processResponse function */
const original = super.processResponse.apply(this, arguments);
/* adding Task Id */
original.forEach((item: any) => setValue('Id', 'Task - ' + ++i, item));
return original;
}
}
Sending additional parameters to the server
To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the kanban query
property.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component {
data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
DialogOpen(args) {
args.cancel = true;
}
query = new Query().addParams('ej2kanban', 'true');
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} query={this.query} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
public data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
private DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
private query: Query = new Query().addParams('ej2kanban', 'true');
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} query={this.query} allowDragAndDrop={false} dialogOpen={this.DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Additional Parameter</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Additional Parameter" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App() {
let data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
function DialogOpen(args) {
args.cancel = true;
}
let query = new Query().addParams('ej2kanban', 'true');
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} query={query} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager, ODataAdaptor, Query } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
function App(){
let data = new DataManager({
url: 'https://services.syncfusion.com/react/production/api/Kanban',
adaptor: new ODataAdaptor
});
function DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
let query: Query = new Query().addParams('ej2kanban', 'true');
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} query={query} allowDragAndDrop={false} dialogOpen={DialogOpen.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Additional Parameter</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Additional Parameter" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
The parameters added using the
query
property will be sent along with the data request for every kanban action.
Handling HTTP error
During server interaction from the kanban, some server-side exceptions may occur, and you can acquire those error messages or exception details
in client-side using the actionFailure
event.
The argument passed to the actionFailure
event contains the error details returned from the server.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component {
kanban;
data = new DataManager({
url: 'http://some.com/invalidUrl'
});
render() {
this.onActionFailure = this.onActionFailure.bind(this);
return <KanbanComponent ref={kanban => this.kanban = kanban} id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} actionFailure={this.onActionFailure}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
onActionFailure = (e) => {
const span = document.createElement('span');
if (this.kanban) {
this.kanban.element.parentNode.insertBefore(span, this.kanban.element);
span.style.color = "#FF0000";
span.innerHTML = "Server exception: 404 Not found";
}
};
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs, ActionEventArgs } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
private kanban: KanbanComponent;
public data = new DataManager({
url: 'http://some.com/invalidUrl'
});
render() {
this.onActionFailure = this.onActionFailure.bind(this);
return <KanbanComponent ref={kanban => this.kanban = kanban} id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} actionFailure={this.onActionFailure}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
public onActionFailure = (e: ActionEventArgs) => {
const span: HTMLElement = document.createElement('span');
if (this.kanban) {
(this.kanban.element.parentNode as HTMLElement).insertBefore(span, this.kanban.element);
span.style.color = "#FF0000";
span.innerHTML = "Server exception: 404 Not found";
}
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Action Failure</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Action Failure" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App() {
let data = new DataManager({
url: 'http://some.com/invalidUrl'
});
let kanban;
return (<KanbanComponent ref={kanban => kanban = kanban} id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} actionFailure={onActionFailure.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
function onActionFailure(e) {
const span = document.createElement('span');
if (kanban) {
kanban.element.parentNode.insertBefore(span, kanban.element);
span.style.color = "#FF0000";
span.innerHTML = "Server exception: 404 Not found";
}
}
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DataManager } from '@syncfusion/ej2-data';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs, ActionEventArgs } from "@syncfusion/ej2-react-kanban";
function App(){
let data = new DataManager({
url: 'http://some.com/invalidUrl'
});
let kanbanObj: KanbanComponent|null;
return(
<KanbanComponent ref={(kanban) => { kanbanObj = kanban }} id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} actionFailure={onActionFailure}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
function onActionFailure (e: ActionEventArgs) {
const span: HTMLElement = document.createElement('span');
if (kanbanObj) {
(kanbanObj.element.parentNode as HTMLElement).insertBefore(span, kanbanObj.element);
span.style.color = "#FF0000";
span.innerHTML = "Server exception: 404 Not found";
}
}
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban Action Failure</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban Action Failure" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
The
actionFailure
event will be triggered not only for the server errors, but also when there is an exception while processing the kanban actions.
Loading data via ajax
You can use Kanban dataSource
property to bind the datasource to Kanban from external ajax request. In the following code, we have fetched the datasource from the server using ajax request and provided that to the dataSource
property by using the onSuccess event of ajax.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Ajax } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
class App extends React.Component {
kanban;
componentDidMount() {
const ajax = new Ajax("https://services.syncfusion.com/react/production/api/Orders", "GET");
ajax.send();
ajax.onSuccess = (data) => {
if (this.kanban) {
this.kanban.dataSource = JSON.parse(data);
}
};
}
render() {
return <KanbanComponent ref={kanban => this.kanban = kanban} id="kanban" keyField="ShipCountry" dataSource={this.data} cardSettings={{ contentField: "ShippedDate", headerField: "OrderID" }}>
<ColumnsDirective>
<ColumnDirective headerText="Denmark" keyField="Denmark"/>
<ColumnDirective headerText="Brazil" keyField="Brazil"/>
<ColumnDirective headerText="Switzerland" keyField="Switzerland"/>
<ColumnDirective headerText="Germany" keyField="Germany"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Ajax } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, Kanban } from "@syncfusion/ej2-react-kanban";
class App extends React.Component<{}, {}>{
public kanban: Kanban | null;
public componentDidMount(){
const ajax = new Ajax("https://services.syncfusion.com/react/production/api/Orders", "GET");
ajax.send();
ajax.onSuccess = (data: any) => {
if (this.kanban) {
this.kanban.dataSource = JSON.parse(data);
}
}
}
render() {
return <KanbanComponent ref={kanban => this.kanban = kanban} id="kanban" keyField="ShipCountry" dataSource={this.data} cardSettings={{ contentField: "ShippedDate", headerField: "OrderID" }}>
<ColumnsDirective>
<ColumnDirective headerText="Denmark" keyField="Denmark" />
<ColumnDirective headerText="Brazil" keyField="Brazil" />
<ColumnDirective headerText="Switzerland" keyField="Switzerland" />
<ColumnDirective headerText="Germany" keyField="Germany" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban AJAX Binding</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban AJAX Binding" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Ajax } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
function App() {
let kanban;
function componentDidMount() {
const ajax = new Ajax("https://services.syncfusion.com/react/production/api/Orders", "GET");
ajax.send();
ajax.onSuccess = (data) => {
if (kanban) {
kanban.dataSource = JSON.parse(data);
}
};
}
return (<KanbanComponent ref={kanban => kanban = kanban} id="kanban" keyField="ShipCountry" dataSource={data} cardSettings={{ contentField: "ShippedDate", headerField: "OrderID" }}>
<ColumnsDirective>
<ColumnDirective headerText="Denmark" keyField="Denmark"/>
<ColumnDirective headerText="Brazil" keyField="Brazil"/>
<ColumnDirective headerText="Switzerland" keyField="Switzerland"/>
<ColumnDirective headerText="Germany" keyField="Germany"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Ajax } from '@syncfusion/ej2-base';
import { useEffect } from "react";
import { KanbanComponent, ColumnsDirective, ColumnDirective, Kanban } from "@syncfusion/ej2-react-kanban";
function App(){
let kanbanObj: KanbanComponent|null;
React.useEffect(() => {
const ajax = new Ajax("https://services.syncfusion.com/react/production/api/Orders", "GET");
ajax.send();
ajax.onSuccess = (data: any) => {
if (kanbanObj) {
kanbanObj.dataSource = JSON.parse(data);
}
}
});
return(
<KanbanComponent ref={(kanban) => { kanbanObj = kanban }} id="kanban" keyField="ShipCountry" cardSettings={{ contentField: "ShippedDate", headerField: "OrderID" }}>
<ColumnsDirective>
<ColumnDirective headerText="Denmark" keyField="Denmark" />
<ColumnDirective headerText="Brazil" keyField="Brazil" />
<ColumnDirective headerText="Switzerland" keyField="Switzerland" />
<ColumnDirective headerText="Germany" keyField="Germany" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kanban AJAX Binding</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Kanban AJAX Binding" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
- If you bind the dataSource from this way, then it acts like a local dataSource. So you cannot perform any server-side crud actions.