How can I open a <p:contextMenu> on a <p:timeline>'s event?

UI Components for JSF
Post Reply
alex086
Posts: 4
Joined: 28 Mar 2018, 16:33

19 Feb 2019, 11:34

Hello,

I am using a <p:timeline> component in my project, with a <p:contextMenu> :

Code: Select all

<h:form id="form">
    <p:timeline id="history" value="#{HistoryBean.timeline}" 
                editable="true" eventMargin="10" 
                eventMarginAxis="0" unselectable="true"
                showNavigation="true" showButtonNean="true" 
                stackEvents="false" axisOnTop="true" >
        <p:ajax event="select" listener="#{HistoryBean.onSelectEvent}" process=":form" />
    </p:timeline>
    <p:contextMenu for="history">
        <p:menuitem value="Show details" action="#{HistoryBean.showEventDetails}" />
        <p:menuitem value="Edit" action="#{HistoryBean.editEvent}" />
        <p:menuitem value="Delete" action="#{HistoryBean.deleteEvent}" />
    </p:contextMenu>
</h:form>
Right now, I have to select an event by clicking on an event. I can then do a right click to open the <p:contextMenu>, but it opens no matter where I click in the <p:timeline>. And right clicking on an Event doesn't select it.

My goal is to select an event when right clicking, and having the <p:contextMenu> open only when right clicking on an event, not anywhere in the <p:timeline>.
In fact, I'm trying to achieve the same behavior as on a <p:dataTable> : the right click both selects the line, and opens the context menu.

I've naturally googled it, searched in the Primefaces documentation, but I haven't found anything about right clicking events in a timeline.

Any pointers as to how to tackle this challenge are welcome. Perhaps there's some way to access the Event components that are inside the timeline?

Primefaces : 6.2
JSF : 2.2
Server : Glassfish 4.0

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

19 Feb 2019, 15:22

The first thing to do is to study the TimeLine JavaScript and Widget and see how you add a Jquery handler to make right click select the Event. That is your first goal.

Once you get there we can try and tackle displaying the Context Menu using its widgetVar like PF('contextMenuWidget').show(); to display it.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 9 guests