extendedDataTable context menu with dynamic disabled menuItem feature

Version 1

    My problem was to add context menu to the extendedDataTable row with disabled items depending on the selected row. rich:extendedDataTable does not support oncontextmenu event so that I could not use a4j:support with event="oncontextmenu". My solution is:

     

    h1. 1. Define context menu

    {code:xml}

    <rich:contextMenu attached="false"

      id="myContextMenu"

      submitMode="ajax"

      showDelay="0">

         <rich:menuItem disabled="#{Menu.item1disabled}" value="Item 1"/>

         <rich:menuItem disabled="#{Menu.item2disabled}" value="Item 2"/>

    </rich:contextMenu>

    {code}

    This is standard contextMenu.

     

    h1. 2. Define the table

    {code:xml}

    <rich:extendedDataTable var="r" value="#{data}" id="data">

         <rich:column>

              <h:panelGroup>

                   <h:inputHidden id="rowId" value="#{r.id}"/>

                   <h:outputText value="#{r.value1}"/>

              <h:panelGroup>
         </rich:column>
    </rich:extendedDataTable>

    {code}

    The table does not have context menu attached yet. Notice  <h:inputHidden id="rowId" value="#{r.id}"/>. This element holds the value we will use to identify selected row in the code bellow.

     

    h1. 3. Rerender function for the menu

    {code:xml}

    <a4j:jsFunction name="myRowSelect"

         action="#{Menu.select}"

         ajaxSingle="true"

         immediate="true"

         reRender="myContextMenu"

         oncomplete="#{rich:component('myContextMenu')}.show(lastEvent, {})">

         <a4j:actionparam name="param1" assignTo="#{Menu.selected}"/>

    </a4j:jsFunction>

    {code}

    This code tells which item is selected and we can render menu for the specified row and then display it.

     

    h1. 4. Java script to find selected row and rerender menu

    {code}

    <script>
    var lastEvent = null;
    function onContextMenu(e) {

      lastEvent = e;

      try {

        // find the row selected and get its "rowId".

        selectedId = (jQuery(e.target).closest("tr").find("input:hidden").get()[0].value);

        // rerender the menu a display it

        myRowSelect(selectedId);

      } catch(ex) {

        alert("Failed: "+ex);

      }

      return false;

    }

    </script>

    {code}

     

     

    h1. 5. Bind the functions and menu to the table

    {code:xml}<rich:jQuery name="myContextMenuFunc"

         timing="onload"

         query='bind("contextmenu",function(e) {return onContextMenu(e);})'

         selector="#data"/>

    {code}

    This code binds the context menu (right mouse click in the table) to the table.

     

    And thats all folks.

     

    I hope it will help.