DayPilot.Kanban.update

The update() method applies configuration or data changes and redraws the Kanban component.

Declaration

DayPilot.Kanban.update([options])

Parameters

• options (DayPilot.KanbanConfig) - optional object with properties and event handlers to update

Notes

You can update the board in two ways: modify properties directly and call update(), or pass a set of changes using the optional options parameter.

The wrapper components update the underlying Kanban when the bound config or data props change.

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" }
  ],
  // ...
});
kanban.init();

// update: apply changed properties and redraw.
kanban.update({
  cards: [
    { id: 1, name: "Task 1", column: "2", text: "Prepare the first draft" }
  ]
});

Angular

<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" }
  ]
};

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

React

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

<DayPilotKanban
  cards={cards}
  {/* ... */}
/>

setCards([
  { id: 1, name: "Task 1", column: "2", text: "Prepare the first draft" }
]);

Vue

<DayPilotKanban
  :cards="cards"
  <!-- ... -->
/>

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

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

See Also

• DayPilot.Kanban.init

• DayPilot.Kanban.cards.list

• DayPilot.Kanban.columns.list

• DayPilot.Kanban.swimlanes.list

• DayPilot.Kanban Class