The init() method initializes and renders the Kanban control.

Call it only once after the initial configuration and data are ready.

Declaration

DayPilot.Kanban.init()

Notes

In plain JavaScript, call init() after assigning the initial columns and cards.

The Angular, React, and Vue wrapper components initialize the underlying Kanban automatically when the component is rendered.

Examples

JavaScript

const kanban = new DayPilot.Kanban("dp", {
  columns: [
    { name: "Analysis", id: "1" },
    { name: "Draft", id: "2" }
  ],
  cards: [
    { id: 1, name: "Task 1", column: "1", text: "Prepare the first draft" }
  ],
  // ...
});

// init: render the component after configuration is complete.
kanban.init();

Angular

The Angular wrapper initializes the control automatically.

<daypilot-kanban [config]="config"></daypilot-kanban>
config: DayPilot.KanbanConfig = {
  columns: [
    { name: "Analysis", id: "1" },
    { name: "Draft", id: "2" }
  ],
  cards: [
    { id: 1, name: "Task 1", column: "1", text: "Prepare the first draft" }
  ]
};

React

The React wrapper initializes the control automatically.

<DayPilotKanban
  columns={[
    { name: "Analysis", id: "1" },
    { name: "Draft", id: "2" }
  ]}
  cards={[
    { id: 1, name: "Task 1", column: "1", text: "Prepare the first draft" }
  ]}
  {/* ... */}
/>

Vue

The Vue wrapper initializes the control automatically.

<DayPilotKanban
  :columns="columns"
  :cards="cards"
  <!-- ... -->
/>
const columns = [
  { name: "Analysis", id: "1" },
  { name: "Draft", id: "2" }
];

const cards = [
  { id: 1, name: "Task 1", column: "1", text: "Prepare the first draft" }
];

See Also

Availability

Availability of this API item in DayPilot editions:

ProductLitePro
DayPilot for JavaScript