{% endhighlight %}
{% endtabs %}
## Prevent Dialog
Prevent the dialog from opening on card double-click by setting `args.cancel` to `true` in the [dialogOpen](https://ej2.syncfusion.com/react/documentation/api/kanban/#dialogopen) event. The following sample demonstrates preventing dialog opening.
`[Class-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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);
}
DialogOpen(args) {
args.cancel = true;
}
render() {
return ;
}
}
;
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
private DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Prevent Dialog Open
Loading....
{% endhighlight %}
{% endtabs %}
`[Functional-component]`
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
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);
function DialogOpen(args) {
args.cancel = true;
}
return ();
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective, DialogEventArgs } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
function DialogOpen(args: DialogEventArgs): void {
args.cancel = true;
}
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
{% endhighlight %}
{% highlight html tabtitle="index.html" %}
Kanban Prevent Dialog Open
Loading....
{% endhighlight %}
{% endtabs %}
## Persisting data in server
The modified card data can be persisted in the database using the RESTful web services. All the CRUD operations in the Kanban are done through [DataManager](https://ej2.syncfusion.com/react/documentation/data/). The `DataManager` has an option to bind all the CRUD related data in server-side.
> For your information, the ODataAdaptor persists data in the server as per OData protocol.
In the below section covers how to get the edited data details on the server-side using the [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#url-adaptor).
### URL adaptor
You can use the [UrlAdaptor](https://ej2.syncfusion.com/react/documentation/data/adaptors#url-adaptor) of `DataManager` when binding data source for remote data. In the initial load of Kanban, data are fetched from remote data and bound to the Kanban using `url` property of `DataManager`.
You can map 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 single insertion operation on server-side.
* `updateUrl` – You can update single data on server-side.
* `removeUrl` – You can remove single data on server-side.
* `crudUrl` – You can perform bulk data operation on server-side.
The following code example describes the above behavior.
`[Class-component]`
{% raw %}
```ts
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
}
};
ReactDOM.render(, document.getElementById('kanban'));
```
{% endraw %}
`[Functional-component]`
{% raw %}
```ts
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 (
);
}
ReactDOM.render(, document.getElementById('kanban'));
```
{% endraw %}
The server-side controller code to handle CRUD operations is as follows.
```ts
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; }
}
```
### Insert card
Using the `insertUrl` property, you can specify the controller action mapping URL to perform insert operation on the server-side.
The following code example describes the above behavior.
```ts
public ActionResult Insert(Params value)
{
//Insert card in the database
}
```
The newly added record details are bound to the `value` parameter.
### Update card
Using the `updateUrl` property, the controller action mapping URL can be specified to perform save/update operation on the server-side.
The following code example describes the above behavior.
```ts
public ActionResult Update(Params value)
{
//Update card data in the database
}
```
The updated record details are bound to the `value` parameter.
### Delete card
Using the `removeUrl` property, the controller action mapping URL can be specified to perform delete operation on the server-side.
The following code example describes the above behavior.
```ts
public void Delete(int key)
{
//Delete card in the database
}
```
The deleted card primary key value is bound to the `key` parameter.
### CRUD URL
Using the `crudUrl` property, the controller action mapping URL can be specified to perform all the CRUD operations at the server-side using a single method instead of specifying a separate controller action method for CRUD (insert, update and delete) operations.
The action parameter of `crudUrl` is used to get the corresponding CRUD action.
The following code example describes the above behavior.
`[Class-component]`
{% raw %}
```ts
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/UpdateData',
insertUrl: 'Home/UpdateData',
removeUrl: 'Home/UpdateData',
crudUrl: 'Home/UpdateData',
adaptor: new UrlAdaptor(),
crossDomain: true
});
render() {
return
}
};
ReactDOM.render(, document.getElementById('kanban'));
```
{% endraw %}
`[Functional-component]`
{% raw %}
```ts
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/UpdateData',
insertUrl: 'Home/UpdateData',
removeUrl: 'Home/UpdateData',
crudUrl: 'Home/UpdateData',
adaptor: new UrlAdaptor(),
crossDomain: true
});
return(
);
}
ReactDOM.render(, document.getElementById('kanban'));
```
{% endraw %}
```ts
private NORTHWNDEntities db = new NORTHWNDEntities();
public ActionResult DataSource() {
var DataSource = db.Tasks.ToList();
return Json(DataSource, JsonRequestBehavior.AllowGet);
}
public ActionResult UpdateData(EditParams param) {
if (param.action == "insert" || (param.action == "batch" && param.added != null)) {
if (param.action == "insert") {
db.Tasks.Add(param.value);
} else {
foreach (var temp in param.added) {
db.Tasks.Add(temp);
}
}
}
if (param.action == "update" || (param.action == "batch" && param.changed != null)) {
if (param.action == "update") {
Task old = db.Tasks.Where(o => o.Id == param.value.Id).SingleOrDefault();
if (old != null) {
db.Entry(old).CurrentValues.SetValues(param.value);
}
} else {
foreach (var temp in param.changed) {
Task old = db.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault();
if (old != null) {
db.Entry(old).CurrentValues.SetValues(temp);
}
}
}
}
if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) {
if (param.action == "remove") {
int key = Convert.ToInt32(param.key);
db.Tasks.Remove(db.Tasks.Where(o => o.Id == key).SingleOrDefault());
} else {
foreach (var temp in param.deleted) {
db.Tasks.Remove(db.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault());
}
}
}
db.SaveChanges();
return Json(param, JsonRequestBehavior.AllowGet);
}
public class EditParams {
public string key { get; set; }
public string action { get; set; }
public List added { get; set; }
public List changed { get; set; }
public List deleted { get; set; }
public Tasks value { get; set; }
}
```
> The `crudUrl` is used to update the bulk data sent to the server-side. Multiple selections and `sortBy` as `Index` properties are used for `crudUrl` properties to update the modified bulk data to the server-side.