DayPilot.Kanban.onBeforeColumnHeaderRender

The onBeforeColumnHeaderRender event handler fires before the JavaScript Kanban component renders a column header cell. You can use it to customize the header content.

Declaration

DayPilot.Kanban.onBeforeColumnHeaderRender(args)

Parameters

• args.column (object) - column details; args.column.data contains the source column data object

• args.header.areas (array) - active areas displayed in the column header

• args.header.backColor (string) - custom header background color

• args.header.cssClass (string) - custom CSS class for the header cell

• args.header.text (string) - if args.header.html is null, this text is HTML-encoded and displayed in the header

• args.header.html (string) - overrides the default text with raw HTML; the default value is null

• args.header.toolTip (string) - tooltip text

Notes

Use args.header.text when you want encoded text output, or set args.header.html when you need raw HTML. You can also add interactive header elements using args.header.areas.

Examples

JavaScript

Kanban config:

const kanban = new DayPilot.Kanban("dp", {
  onBeforeColumnHeaderRender: (args) => {
    args.header.areas = [
      {
        right: 5,
        bottom: 5,
        width: 100,
        height: 30,
        html: "Add",
        cssClass: "add-button",
        onClick: async (args) => {
          const column = args.source;
          const modal = await DayPilot.Modal.prompt("New card name:", "Task");
          if (modal.canceled) {
            return;
          }
          kanban.cards.add({ id: DayPilot.guid(), name: modal.result, column: column.data.id });
        }
      }
    ];
  },
  // ...
});
kanban.init();

Related CSS:

.add-button {
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #eee;
  color: #666;
  text-align: center;
  line-height: 30px;
}

.add-button:hover {
  background-color: #ddd;
}

Angular

<daypilot-kanban [config]="config"></daypilot-kanban>

config: DayPilot.KanbanConfig = {
  onBeforeColumnHeaderRender: (args) => {
    args.header.text = args.column.data.name.toUpperCase();
    args.header.cssClass = "custom-header";
  },
  // ...
};

React

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

const onBeforeColumnHeaderRender = (args) => {
  args.header.text = args.column.data.name.toUpperCase();
  args.header.cssClass = "custom-header";
};

Vue

<DayPilotKanban
  @beforeColumnHeaderRender="onBeforeColumnHeaderRender"
  <!-- ... -->
/>

const onBeforeColumnHeaderRender = (args) => {
  args.header.text = args.column.data.name.toUpperCase();
  args.header.cssClass = "custom-header";
};

See Also

DayPilot.Kanban.onBeforeCardRender

DayPilot.Kanban Class