Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

Timeline Nested Grouping and events

This example demonstrate nested groups that are 3 levels deep.

Overlapped Orders
Please choose Orders you want to merge with the Order 0

    
    <style type="text/css">
        div.vis-item-content {
            padding: 4px;
            border-radius: 2px;
            -moz-border-radius: 2px;
        }
    
        div.vis-item.vis-item-range {
            border-width: 0;
        }
    
        #overlappedOrders {
            margin-top: 20px;
            width: 100%;
        }
    
        #overlappedOrders .ui-chkbox {
            vertical-align: middle;
            margin: 3px 5px;
        }
    </style>
    
    <div class="card">
        <h:form id="form">
            <p:growl id="growl" showSummary="true" showDetail="false">
                <p:autoUpdate/>
            </p:growl>
    
            <p:timeline id="timeline" value="#{nestedGroupingTimelineView.model}" var="order" varGroup="truck"
                        editable="true" eventMargin="0" eventMarginAxis="0" stackEvents="false"
                        orientationAxis="top" widgetVar="timelineWdgt">
                <p:ajax event="changed" update="@none" listener="#{nestedGroupingTimelineView.onChange}"/>
                <p:ajax event="delete" update="@none" listener="#{nestedGroupingTimelineView.onDelete}"/>
                <p:ajax event="add" update="@none" onstart="PF('timelineWdgt').cancelAdd()"/>
    
                <f:facet name="group">
                    <h:graphicImage library="demo" name="images/timeline/truck.png" style="vertical-align:middle;"
                                    alt="Truck"/>
                    <h:outputText value="#{truck}" style="font-weight:bold;"/>
                </f:facet>
    
                <h:graphicImage library="demo" name="#{order.imagePath}" rendered="#{not empty order.imagePath}"
                                style="display:inline; vertical-align:middle;" alt="Order"/>
                <h:outputText value="Order #{order.number}"/>
            </p:timeline>
    
            <!-- Dialog with overlapped timeline events -->
            <p:dialog id="overlapEventsDlg" header="Overlapped Orders" widgetVar="overlapEventsWdgt"
                      showEffect="clip" hideEffect="clip">
                <h:panelGroup id="overlappedOrdersInner" layout="block" style="padding:10px;">
                    <strong>
                        Please choose Orders you want to merge with the Order #{nestedGroupingTimelineView.selectedOrder}
                    </strong>
    
                    <p/>
    
                    <p:selectManyMenu id="overlappedOrders" value="#{nestedGroupingTimelineView.ordersToMerge}"
                                      showCheckbox="true">
                        <f:selectItems value="#{nestedGroupingTimelineView.overlappedOrders}" var="order"
                                       itemLabel=" Order #{order.data.number}" itemValue="#{order}"/>
                        <sc:convertOrder events="#{nestedGroupingTimelineView.model.events}"/>
                    </p:selectManyMenu>
                </h:panelGroup>
    
                <f:facet name="footer">
                    <h:panelGroup layout="block" style="text-align:right; padding:2px; white-space:nowrap;">
                        <p:commandButton value="Merge" process="overlapEventsDlg" update="@none"
                                         action="#{nestedGroupingTimelineView.merge}"
                                         oncomplete="PF('overlapEventsWdgt').hide()"/>
                        <p:commandButton type="button" value="Close" onclick="PF('overlapEventsWdgt').hide()"/>
                    </h:panelGroup>
                </f:facet>
            </p:dialog>
        </h:form>
    </div>