### Install dependencies and start dev server with yarn

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Use yarn to install dependencies and start the development server. The command 'yarn start' or 'yarn dev' runs the dev server.

```jsx
yarn
yarn start // or yarn dev
```

--------------------------------

### Install dependencies and start dev server with npm

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_react.md

Installs dependencies and starts the dev server using npm. The app runs on a localhost address such as http://localhost:3000.

```json
npm install
npm run dev
```

--------------------------------

### Install dependencies and start dev server with yarn

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_react.md

Installs dependencies and starts the dev server using yarn. The app runs on a localhost address such as http://localhost:3000.

```json
yarn

yarn start
```

--------------------------------

### Run documentation locally with yarn start

Source: https://github.com/dhtmlx/docs-kanban/blob/master/README.md

Starts the local development server to explore the documentation.

```bash
$ yarn start
```

--------------------------------

### Example: Using getReactiveState

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/internal/js_kanban_getreactivestate_method.md

Shows how to create a Kanban board with columns, cards, and rows, then get its reactive state and subscribe to changes in columns, cards, rows, and selected items.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    rows
});
// get the Reactive State of Kanban
const state = board.api.getReactiveState();

// subscribe on the columns changes and output the array of columns
state.columns.subscribe((data) => {
    console.log(data);
});

// subscribe on the cards changes and output the array of cards
state.cards.subscribe((data) => {
    console.log(data);
});

// subscribe on the rows changes and output the array of rows
state.rows.subscribe((data) => {
    console.log(data);
});

// subscribe on the card selection and output the IDs of the selected cards
state.selected.subscribe((data) => {
    console.log(data);
});
```

--------------------------------

### serialize() Usage Example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_serialize_method.md

Example of creating a Kanban instance and calling serialize() to get the board data as an object.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// get the object of the Kanban data
board.serialize();
```

--------------------------------

### getStores method example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/internal/js_kanban_getstores_method.md

Example of creating a Kanban board and calling getStores to retrieve the DataStore object, then logging it to the console.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// get the DataStore object of Kanban
const store = board.api.getStores();
console.log(store);
```

--------------------------------

### Example: parse() data into Kanban

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_parse_method.md

Example of creating a Kanban instance and parsing data with parse(). The commented line shows the equivalent setConfig() call.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {});
// parse data into Kanban
board.parse({
    columns,
    cards,
    rows,
    links
});

// equivalent call via setConfig()
// board.setConfig({ columns, cards, rows, links });
```

--------------------------------

### Install dependencies with Yarn

Source: https://github.com/dhtmlx/docs-kanban/blob/master/README.md

Installs the project dependencies using Yarn.

```bash
$ yarn
```

--------------------------------

### Example: create Kanban and export to JSON

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/internal/js_kanban_json_method.md

Example of creating a Kanban board and exporting its data to JSON using board.export.json(). The comment shows the expected output structure.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// export the Kanban data to JSON ()
board.export.json(); // => { "cards": [...], "columns": [...], "rows": [] }
```

--------------------------------

### POST /uploads request and response example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/post_routes/js_kanban_post_uploads_route.md

Example of a multipart/form-data request body for uploading a file, and the JSON response returned by the route.

```http
------WebKitFormBoundarySlwgXDBw7kcKSI4p
Content-Disposition: form-data; name="upload"; filename="myImage.png"
Content-Type: image/png

------WebKitFormBoundarySlwgXDBw7kcKSI4p--
```

```json
{
   "id":4,
   "name":"myImage.png",
   "url":"http://localhost:3000/uploads/4/myImage.png",
   "isCover":false
}
```

--------------------------------

### Example: Using getLinks() with RestDataProvider

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_methods/js_kanban_getlinks_method.md

Example of using getLinks() with other RestDataProvider methods to load data and initialize the Kanban board.

```jsx
const url = "https://some_backend_url";
const restProvider = new kanban.RestDataProvider(url);

Promise.all([
    restProvider.getCards(),
    restProvider.getColumns(),
    restProvider.getLinks(),
]).then(([cards, columns, links]) => {
    const board = new kanban.Kanban("#root", {
        cards,
        columns,
        links
    });
    board.api.setNext(restProvider);
});
```

--------------------------------

### Example: moveRow() usage

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_moverow_method.md

Shows how to create a Kanban board and then move the row with ID 'task' before the row with ID 'feature'. The example includes the creation of the board and the moveRow call.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    row
});
// move the "task" swimlane and place it before (above) the "feature" one
board.moveRow({
    id: "task",
    before: "feature"
});
```

--------------------------------

### columns configuration example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/config/js_kanban_columns_config.md

Complete example of configuring columns with labels, IDs, collapsed states, limits, strict limits, CSS classes, and an overlay. The columns array is passed to the Kanban constructor along with cards and rows.

```jsx
const columns = [
    { 
        label: "Backlog", 
        id: "backlog",
        collapsed: true,
        limit: 3,
        strictLimit: true,
        css: "red" 
    },
    { 
        label: "In progress", 
        id: "inprogress",
        collapsed: false,
        limit: {
            // limit the number of cards for the "Feature" and "Task" rows of the "In progress" column
            feature: 3, 
            task: 2
        },
        strictLimit: false
    },
    { 
        label: "Done", 
        id: "done",
        overlay: template(`
            <div class="blockOverlay disable-drop">
                <span class="disable-drop-header">Drop is not allowed</span>
                <span class="disable-drop-description">Only testers can move cards to this
                    column</span>
            </div>`) 
    }
];

new kanban.Kanban("#root", {
    columns,
    cards,
    rows,
    // other parameters
});
```

--------------------------------

### Add Card with $meta skipHistory Example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/common/js_kanban_meta_parameter.md

Example of creating a Kanban board and adding a new card while skipping this action in the history of Kanban using the $meta parameter with skipHistory set to true.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// add new card and skip this action in history of Kanban
board.addCard({
    id: 1,
    columnId: "backlog",
    card: { label: "New card" },
    $meta: { 
        skipHistory: true 
    }
});
```

--------------------------------

### Example: getUsers() with RestDataProvider

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_methods/js_kanban_getusers_method.md

Example of using getUsers() with RestDataProvider. It fetches users along with cards, columns, and rows, then creates a Kanban board with a multiselect editor for users.

```jsx
const url = "https://some_backend_url";
const restProvider = new kanban.RestDataProvider(url);

Promise.all([
    restProvider.getCards(),
    restProvider.getColumns(),
    restProvider.getRows(),
    restProvider.getUsers(),
]).then(([cards, columns, rows, users]) => {
    const board = new kanban.Kanban("#root", {
        cards,
        columns,
        rows,
        rowKey: "type",
        editorShape: [
            ...kanban.defaultEditorShape,
            {
                type: "multiselect", 
                key: "users",
                label: "Users",
                values: users
            }
        ]
    });
    board.api.setNext(restProvider);
});
```

--------------------------------

### Navigate to project directory

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_svelte.md

Move into the newly created project directory.

```bash
cd my-svelte-kanban-app
```

--------------------------------

### setLocale from v1.5.7

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/news/migration.md

Shows the updated Toolbar setLocale method starting from version 1.5.7. It now takes a second argument, the board API, to apply the locale. This is a breaking change for the setLocale signature.

```jsx
    // create Kanban
    const board = new kanban.Kanban("#root", {...});
    // create Toolbar
    const toolbar = new kanban.Toolbar("#toolbar", { api: board.api });
    // apply the "de" locale to the Toolbar
    toolbar.setLocale(de, board.api); 
```

--------------------------------

### GET /columns Response Example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/get_routes/js_kanban_get_columns_route.md

Example JSON response from the GET /columns route containing an array of column objects. Each object includes the fields 'id', 'label', and 'collapsed'. Use this as a reference for expected response data.

```json
[
    {
        "id": 1,
        "label": "Backlog",
        "collapsed": false
    },
    {
        "id": 2,
        "label": "In Progress",
        "collapsed": false
    },
    {
        "id": 3,
        "label": "Testing",
        "collapsed": false
    },
    {
        "id": 4,
        "label": "Done",
        "collapsed": false
    }
]
```

--------------------------------

### GET /links Response Example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/get_routes/js_kanban_get_links_route.md

Example JSON response returned by the GET /links route. It contains an array of link objects, each with id, source, target, and relation fields. The HTTP status code indicates success (200) or failure (500).

```json
[
    {
        "id": 1,
        "source": 2,
        "target": 5,
        "relation": "relatesTo",
    },
    {
        "id": 2,
        "source": 4,
        "target": 9,
        "relation": "relatesTo",
    },
]
```

--------------------------------

### GET /rows response example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md

Example response body returned by the GET /rows route. It is a JSON array of row objects, each containing id, label, and collapsed properties. The HTTP status code indicates success (200) or failure (500).

```json
[
    {
        "id": 1,
        "label": "Feature",
        "collapsed": false
    },
    {
        "id": 2,
        "label": "Task",
        "collapsed": false
    }
]
```

--------------------------------

### Import Kanban source files for trial version

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Import the Kanban and Toolbar components and CSS from the trial package. This tutorial uses the trial version.

```html
<script>
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import '@dhx/trial-kanban/dist/kanban.css';
</script>
```

--------------------------------

### GET /cards response example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/get_routes/js_kanban_get_cards_route.md

Example JSON response returned by the GET /cards route. Contains an array of card objects with fields like id, label, description, column, row, start_date, end_date, progress, attached, color, and users. Dates must conform to ISO format yyyy-MM-dd'T'HH:mm:ss.SSSXXX.

```json
[
    {
        "id": 4,
        "label": "Set the tasks priorities",
        "description": "",
        "column": 2,
        "row": 1,
        "start_date": "2018-01-01T00:00:00Z",
        "end_date": null,
        "progress": 75,
        "attached": [],
        "color": "#FFC975",
        "users": []
    },
    {
        "id": 5,
        "label": "Custom icons",
        "description": "",
        "column": 2,
        "row": 2,
        "start_date": "2019-01-01T00:00:00Z",
        "end_date": null,
        "progress": 0,
        "attached": [],
        "color": "#65D3B3",
        "users": []
    },
    {
        "id": 6,
        "label": "Integration with Gantt",
        "description": "",
        "column": 2,
        "row": 2,
        "start_date": "2020-01-01T00:00:00Z",
        "end_date": null,
        "progress": 75,
        "attached": [],
        "color": "#FFC975",
        "users": []
    },
]
```

--------------------------------

### getSelection() usage example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_getselection_method.md

Creates a Kanban board and then calls getSelection() to get an array with the IDs of the selected cards.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// gets an array with IDs of the selected cards
board.getSelection();
```

--------------------------------

### Move into the app directory with cd

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Change into the newly created project directory before installing dependencies.

```json
cd my-vue-kanban-app
```

--------------------------------

### getAreaCards() Example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_getareacards_method.md

Creates a Kanban board and calls getAreaCards with a column ID and row ID to get an array of card data objects for that area.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    rows
});
// get an array with the cards data objects of the specified column and row
board.getAreaCards("column_id", "row_id");
```

--------------------------------

### Navigate into project directory

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_react.md

Moves into the newly created React project directory.

```json
cd my-react-kanban-app
```

--------------------------------

### Example: using board.redo()

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_redo_method.md

Creates a Kanban board and calls board.redo() to make one step back in history. Requires the history: true config.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// makes one step back in history of Kanban
board.redo();
```

--------------------------------

### GET /links

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/get_routes/js_kanban_get_links_route.md

Gets data on all links and returns a JSON object with an array of links objects. The route handles the HTTP GET request made to the /links path.

```APIDOC
## GET /links

### Description
Gets data on all links and returns a json object with an array of links objects.

### Method
GET

### Endpoint
/links

### Parameters
No payload is required.

### Response
#### Success Response (200)
Returns a json object with an array of all links objects.

#### Response Example
json
[
    {
        "id": 1,
        "source": 2,
        "target": 5,
        "relation": "relatesTo"
    },
    {
        "id": 2,
        "source": 4,
        "target": 9,
        "relation": "relatesTo"
    }
]


#### Error Response (500)
The HTTP status code shows whether the request succeeds (response.status == 200) or fails (response.status == 500).
```

--------------------------------

### Example: configuring editor with modal placement

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/config/js_kanban_editor_config.md

Example of initializing the Kanban with a custom editor configuration. This sets the editor to be shown, enables autosave with a 2000 millisecond debounce, and places the editor in a modal window. Note that the `placement` parameter was added in v1.6.

```jsx
new kanban.Kanban("#root", {
    columns,
    cards,
    editor: {
        show: true
        autoSave: true,
        debounce: 2000,
        placement: "modal"
    }
    // other parameters
});
```

--------------------------------

### Example: disable history

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/config/js_kanban_history_config.md

Example of initializing Kanban with history disabled.

```jsx
new kanban.Kanban("#root", {
    columns,
    cards,
    history: false, // disable managing history
    // other parameters
});
```

--------------------------------

### Initialize Kanban with kanban.Kanban constructor

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/initialization.md

Creates a Kanban instance using the kanban.Kanban constructor with a CSS selector and a configuration object. Replace the comment with your configuration properties.

```jsx
// create Kanban
new kanban.Kanban("#root", {
    // configuration properties
});
```

--------------------------------

### Import Kanban source files for trial version

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_react.md

Imports Kanban and Toolbar components and their CSS for the trial version. This tutorial uses the trial version.

```jsx
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import "@dhx/trial-kanban/dist/kanban.css";
```

--------------------------------

### GET /cards

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/overview/rest_routes_overview.md

Gets data on all cards and returns a JSON object with an array of card objects.

```APIDOC
## GET /cards

### Description
Gets data on all cards and returns a JSON object with an array of card objects.

### Method
GET

### Endpoint
/cards

### Response
#### Success Response (200)
- **cards** (array) - Array of card objects

#### Response Example
{
  "cards": []
}
```

--------------------------------

### Create DIV containers and initialize Kanban and Toolbar

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/how_to_start.md

Add two DIV containers with IDs 'toolbar' and 'root', then initialize Kanban and Toolbar using the kanban.Kanban and kanban.Toolbar constructors. The Toolbar is optional; if omitted, only one container is needed.

```html
<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with Kanban</title>
        <script src="./dist/kanban.js"></script>   
        <link href="./dist/kanban.css" rel="stylesheet">  
    </head>
    <body>
        <div id="toolbar"></div>
        <div id="root"></div>

        <script>
            const board = new kanban.Kanban("#root", {
                // configuration properties
            });

            new kanban.Toolbar("#toolbar", {
                // configuration properties
            });
        </script>
    </body>
</html>
```

--------------------------------

### Initialize Kanban with initial data

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/working_with_data.md

This snippet demonstrates how to initialize a Kanban board with initial data for columns, cards, rows, and links.

```APIDOC
## Initialize Kanban with initial data

### Description
Pass initial data for columns, cards, rows, and links to the Kanban constructor.

### Method
Constructor

### Endpoint
`new kanban.Kanban(container, config)`

### Parameters
#### Container
- **container** (string) - Required - CSS selector for the container element.

#### Config
- **columns** (array) - Required - Array of column objects. Each column has `label` (string) and `id` (string).
- **cards** (array) - Required - Array of card objects. Each card can have `id`, `label`, `priority`, `color`, `description`, `start_date`, `end_date`, `progress`, `users`, `sprint`, `column`, `type`, `css`, `votes`, `comments`.
- **rows** (array) - Required - Array of row objects. Each row has `label` (string), `id` (string), and optional `collapsed` (boolean).
- **links** (array) - Required - Array of link objects. Each link has `id`, `source`, `target`, and `relation`.

### Request Example
```jsx
const columns = [
    { label: "Backlog", id: "backlog" },
    { label: "In progress", id: "inprogress" },
    { label: "Testing", id: "testing" }
];

const cards = [
    {
        id: 1,
        label: "Integration with React",
        priority: 1,
        color: "#65D3B3",
        description: "Some description...",
        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),
        progress: 25,
        users: [1,2,3,4],
        sprint: "1.0",
        column: "backlog",
        type: "feature",
        css: "red",
        votes: [4,6,9],
        comments: [
            {
                id: 1,
                userId: 9,
                cardId: 6,
                text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays.",
                date: new Date(),
            }
        ]
    },
    {
        id: 2,
        label: "Archive the cards/boards ",
        priority: 2,
        color: "#FFC975",
        start_date: new Date("01/05/2021"),
        end_date: new Date("01/15/2021"),
        sprint: "1.0",
        column: "backlog",
        type: "feature"
    },
    {
        label: "Searching and filtering",
        priority: 1,
        color: "#65D3B3",
        start_date: new Date("01/05/2021"),
        sprint: "1.2",
        column: "backlog",
        type: "task"
    },
    {
        label: "Set the tasks priorities",
        priority: 2,
        color: "#58C3FE",
        sprint: "1.2",
        column: "inprogress",
        type: "feature"
    }
];

const rows = [
    { label: "Feature", id: "feature" },
    { label: "Task", id: "task", collapsed: true }
];

const links = [
    {
        id: "link_1",
        source: 1,
        target: 2,
        relation: "relatesTo",
    }
];

new kanban.Kanban("#root", {
    columns, 
    cards, 
    rows,
    links 
});
```

### Response
No response body. The Kanban instance is created and rendered in the container.
```

--------------------------------

### GET /columns

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/overview/rest_routes_overview.md

Gets data on all columns and returns a JSON object with an array of objects with columns data.

```APIDOC
## GET /columns

### Description
Gets data on all columns and returns a JSON object with an array of objects with columns data.

### Method
GET

### Endpoint
/columns

### Response
#### Success Response (200)
- **columns** (array) - Array of column objects

#### Response Example
{
  "columns": []
}
```

--------------------------------

### GET /rows

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/overview/rest_routes_overview.md

Gets data on all rows and returns a JSON object with an array of objects with rows (swimlanes) data.

```APIDOC
## GET /rows

### Description
Gets data on all rows and returns a JSON object with an array of objects with rows (swimlanes) data.

### Method
GET

### Endpoint
/rows

### Response
#### Success Response (200)
- **rows** (array) - Array of row objects

#### Response Example
{
  "rows": []
}
```

--------------------------------

### getUsers()

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_methods/js_kanban_getusers_method.md

Gets a promise with the users data. This method is part of the RestDataProvider service and sends a GET request to the server.

```APIDOC
## getUsers()

### Description
Gets a promise with the users data. This method is part of the RestDataProvider service intended for working with server.

### Method
GET

### Endpoint
Not specified in the source. The method sends a request to the server by the GET method.

### Returns
A **promise** with the users data.

### Example
jsx
const url = "https://some_backend_url";
const restProvider = new kanban.RestDataProvider(url);

Promise.all([
    restProvider.getCards(),
    restProvider.getColumns(),
    restProvider.getRows(),
    restProvider.getUsers(),
]).then(([cards, columns, rows, users]) => {
    const board = new kanban.Kanban("#root", {
        cards,
        columns,
        rows,
        rowKey: "type",
        editorShape: [
            ...kanban.defaultEditorShape,
            {
                type: "multiselect", 
                key: "users",
                label: "Users",
                values: users
            }
        ]
    });
    board.api.setNext(restProvider);
});


**Change log:** The method was added in v1.3

**Related articles:** [Working with server](guides/working_with_server.md)
```

--------------------------------

### Navigate to the app directory

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_angular.md

Move into the newly created Angular project directory before installing dependencies.

```json
cd my-angular-kanban-app
```

--------------------------------

### Create a new Vue project with npm create vue@latest

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Run this command to scaffold a new Vue project using the official create-vue tool. Name the project my-vue-kanban-app.

```json
npm create vue@latest
```

--------------------------------

### Toolbar destructor() usage example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/toolbar_destructor_method.md

Example of creating a Kanban board and a Toolbar, then removing the Toolbar by calling its destructor method.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {});
// create Toolbar
const toolbar = new kanban.Toolbar("#toolbar", { api: board.api });
// remove Toolbar
toolbar.destructor();
```

--------------------------------

### deleteLink() usage example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_deletelink_method.md

Example of creating a Kanban board and removing a link by its ID using board.deleteLink({ id: 5 }).

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards,
    links,
});
// remove link by its id
board.deleteLink({ id: 5 });
```

--------------------------------

### Set up containers and initialize Kanban and Toolbar in Vue component

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Create a Vue component with refs for the Kanban and Toolbar containers, instantiate both components in mounted(), and destroy them in unmounted(). The template includes the container divs.

```html
<script>
import { Kanban, Toolbar } from "@dhx/trial-kanban";
import "@dhx/trial-kanban/dist/kanban.css";

export default {
    mounted() {
        // initialize the Kanban component
        this.kanban = new Kanban(this.$refs.kanban_container, {});

        // initialize the Toolbar component
        this.toolbar = new Toolbar(this.$refs.toolbar_container, {
            api: this.kanban.api, // provide Kanban inner API
            // other configuration properties
        });
    },

    unmounted() {
        this.kanban.destructor(); // destroy Kanban
        this.toolbar.destructor(); // destroy Toolbar
    }
};
</script>

<template>
    <div class="component_container">
        <div ref="toolbar_container"></div>
        <div ref="kanban_container" class="widget"></div>
    </div>
</template>
```

--------------------------------

### Create a Svelte project with Vite

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_svelte.md

Run this command to initialize a new Svelte project using Vite.

```json
npm create vite@latest
```

--------------------------------

### data.js - Provide sample Kanban data

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Create this file in the src/ directory to supply sample columns, cards, and rows data for the Kanban. The data set uses a specific structure with labels, ids, optional start_date and progress, and a type field for rows.

```jsx
export function getData() {
    const columns = [
        {
            label: "Backlog",
            id: "backlog"
        },
        {
            label: "In progress",
            id: "inprogress"
        },
        // ...
    ];

    const cards = [
        {
            id: 1,
            label: "Integration with Angular/React",
            priority: 1,
            color: "#65D3B3",
            start_date: new Date("01/07/2021"),
            users: [3, 2],
            column: "backlog",
            type: "feature",
        },
        {
            label: "Archive the cards/boards",
            priority: 3,
            color: "#58C3FE",
            users: [4],
            progress: 1,
            column: "backlog",
            type: "feature",
        },
        // ...
    ];

    const rows = [
        {
            label: "Feature",
            id: "feature",
        },
        {
            label: "Task",
            id: "task",
        }
    ];

    return { columns, cards, rows };
}
```

--------------------------------

### addLink() usage example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_addlink_method.md

Example of adding a new link with an id and link data object, including source, target, and relation.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// add new link 
board.addLink({
    id: 3,
    link: {
        source: 4,
        target: 6,
        relation: "relatesTo",
    }
});
```

--------------------------------

### renderType Example with Kanban Constructor

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/config/js_kanban_rendertype_config.md

Example of setting renderType to "lazy" in the Kanban constructor. Note the comment indicating other parameters.

```jsx
new kanban.Kanban("#root", {
    columns,
    cards,
    rows,
    renderType: "lazy",
    // other parameters
});
```

--------------------------------

### Example: Subscribe to scroll event

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/events/js_kanban_scroll_event.md

Shows how to create a Kanban instance and attach a listener for the scroll event. The callback logs the event object.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// subscribe on the "scroll" event
board.api.on("scroll", (obj) => {
    console.log(obj);
});
```

--------------------------------

### Example: disable autosave in Kanban

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/config/js_kanban_editorautosave_config.md

Example of initializing Kanban with editorAutoSave set to false, which disables autosaving and shows a Save button in the editor.

```jsx
new kanban.Kanban("#root", {
    columns,
    cards,
    editorAutoSave: false, // disable autosaving
    // other parameters
});
```

--------------------------------

### Update Kanban and Toolbar Configuration with setConfig

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/methods/js_kanban_setconfig_method.md

Shows how to create a Kanban board and Toolbar, then update their configuration at runtime using setConfig. The method does not change history.

```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});

// create Toolbar
const toolbar = new kanban.Toolbar("#toolbar", { api: board.api });

// specify new configuration parameters of Kanban
board.setConfig({
    columnKey: "stage",
    rowKey: "type",
    cardShape,
    editorShape,
    editor: {
       autoSave: false
    },
    /* other parameters */
});
                        
// specify new configuration parameters of Toolbar
toolbar.setConfig({ items: ["search", "spacer", "sort"] });
```

--------------------------------

### App.vue - Import data and pass as props

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Open App.vue and import the dataset, initialize the values through the inner data() method, then pass the values to the new <Kanban/> component as props. This is the setup step to make the data available to the Kanban component.

```html
<script>
import Kanban from "./components/Kanban.vue";
import { getData } from "./data";

export default {
    components: { Kanban },
    data() {
        const { columns, cards, rows } = getData();
        return { 
            columns, 
            cards,
            rows
        };
    }
};
</script>

<template>
    <Kanban :columns="columns" :cards="cards" :rows="rows"/>
</template>
```

--------------------------------

### POST /rows payload example

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/post_routes/js_kanban_post_rows_route.md

Example JSON payload for creating a new row. The 'label' property is required, and 'collapsed' is optional (default false).

```json
{
    "label": "New row",
    "collapsed": "true",
}
```

--------------------------------

### GET /rows

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/api/provider/rest_routes/get_routes/js_kanban_get_rows_route.md

This code snippet documents the GET /rows REST route API for DHTMLX Kanban, which retrieves all rows (swimlanes) data as a JSON array.

```APIDOC
## GET /rows

### Description
Gets data on all rows and returns a json object with an array of objects with rows (swimlanes) data. The route handles the HTTP GET request made to the `/rows` path.

### Method
GET

### Endpoint
/rows

### Parameters
No payload is required.

### Response
#### Success Response (200)
Returns a json object with an array of objects with rows data.

#### Response Example
```json
[
    {
        "id": 1,
        "label": "Feature",
        "collapsed": false
    },
    {
        "id": 2,
        "label": "Task",
        "collapsed": false
    }
]
```

#### Error Response (500)
The HTTP status code shows whether the request succeeds (response.status == 200) or fails (response.status == 500).
```

--------------------------------

### Import Kanban source files for PRO version

Source: https://github.com/dhtmlx/docs-kanban/blob/master/docs/guides/integration_with_vue.md

Import the Kanban and Toolbar components and CSS from the local PRO package. If the package ships minified files, use kanban.min.css instead.

```html
<script>
import { Kanban, Toolbar } from 'dhx-kanban-package';
import 'dhx-kanban-package/dist/kanban.css';
</script>
```