1 2 Previous Next 15 Replies Latest reply on Dec 23, 2009 5:33 PM by tvictor

    dynamic context menu in datatable - problem with event and a

    asiandub

      hi there,

      i'm trying to implement a dynamicly created contextmenu, called from within a datatable.

      my problem is


      (a) i dont get my code to work on the "oncontextmenu" event
      (b) i dont get the right property in my backing bean


      here is the relevant code-snippet (taken and modified from max katz's "practical richfaces", chapter 9, menu components):

      <rich:datatable...>
      ...
      <rich:contextMenu submitMode="ajax" id="cm"
       binding="#{contextMenuHelper.contextMenu}"/>
      ...
      <rich:column
       <f:facet name="header">
      ...
       </f:facet>
       <h:graphicImage ... />
       <rich:toolTip... />
      <a4j:support event="oncontextmenu"
       oncomplete="#{rich:component('cm')}.doShow(event, {})"
       actionListener="#{myAction.myListener}" reRender="cm" >
       <f:setPropertyActionListener value="#{myItem}"
       target="#{myAction.item}" />
      </a4j:support>
      </rich:column>
      ...
      </rich:datatable>
      
      


      (i'm using Seam, that's why the contextMenuHelper is EVENT-scoped and holds the dynamically rendered context-menu)

      Okay, back to my problems:


      - if i rightclick in the column, no methods are called at all, and i get a tiny, empty context-menu (just 2 pixels or so)

      - if i change the event of the a4j-support to "onclick", the a4j action listener is called, but before the property action listener sets its value - obviously resulting in a NPE

      - if i change my bean-code to be NPE-safe, for the sake of the example, i see that the context menu is dynamically created, but not for actual clicked data row, but for the last one... (as expected)


      any ideas what is wrong?

      cheers,
      jan



        • 1. Re: dynamic context menu in datatable - problem with event a
          nbelaevski

          Hi Jan,

          - You should set

          <rich:contextMenu attached="false" ...>
          if you are going to show it using JS API. Also rich:column doesn't support "oncontextmenu" event, that's why methods aren't called

          - Use f:actionListener tag and put it after f:setPropertyActionListener or use action instead of actionListener

          - Add a4j:outputPanel wrapping rich:column content and attach a4j:support activating menu to it.

          • 2. Re: dynamic context menu in datatable - problem with event a
            asiandub

            Hi Nick,

            thanks a lot for answering, you really helped me out.

            I do not understand what you mean with


            Use f:actionListener tag and put it after f:setPropertyActionListener...

            but I understood

            ... or use action instead of actionListener


            that works like a charm...

            thanks again :-)

            Jan

            ps: (if you dont mind, I'd be really interested in more details of the first variant)


            • 3. Re: dynamic context menu in datatable - problem with event a
              nbelaevski

              Jan,

              Here it is:

              <a4j:support event="oncontextmenu"
               oncomplete="#{rich:component('cm')}.doShow(event, {})"
               reRender="cm" >
               <f:setPropertyActionListener value="#{myItem}"
               target="#{myAction.item}" />
               <f:actionListener binding="#{myAction}" />
              </a4j:support>


              The drawback is that "myAction" should implement ActionListener interface, thus cannot have more than one listener per class.

              • 4. Re: dynamic context menu in datatable - problem with event a
                asiandub

                Hey Nick,

                thanks again :-)

                I guess I wasn't precise enough when I wrote that I don't understand your proposal: What I meant was: I don't understand how it works... ;-)

                - What is does the extra f:actionListener change? if it ensures that f:setPropertyActionListener fires before a4j:support calls, then why?

                it would be extremely nice if you or someone else could fill this gap...

                cheers,
                Jan

                ps: As I took my code from Max Katz' book, I wonder if the given example would work or not - I reckon they run into the same problem (a4j:support calling the actionlistener before f:spal sets the value)...

                • 5. Re: dynamic context menu in datatable - problem with event a
                  nbelaevski

                  Jan,

                  First listener defined by "actionListener" attribute is called, then all nested listeners in the order of their definition and then "action" is called after all listeners. So, explicitly defining that f:actionListener should be executed after f:setPropertyActinListener does the trick.

                  • 6. Re: dynamic context menu in datatable - problem with event a
                    asiandub

                    thanks Nick!

                    • 7. Re: dynamic context menu in datatable - problem with event a

                      I am facing the same issue. I get 2 pixel context menu. Could you please paste the full xhtml code here?

                      It will be very helpful if you can do that.

                      • 8. Re: dynamic context menu in datatable - problem with event a

                        Thanks Nick and Jan. I am able to create the context menu dynamically at server side.

                        But I am facing 2 issues.
                        1. I can not get it to work on oncontextmenu action, I am corrently using onclick event. Can you please explain me what I need to do to use oncontextmenu?

                        2. The onclick works only for one column. How do I apply the context menu for the entire row?

                        I am pasting the xhtml code below.
                        Thank you in advance.

                        <rich:column sortable="false" width="90px" label="Im tracking number">
                        <f:facet name="header">
                        <ui:include src="layout/sort.xhtml">
                        <ui:param name="entityList" value="#{imMethodDataList}"/>
                        <ui:param name="propertyLabel" value="Im tracking number"/>
                        <ui:param name="propertyPath" value="imMethodData.id.imTrackingNumber"/>
                        </ui:include>
                        </f:facet>
                        <h:panelGrid id="imTrackingNumber">
                        <a4j:support event="onclick" oncomplete="#{rich:component('cm')}.doShow(event, {})" reRender="cm" action="#{imMethodDataList.cmListener()}">
                        <f:setPropertyActionListener value="#{_imMethodData}" target="#{imMethodDataList.select}" />
                        </a4j:support>
                        <h:outputText value="#{_imMethodData.id.imTrackingNumber}"/>
                        </h:panelGrid>

                        </rich:column>

                        • 9. Re: dynamic context menu in datatable - problem with event a
                          nbelaevski

                          Hi,

                          Try "onRowContextMenu" event of rich:dataTable.

                          • 10. Re: dynamic context menu in datatable - problem with event a

                            Thanks for replying.

                            I tried this.
                            On rich:dataTable but it does not work. Do I have to write some javascript?
                            onRowContextMenu="#{imMethodDataList.cmListener()}"

                            • 11. Re: dynamic context menu in datatable - problem with event a

                              Thanks for replying

                              on extenedDataTable I tried the following code
                              onRowContextMenu="#{imMethodDataList.cmListener()}"

                              But it is not calling the server side method. Do I have to write a javascript?

                              • 12. Re: dynamic context menu in datatable - problem with event a
                                Can anybody tell me how to invoke the action using oncontextmenu event
                                • 13. Re: dynamic context menu in datatable - problem with event a
                                  ilya_shaikovsky
                                  With onRowContextMenu you defining client side handler(the same as standard onclick, onkeyup and so on works). So pointing it to server side action - will do nothing. Use a4j:support on this event or a4j:jsFunction to rise ajax request and define action at one of these components.
                                  • 14. Re: dynamic context menu in datatable - problem with event a
                                    bolsover

                                    Does this help...

                                     


                                        <h:form>
                                            <div align="left">
                                                <rich:dataTable onRowMouseOver="this.className='highlight'"
                                                                onRowMouseOut="this.className='normal'"
                                                                width="100%"
                                                                id="contactTable"
                                                                sortMode="single"
                                                                value="#{ContactListBean.contacts}"
                                                                reRender="ds"
                                                                var="contact"
                                                                rows="20">

                                                    <f:facet name="header"><h:outputText value="Contact Table"/></f:facet>
                                                   
                                                    <rich:column ....
                                                    ..

                                                    </rich:column>


                                                   
                                                    <%-- component control for this table --%>
                                                    <rich:componentControl event="onRowClick" for="menu" operation="show">
                                                        <f:param name="rowid" value="#{contact.rowid}" ></f:param>
                                                        <f:param name="usercode" value="#{contact.usercode}" ></f:param>

                                                    </rich:componentControl>
                                                    <f:facet name="footer">
                                                        <rich:datascroller id="ds" align="center" for="contactTable" maxPages="20" />
                                                    </f:facet>
                                                </rich:dataTable>
                                          
                                        </h:form>
                                        <h:form >
                                            <rich:contextMenu styleClass="normal" attached="false" id="menu" submitMode="server" >
                                                <rich:menuItem   icon="/images/icons/edit.gif"  immediate="true" action="#{CustomerContactBean.actionEditContact}" >
                                                    <h:outputText value="Edit {usercode}" ></h:outputText>
                                                    <a4j:actionparam name="rowid" value="{rowid}" ></a4j:actionparam>
                                                </rich:menuItem>
                                            </rich:contextMenu>
                                        </h:form>

                                    1 2 Previous Next