### Install Dependencies with Yarn

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

Install project dependencies and start the development server using Yarn.

```bash
yarn
yarn start // or yarn dev
```

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

### Install Dependencies with Yarn

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

Install project dependencies using Yarn and start the development server. Ensure Yarn is installed globally.

```bash
yarn
yarn start
```

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

### Install Dependencies with npm

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

Install project dependencies using npm and start the development server. This is the default package manager for Node.js.

```bash
npm install
npm run dev
```

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

### Install Dependencies for Documentation

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

Install the necessary project dependencies using Yarn.

```bash
$ yarn
```

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

### GET /users Response Example

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

This snippet shows an example of the JSON response returned by the GET /users route, containing an array of user objects.

```json
[
    {
        "id": 1,
        "label": "Jhon",
        "avatar": "https://serv.com/images/jhon.png"
    },
    {
        "id": 2,
        "label": "Ben",
        "avatar": "https://serv.com/images/ben.png"
    },
    {
        "id": 3,
        "label": "Alex",
        "avatar": "https://serv.com/images/alex.png"
    }
]
```

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

### Run DHTMLX Kanban Documentation Locally

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

Start the documentation on a local server using Yarn.

```bash
$ yarn start
```

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

### 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

This snippet shows an example of the JSON response returned by the GET /columns route, which includes an array of column objects.

```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
    }
]
```

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

### Example Kanban Editor Configuration

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

Demonstrates how to configure the Kanban editor with custom settings for show, autoSave, debounce, and placement.

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

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

### 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

This snippet shows an example of the JSON response returned by the GET /links route, containing an array of link objects.

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

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

### Get Kanban Columns and Cards

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

This example demonstrates how to fetch both cards and columns data from a REST API using RestDataProvider and then initialize a Kanban board with this data. It uses Promise.all to handle concurrent requests.

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

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

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

### Overlay Template Example

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

An example of an overlay template for a Kanban column, used to display custom content and potentially disable drop functionality.

```jsx
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>`)
```

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

### GET /uploads

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

Gets the requested binary file from the server.

```APIDOC
## GET /uploads

### Description
Gets the requested binary file from the server.

### Method
GET

### Endpoint
/uploads
```

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

### GET /uploads

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

Gets the requested binary file from the server.

```APIDOC
## GET /uploads/{id}/{name}

### Description
Gets the requested binary file from the server.

### Method
GET

### Endpoint
/uploads/{id}/{name}

### Parameters
#### Path Parameters
- **id** (number) - Required - The ID of the required file.
- **name** (string) - Required - The name of the requested file.

### Response
#### Success Response (200)
The route returns the requested binary file.

#### Error Response (500)
Indicates a server error.
```

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

### Locale Switching Example

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

Demonstrates how to switch locales in the DHTMLX Kanban component. This example is interactive and allows for live testing.

```JavaScript
<html>
<head>
  <title>Kanban | Locale Switching</title>
  <script type="text/javascript" src="../../codebase/dhtmlx.js"></script>
  <link rel="stylesheet" href="../../codebase/dhtmlx.css"/>
</head>
<body>
  <div id="kanban" style="height: 600px;"></div>
  <script>
    var kanban = new dhtmlXKanban({
      container: "kanban",
      //... other kanban options
    });

    // Example of switching locale
    kanban.locales.setLang("en"); // Set to English
    // kanban.locales.setLang("es"); // Set to Spanish
    // kanban.locales.setLang("fr"); // Set to French

    // Load data after setting locale
    kanban.parse({
      rows: [
        { id: 1, header: { text: "To Do" } },
        { id: 2, header: { text: "In Progress" } },
        { id: 3, header: { text: "Done" } }
      ],
      cols: [
        { id: 1, header: "Backlog", color: "#f0f0f0" },
        { id: 2, header: "Development", color: "#f0f0f0" },
        { id: 3, header: "Testing", color: "#f0f0f0" },
        { id: 4, header: "Completed", color: "#f0f0f0" }
      ],
      tasks: [
        { id: 1, title: "Task 1", status: 1, "owner": 1 },
        { id: 2, title: "Task 2", status: 1, "owner": 2 },
        { id: 3, title: "Task 3", status: 2, "owner": 1 },
        { id: 4, title: "Task 4", status: 3, "owner": 3 },
        { id: 5, title: "Task 5", status: 4, "owner": 2 }
      ]
    });
  </script>
</body>
</html>
```

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

### Import Kanban PRO Package

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

Import Kanban and Toolbar components along with their CSS for the PRO version installed from a local folder.

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

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

### Initialize Kanban Toolbar

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

Initializes the Kanban Toolbar and binds it to a Kanban instance. Use this when you need a basic toolbar setup.

```jsx
const board = new kanban.Kanban("#root", {
    // data
    columns,
    cards,
    rows,
    // card settings
    cardShape,
    // editor settings
    editorShape
});

new kanban.Toolbar("#toolbar", { api: board.api });
```

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

### Create Svelte Project with Vite

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

Use npm to create a new Svelte project with Vite. This command initiates the project setup process.

```bash
npm create vite@latest
```

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

### Create Vue Project

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

Use the official Vue project scaffolding tool to create a new Vue project. Ensure Node.js is installed beforehand.

```bash
npm create vue@latest
```

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

### Initialize Kanban with Links

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

Example of initializing the DHTMLX Kanban component with a defined set of links. This demonstrates how to pass the links array during component instantiation.

```jsx
const links = [
    {
        id: 1,
        source: 2,
        target: 5,
        relation: "relatesTo",
    }, {...} // other link data
];

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

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

### Kanban Component Setup and Initialization

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

Defines an Angular component to mount DHTMLX Kanban and Toolbar. It sets up containers, initializes the components, and handles their destruction.

```jsx
import { Kanban, Toolbar } from '@dhx/trial-kanban';
import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation} from '@angular/core';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: "kanban", // template name used in "app.component.ts" as <kanban />
    styleUrls: ["./kanban.component.css"], // include the css file
    template:  `<div class = "component_container">
                    <div #toolbar_container></div>
                    <div #kanban_container class = "widget"></div>
                </div>`
})

export class KanbanComponent implements OnInit, OnDestroy {
    // initialize container for Toolbar
    @ViewChild("toolbar_container", { static: true }) toolbar_container!: ElementRef;
    // initialize container for Kanban
    @ViewChild("kanban_container", { static: true }) kanban_container!: ElementRef;

    private _kanban!: Kanban;
    private _toolbar!: Toolbar;

    ngOnInit() {
        // initialize the Kanban component
        this._kanban = new Kanban(this.kanban_container.nativeElement, {});

        // initialize the Toolbar component
        this._toolbar = new Toolbar(this.toolbar_container.nativeElement, {
            api: this._kanban.api,
            // other configuration properties 
        });
    }

    ngOnDestroy(): void {
        this._kanban.destructor(); // destroy Kanban
        this._toolbar.destructor(); // destroy Toolbar
    }
}
```

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

### Handling the start-drag-card Event in Kanban

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

Example of how to subscribe to the 'start-drag-card' event on a DHTMLX Kanban instance and log the column ID of the dragged card.

```javascript
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// subscribe on the "start-drag-card" event
board.api.on("start-drag-card", (obj) => {
    console.log(obj.columnId);
});
```

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

### Import Kanban and Toolbar from Trial Package

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

Import Kanban and Toolbar components and their CSS from the trial package. This is used for evaluation purposes.

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

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

### Short vs. Extended Configuration Values

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

Demonstrates how to set parameters using either a simple boolean for show/hide or an object for more detailed configuration.

```jsx
label: boolean | { show?: boolean }
    // short value
    label: true
    // or
    // full value
    label: { show: true }
```

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

### 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

This JSON object represents the successful response from the GET /rows route, containing an array of row (swimlane) objects.

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

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

### Using parse() and setConfig()

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

Demonstrates the recommended way to configure Kanban by using a single setConfig() call instead of separate calls for configuration and data parsing. This approach is more efficient.

```javascript
kanban.setConfig({
    columnKey: "type"
});
kanban.parse({
    columns
});
```

```javascript
kanban.setConfig({
    columnKey: "type",
    columns
});
```

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

### 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

This JSON object represents the response from the GET /cards route, containing an array of card objects. Each object details a card's properties such as ID, label, column, dates, progress, and color.

```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": []
    },
]
```

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

### Initialize Kanban with Server Data

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

This example demonstrates how to fetch cards, columns, and links from a REST API using RestDataProvider and then initialize a new Kanban board with this data. It uses Promise.all to concurrently fetch all necessary data before creating the Kanban instance.

```javascript
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);
});
```

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

### Create React App

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

Use npx to create a new React project. This command sets up a basic React application structure.

```bash
npx create-react-app my-react-kanban-app
```

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

### 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

### Response
#### Success Response (200)
- **id** (number) - Description
- **source** (number) - Description
- **target** (number) - Description
- **relation** (string) - Description

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

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

### Navigate to Project Directory

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

Change the current directory to the newly created React application folder.

```bash
cd my-react-kanban-app
```

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

### Kanban Initialization with Columns

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

Demonstrates how to initialize a DHTMLX Kanban instance with a defined columns configuration, including various parameter settings.

```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
});
```

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

### GET /rows

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

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.

```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)
- **id** (number) - Unique identifier for the row.
- **label** (string) - The display label for the row.
- **collapsed** (boolean) - Indicates if the row is collapsed.

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

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

### Import Kanban Trial Package

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

Import Kanban and Toolbar components along with their CSS for 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/provider/rest_routes/get_routes/js_kanban_get_cards_route.md

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

```APIDOC
## GET /cards

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

### Method
GET

### Endpoint
/cards

### Parameters

### Request Body
No payload is required.

### Response
#### Success Response (200)
- **id** (number) - The unique identifier for the card.
- **label** (string) - The title or name of the card.
- **description** (string) - A detailed description of the card's content.
- **column** (number) - The identifier of the column the card belongs to.
- **row** (number) - The row position of the card within its column.
- **start_date** (string) - The start date of the card in ISO format (yyyy-MM-dd'T'HH:mm:ss.SSSXXX).
- **end_date** (string or null) - The end date of the card in ISO format, or null if not set.
- **progress** (number) - The completion progress of the card, represented as a percentage.
- **attached** (array) - A list of attachments associated with the card.
- **color** (string) - The background color of the card.
- **users** (array) - A list of users assigned to the card.

#### Response Example
{
  "example": "[
    {
        "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": []
    }
]"
}
```

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

### Initialize Kanban and Toolbar

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

This HTML snippet demonstrates how to create DIV containers for the Kanban board and its toolbar, and then initialize both components using their respective constructors. The Toolbar is optional.

```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>
```

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

### GET /users

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

Gets data on all users and returns a json object with an array of users objects.

```APIDOC
## GET /users

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

### Method
GET

### Endpoint
/users

### Response
#### Success Response (200)
- **id** (number) - User ID
- **label** (string) - User name
- **avatar** (string) - URL to user avatar

### Response Example
```json
[
    {
        "id": 1,
        "label": "Jhon",
        "avatar": "https://serv.com/images/jhon.png"
    },
    {
        "id": 2,
        "label": "Ben",
        "avatar": "https://serv.com/images/ben.png"
    },
    {
        "id": 3,
        "label": "Alex",
        "avatar": "https://serv.com/images/alex.png"
    }
]
```
```

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

### Kanban.svelte: Loading Data with setConfig

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

Initializes Kanban with empty data and then loads data using the setConfig method within onMount.

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

export let columns;
export let cards;
export let rows;

let toolbar_container, kanban_container;
let kanban, toolbar;

onMount(() => {
    kanban = new Kanban(kanban_container, {
        columns: [],
        cards: [],
        rows: [],
        rowKey: "type",
        // other configuration properties
    })

    toolbar = new Toolbar(toolbar_container, {
        api: kanban.api, // provide Kanban inner API
        // other configuration properties
    })

    kanban.setConfig({ columns, cards, rows });
    // or kanban.parse({ columns, cards, rows });
});

onDestroy(() => {
    kanban.destructor(); 
    toolbar.destructor(); 
});
</script>

<div class="component_container">
    <div bind:this={toolbar_container}></div>
    <div bind:this={kanban_container} style="height: calc(100% - 56px);"></div>
</div>
```

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

### Initialize Kanban with Server Data

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

This example demonstrates how to fetch cards, columns, and rows from a REST API using RestDataProvider and then initialize a new Kanban board with the retrieved data. It uses Promise.all to concurrently fetch all necessary data before creating the Kanban instance.

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

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

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

### GET /links

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

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

```APIDOC
## GET /links

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

### Method
GET

### Endpoint
/links
```

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

### Import Kanban and Toolbar from PRO Package

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

Import Kanban and Toolbar components and their CSS from the local PRO package. Adjust the CSS path if minified files are used.

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

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

### GET /columns

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

Gets data on all columns and returns a JSON object with an array of objects containing column 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)
- **id** (number) - The unique identifier for the column.
- **label** (string) - The display name of the column.
- **collapsed** (boolean) - Indicates if the column is collapsed.

#### Response Example
```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
    }
]
```
```

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

### getRows()

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

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

```APIDOC
## getRows()

### Description
Gets a promise with the rows data.

### Method
GET

### Endpoint
This method sends a GET request to the server. The specific endpoint is determined by the URL provided when initializing the RestDataProvider.

### Returns
A promise that resolves with the rows data.

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

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

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

### Import Kanban and Toolbar for Trial Version

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

Import the Kanban and Toolbar classes from '@dhx/trial-kanban' for the trial version.

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

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

### getLinks()

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

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

```APIDOC
## GET /getLinks

### Description
Gets a promise with the links data.

### Method
GET

### Endpoint
/getLinks

### Returns
- **promise** - A promise that resolves with the links data.

### Request Example
(No request body or parameters are explicitly documented for this method)

### Response
#### Success Response (200)
- **links data** (object) - The data representing the links in the Kanban board.

### Response Example
(Response structure not explicitly defined in the source, but it's the data used to initialize Kanban links)

### Example Usage
```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);
});
```
```

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

### Kanban Configuration with $meta

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

This snippet shows how to initialize a Kanban board and add a card while skipping the history for that specific operation using the $meta object with skipHistory set to true.

```jsx
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
board.addCard({
    id: 1,
    columnId: "backlog",
    card: { label: "New card" },
    $meta: { 
        skipHistory: true 
    }
});
```

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

### Default and Custom Searchbar Configuration

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

Illustrates how to configure a default searchbar using a string or a custom searchbar with options and a result template.

```jsx
items: [
    "search", // default searchbar
    // other controls
]

// or 

items: [
    { // custom searchbar
        type: "search",
        options: [
            {
                id: "label",
                label: "By label"
            },
            {
                id: "start_date",
                label: "By date",
                searchRule: (card, value, by) => {
                    const date = card[by];
                    return date?.toString().includes(value);
                }
            }
        ],
        resultTemplate: kanban.template(({ result }) => {
            return `<div class="list-item">
                <div class="list-item-text">${result.label}</div>
                ${result.description ? `<div class="list-item-text item-description">${result.description}</div>` : ""}
            </div>`
        })
    },
    // other controls
]
```

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

### getColumns()

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

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

```APIDOC
## getColumns()

### Description
Gets a promise with the columns data.

### Method
GET

### Endpoint
(Server URL provided during RestDataProvider initialization)

### Returns
A promise that resolves with the columns data.
```

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

### getCards()

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

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

```APIDOC
## getCards()

### Description
Gets a promise with the cards data.

### Method
GET

### Endpoint
This method sends a request to the server. The specific endpoint is determined by the RestDataProvider's configuration, typically a base URL.

### Returns
A promise that resolves with the cards data.

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

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

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

### Initialize Kanban Instance

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

Instantiate the Kanban widget using the kanban.Kanban constructor. Pass the CSS selector of the container element and a configuration object.

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

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

### Kanban updateRow() Method From v1.3

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

Example of updating a row in Kanban from version 1.3, including the new 'replace' parameter. Note: The method name in the example is 'updateColumn' but it should be 'updateRow' based on the context.

```javascript
updateColumn({
    id: "feature",
    row: {
        label: "Updated row",
        collapsed: true
    },
    replace: true
});
```

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

### getCard()

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

Gets a data object of the card by the specified ID.

```APIDOC
## getCard()

### Description
Gets a data object of the card by the specified ID.

### Method
`getCard(id: string | number): object;`

### Parameters
#### Path Parameters
- **id** (string | number) - Required - the ID of the target card

### Returns
The method returns the data object of the card with the specified ID.

### Example
```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// get the data object of the card with the 1 ID
const card_data = board.getCard(1);
console.log(card_data);
```
```

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

### Navigate to Project Directory

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

Change the current directory to the newly created Vue project folder.

```bash
cd my-vue-kanban-app
```

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

### getColumnCards()

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

Gets an array that stores data objects of all cards in the specific column.

```APIDOC
## getColumnCards()

### Description
Gets an array that stores data objects of all cards in the specific column.

### Method
`getColumnCards(id: string | number): array;`

### Parameters
#### Path Parameters
- **id** (string | number) - Required - The ID of the target column

### Returns
The method returns an array that stores data objects of all cards in the specific column.

### Example
```jsx
// create Kanban
const board = new kanban.Kanban("#root", {
    columns,
    cards
});
// get data objects of all card within the column with the 1 ID
const cards_data = board.getColumnCards(1);
console.log(cards_data);
```
```

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

### Initializing Kanban Board with Fetched Data

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

Fetches initial data for cards, columns, links, and rows, then initializes the Kanban board. It also sets up the RestDataProvider for saving data back to the server.

```javascript
// widget initialization...
Promise.all([
    restProvider.getCards(),
    restProvider.getColumns(),
    restProvider.getLinks(),
    restProvider.getRows(),
]).then(([cards, columns, links, rows]) => {
    const board = new Kanban("#root", {
        cards,
        columns,
        links,
        rows,
        rowKey: "row",
        cardShape,
        editorShape,
    });

    // save data from client to server
    board.api.setNext(restProvider);
    
    // multiuser initialization...
});
```

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

### getAreaCards()

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

Gets an array with data objects of all cards of the specified column (and row).

```APIDOC
## getAreaCards(columnId, rowId)

### Description
Gets an array with data objects of all cards of the specified column (and row).

### Method Signature
`getAreaCards(columnId: string | number, rowId?: string | number): array;`

### Parameters
#### Path Parameters
- **columnId** (string | number) - Required - the ID of the target column
- **rowId** (string | number) - Optional - the ID of the target row

### Returns
The method returns an array with data objects of the cards.

### Example
```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");
```
```

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

### getSelection()

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

Gets an array with the IDs of the currently selected cards in the Kanban board.

```APIDOC
## getSelection()

### Description
Gets an array with ID(s) of the selected card(s).

### Method
`getSelection(): array;`

### Returns
The method returns an array with ID(s) of the selected card(s).

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

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

### GET /uploads

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

Retrieves a list of uploads. This endpoint is used to fetch all upload data.

```APIDOC
## GET /uploads

### Description
Retrieves a list of uploads. This endpoint is used to fetch all upload data.

### Method
GET

### Endpoint
/uploads
```

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

### GET /rows

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

Retrieves a list of rows. This endpoint is used to fetch all row data.

```APIDOC
## GET /rows

### Description
Retrieves a list of rows. This endpoint is used to fetch all row data.

### Method
GET

### Endpoint
/rows
```

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

### Initialize Kanban and Toolbar Components

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

Set up containers using refs and initialize the DHTMLX Kanban and Toolbar components within the Vue component's mounted lifecycle hook. The Toolbar is configured to use the Kanban's inner API.

```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>
```

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

### 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 is intended for working with the server.

```APIDOC
## getUsers()

### Description
Gets a promise with the users data.

### Method
GET

### Endpoint
(See example for backend URL)

### Returns
A promise with the users data.

### Request 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);
});
```
```

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

### Initialize Kanban with Toolbar

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

Initialize both the Kanban board and its associated Toolbar. The Toolbar requires the `api` property set to the Kanban instance's API to link them.

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

new kanban.Toolbar("#toolbar", {
    api: board.api, // required: links Toolbar controls to the Kanban instance
    // other configuration properties
});
```

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

### serialize()

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

Serializes the Kanban data to JSON. This method can be used to get the current state of the Kanban board.

```APIDOC
## serialize()

### Description
Serializes the Kanban data to JSON.

### Method
`serialize(): object;`

### Returns
The method returns the object of Kanban data.

#### Response Example
```json
{
    "cards": [{...}, {...}, ...],
    "rows": [{...}, {...}, ...],
    "columns": [{...}, {...}, ...],
    "links": [{...}, {...}, ...]
}
```

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

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

### Parsing Data into Kanban

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

Shows how to initialize a Kanban board and then parse data for columns, cards, rows, and links into it using the parse() method. This is a common way to load initial data.

```javascript
// 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 });
```

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

### api.getReactiveState()

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

Gets an object with the reactive properties of Kanban. The returned state properties are readonly and should not be modified directly.

```APIDOC
## api.getReactiveState()

### Description
Gets an object with the reactive properties of Kanban.

### Method
`api.getReactiveState(): object;`

### Returns
An object with the following reactive properties:
- **cardHeight** (object) - Reactive property for card height.
- **cardShape** (object) - Reactive property for card shape.
- **cards** (object) - Reactive property for cards.
- **columnKey** (object) - Reactive property for column key.
- **columnShape** (object) - Reactive property for column shape.
- **columns** (object) - Reactive property for columns.
- **currentUser** (object) - Reactive property for the current user.
- **history** (object) - Reactive property for history.
- **links** (object) - Reactive property for links.
- **readonly** (object) - Reactive property for readonly status.
- **rowKey** (object) - Reactive property for row key.
- **rowShape** (object) - Reactive property for row shape.
- **editorShape** (object) - Reactive property for editor shape.
- **rows** (object) - Reactive property for rows.
- **search** (object) - Reactive property for search.
- **selected** (object) - Reactive property for selected items.
- **sort** (object) - Reactive property for sort settings.

:::warning
These state properties are readonly. Do not change them to avoid unexpected behavior!
:::

### Example
```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);
});
```
```

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

### Kanban Root Container Setup

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

Mark the root container with 'data-wx-root="true"' to enable DHTMLX Kanban and Toolbar detection within Salesforce. Nested elements with 'data-wx-portal-root="1"' serve as component containers.

```html
<template>
    <div id="wx-root" data-wx-root="true" class="kanban-wrapper" tabindex="0">
        <div class="sf_toolbar" lwc:dom="manual" data-wx-portal-root="1"></div>
        <div class="sf_kanban" lwc:dom="manual" data-wx-portal-root="1"></div>
    </div>
</template>
```

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

### Clone DHTMLX Kanban Documentation Repository

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

Clone the documentation repository to your local machine and navigate into the directory.

```bash
$ git clone git@github.com:DHTMLX/docs-kanban.git
$ cd docs-kanban
```

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

### Navigate to Project Directory

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

Change the current directory to your newly created Svelte project. This is necessary before installing dependencies.

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

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

### Kanban updateRow() Method Before v1.3

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

Example of updating a row in Kanban before version 1.3. The 'replace' parameter was not available.

```javascript
updateRow({
    id: "feature",
    row: {
        label: "Updated row",
        collapsed: true
    },
});
```

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

### Kanban updateColumn() Method Before v1.3

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

Example of updating a column in Kanban before version 1.3. The 'replace' parameter was not available.

```javascript
updateColumn({
    id: "backlog",
    column: {
        label: "Updated column",
        limit: 3,
        strictLimit: 3,
        collapsed: true
    }
});
```

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

### Load Data into Kanban

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

Use setConfig() or parse() to load initial data like columns, cards, and rows into the Kanban board after it has been initialized. Ensure the Kanban instance is created before calling these methods.

```javascript
const board = new kanban.Kanban("#root", {});

// load data into Kanban
board.setConfig({ columns, cards, rows });

// or board.parse({ columns, cards, rows });
```

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

### Kanban updateCard() Method Before v1.3

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

Example of updating a card in Kanban before version 1.3. The 'replace' parameter was not available.

```javascript
updateCard({
    id: 1,
    card: {
        label: "New Label",
        row: "feature",
        column: "inprogress",
        /*other parameters*/
    }
});
```