3 Replies Latest reply on Oct 24, 2008 5:42 AM by ilya_shaikovsky

    Asking for help on rich:contextMenu & rich:componentControl

    stefand

      I am running into some problems implementing the desired behaviour with the components above and would be grateful for some input. I think I am pushing things and the conclusion maybe that this is not a viable approach. Any feedback is welcome really!

      I am implementing a view of the items that my site manages. These items are hierarchically structured. My page shows a rich:dataTable providing a list of items at a given level in the hierarchy. The view is supposed to work like a file system explorer:

      a) clicking on an item allows drilling down into the next level (items are displayed using a4j:commandLink);
      b) right-click brings up a rich:contextMenu with actions that can be performed on the item such as "delete", "view settings", etc.;
      c) in addition those items can be dragged to another view supporting actions like "move", "copy", "delete", etc.

      I am experiencing the following problems:

      1) When triggering a rich:contextMenu on an item in the displayed list with event="oncontextmenu", the menu comes up fine but when I select any menu item I find myself dragging the selected item as well. I did not find a way to avoid this.

      2) I tried an alternative approach using rich:componentControl for the rich:dataTable displaying my items triggered using event="onRowClick": I am overloading the click event and with every click on the items I also trigger the menu, hence the drill down does not work as expected. In addition, I have not figured out how I can actually pass anything else then simple string parameters to the menu controlled by rich:componentControl.

      3) Ideally, I would like to trigger (different) context menus both on each item shown in the table as well as the panel that contains those items. In order, to do this I would of course have to be able to determine where that click occured. But I have not been able to find any pointers about that.

      I would be extremely grateful for any pointers on how to remedy this or possible alternative approaches.

      Stefan

        • 1. Re: Asking for help on rich:contextMenu & rich:componentCont
          nbelaevski

          Hi,

          1. Can you please post page code you use for DnD so we can check?

          2. String parameters should be enough to customize menu as you wish. E.g. use style="display: {itemDisplay}" with 'block' and 'none' values to show/hide some items.

          3. You can show contextMenu using JavaScript:

          document.getElementById('form:menuId').component.show(event, {})


          Use
          Event.element(event)
          prototype.js function to obtain element that fired event.

          • 2. Re: Asking for help on rich:contextMenu & rich:componentCont
            stefand

            Thanks for the feedback. I have attached the DnD code below (stripped to the bare essentials).
            Apart from that version, I have also tried to move the menu out of the enclosing rich:dragSupport and instead attachTo the draggable item in the dataTable, but the result is the same: When I select an action from the context menu, I find myself dragging the item that the menu is attached to.

            "nbelaevski" wrote:
            Hi,
            1. Can you please post page code you use for DnD so we can check?


            <h:form>
             <rich:panel>
             <rich:dropSupport
             id="dropZone"
             acceptedTypes="#{myBean.acceptedTypes}"
             dropListener="#{myBean.drop}">
             </rich:dropSupport>
            
             <rich:dataTable
             id="myDataTable"
             value="#{myBean.tableContent}"
             rows="10"
             var="f">
            
             <h:column>
             <rich:dragSupport
             dragType="#{f.dragType}"
             dragValue="#{f}"
             dragIndicator=":indicator">
             <rich:dndParam name="label" value="#{f.label}"/>
            
             <a4j:outputPanel
             rendered="#{myBean.renderCondition}">
            
             <a4j:commandLink
             action="#{myBean.selectAction(f)}"
             value="#{f.label}">
             </a4j:commandLink>
            
             <!-- CONTEXT MENU -->
             <rich:contextMenu
             id="myContextMenu"
             hideDelay="0"
             event="oncontextmenu"
             submitMode="ajax">
             <rich:menuItem
             action="#{myBean.menuActionOne(f)}"
             value="Action ONE">
             </rich:menuItem>
             <rich:menuItem
             action="#{myBean.menuActionTwo(f)}"
             value="Action TWO">
             </rich:menuItem>
            
             </rich:contextMenu>
            
             </a4j:outputPanel>
            
             </rich:dragSupport>
            
             </h:column>
             </rich:dataTable>
             </rich:panel>
            </h:form>
            


            Stefan

            • 3. Re: Asking for help on rich:contextMenu & rich:componentCont
              ilya_shaikovsky

               

               <rich:column>
               <f:facet name="header">
               Make
               </f:facet>
               <a4j:outputPanel id="draggable">
               <rich:dragSupport dragType="tye" dragIndicator=":indicator"></rich:dragSupport>
               <h:outputText value="#{car.make}"/>
               <rich:contextMenu event="oncontextmenu">
               <rich:menuItem value="123123" onmousedown="Event.stop(event)"></rich:menuItem>
               </rich:contextMenu>
               </a4j:outputPanel>
               </rich:column>
              
              


              this seems works as you need. You could drag the item but the drag will be disabled within menu.