PrimeFaces ContextMenu on row hover

Question

I am trying to implement a ContextMenu that appears when mouse is over a row. I was able to implement the context menu on selected row, but could not find an event for hover. Do I have to write my own implementation for data table, or is there a way to attach the context menu to a hover event?

Answer 1

Primefaces's contextMenu doesn't have option to get that, so you can use jquery to do that. If you want to show contextMenu, you have to change contextMenu's position to Mouse's position(page load contextMenu by default, but it have css display:none, so you need change css). Primefaces's contextMenu have widgetvar attribute to use in client(it have method show to show it).

My solution is: when mouse hover on row, it trigger to show menu, when mouse out it change menu's css to display:none. For ex: i have a form(id:form),a datatable(id:cars, data area have default suffix id is _data, it this situation data area have cars_data), a contextMenu(id:xxx) (You can set Mouse hover and Mouse out in jquery via mouseover and mouseout)

    <h:form id="form">
        <p:contextMenu id="xxx" widgetVar="men">
            <p:menuitem title="zzzz" value="xxx">
            </p:menuitem>
        </p:contextMenu>
        <style type="text/css">
            .testcss{
                display: none !important;
            }
        </style>
        <script type="text/javascript">
            //<![CDATA[
            $(document).on('mouseover', '#form\\:cars_data', function(e) {
                $(PrimeFaces.escapeClientId('form:xxx')).css({
                    top: e.pageY+'px',
                    left: e.pageX+'px'                        
                }).show();
            }); 
            $(document).on('mouseout', '#form\\:cars_data', function(e) {
                $(PrimeFaces.escapeClientId('form:xxx')).attr('style','display:none');
            }); 
            //]]>
        </script>
        <p:dataTable id="cars"  >  
           ...
        </p:dataTable>
    </h:form>