# Dialog in Vue Kanban component
The Kanban provides built-in support to add, edit and delete a card using dialog module. User can edit a card using the following ways.
* Built-in dialog module
* Custom Fields
* Dialog template
## Default Dialog
When double-click on the cards, the dialog is opened with below fields to edit a card. This dialog contains `Delete`, `Save` and `Cancel` buttons.
* To edit a card, modify the card details and click the `Save` button.
* To delete a card, click `Delete` button.
* Click on the `Cancel` button to cancel the editing action.
The dialog displays with the following fields which mapped to dialog fields by default.
Key | Type | Text
--|----
cardSettings.headerField | Input | ID
keyField | DropDown | -
cardSettings.contentField | TextArea | -
cardSettings.priority(If applicable) | Numeric | -
swimlaneSettings.keyField(If applicable) | DropDown | -
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% endhighlight %}
{% endtabs %}
## Custom Fields
You can change the default fields of dialog using `fields` property inside the `dialogSettings` property. The `key` property used to map the dataSource value and rendered the corresponding component based on specified `type` property.
The following types are available in dialog fields.
* String
* Numeric
* TextArea
* DropDown
* TextBox
* Input
> If `type` is not defined in the fields, then it renders as the HTML input element in dialog.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% endhighlight %}
{% endtabs %}
### Custom Fields label
By default, the fields `key` mapping value is considered as a `label` and you can change this label by using `text` property.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% endhighlight %}
{% endtabs %}
### Fields Validation
The dialog fields can be validated while click on the `Save` button. This can be achieved by using `validationRules` property.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% endhighlight %}
{% endtabs %}
## Dialog Template
To get start quickly with Dialog template edit Option, you can check on this video:
{% youtube "https://www.youtube.com/watch?v=c30icqRKBmw" %}
Using the dialog template, you can render your own dialog by defining the `template` property. Initialize the template as SCRIPT element Id or HTML string which holds the template and map it to the template property.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% endhighlight %}
{% endtabs %}
## Prevent Dialog
The Kanban allows to prevent to open a dialog on card double-click by enabling `args.cancel` in `dialogOpen` event.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
{% 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`](../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`.
### URL adaptor
You can use the `UrlAdaptor` 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.
```ts
```
The server-side controller code to handle the CRUD operations are 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.
```ts
```
```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.