arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Kanban
Per-board drop restrictions allow you to control which columns items can be dropped into. Use the dragTo property on each column to specify a list of target column IDs. Restricted columns are visually dimmed during a drag operation, and drops to disallowed targets are automatically cancelled.

Items follow a strict workflow: BacklogIn ProgressReviewDone. Drops to disallowed columns are automatically rejected.

Source

<pe:kanban id="kanban"
        widgetVar="kanbanDropRestrictionsWidget"
        value="#{kanbanDropRestrictionsController.columns}"
        draggable="true"
        style="height:450px">
        <p:ajax event="drop" listener="#{kanbanDropRestrictionsController.onDrop}" update="growl" />
    </pe:kanban>
            
Components and more
Documentation pe:kanban
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when Set false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
value List of KanbanColumn objects representing the kanban board columns and items.
style Inline CSS style of the component.
styleClass Style class of the component.
draggable Enable drag-and-drop functionality. Default is true.
addItemButton Enable add item button on each board. Default is false.
extender JavaScript function to extend the widget configuration.
gutter Gutter (spacing) between boards in CSS units, e.g. "15px". Default is 15px.
widthBoard Default width of each board in CSS units, e.g. "250px". Default is 250px.
responsivePercentage If true, boards use percentage-based widths instead of fixed pixel widths. Default is false.
dragBoards Enable dragging of entire boards (columns) to reorder them. Default is true.
bindContextMenu Client-side id of a PrimeFaces contextMenu component to bind to right-click events.
dragHandle Enable drag handle on items. When enabled, only the handle area is draggable, preventing accidental drags on the card body. Default is false.
Events (move mouse over the names to see classes)
Name Description
dropfires when a Kanban item is dropped onto a column
itemAddfires when the add item button is clicked
dragBoardfires when a Kanban board starts being dragged
dragendBoardfires when a Kanban board drag ends
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 15.0.15,PrimeFaces Extensions: 15.0.16-SNAPSHOT,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),Build time: 2026-06-01 17:50