arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
Kanban
Board dragging allows users to reorder entire boards (columns) by dragging them to a new position. Use the dragBoards attribute to enable/disable this feature, and the dragBoard / dragendBoard events to react to board drag operations.
Source

<p:growl id="growl" showDetail="true" />

    <div style="margin-bottom:8px">
        <p:outputLabel for="dragBoards" value="Board Dragging" styleClass="font-bold" style="margin-right:8px" />
        <p:selectOneMenu id="dragBoards" value="#{kanbanBoardDragController.dragBoards}" style="width:120px">
            <f:selectItem itemLabel="Enabled" itemValue="true" />
            <f:selectItem itemLabel="Disabled" itemValue="false" />
            <p:ajax update="kanban" process="@this" />
        </p:selectOneMenu>
    </div>

    <pe:kanban id="kanban"
                widgetVar="kanbanBoardDragWidget"
                value="#{kanbanBoardDragController.columns}"
                draggable="true"
                dragBoards="#{kanbanBoardDragController.dragBoards}"
                style="height:450px">
        <p:ajax event="drop" listener="#{kanbanBoardDragController.onDrop}" update="growl" />
        <p:ajax event="dragBoard" listener="#{kanbanBoardDragController.onDragBoard}" update="growl" />
        <p:ajax event="dragendBoard" listener="#{kanbanBoardDragController.onDragendBoard}" 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