12 Replies Latest reply on May 6, 2008 4:46 PM by Dongyao Zhao

    commandButton doesn't work in scrollableDataTable

    Dongyao Zhao Novice

      In scrollableDataTable i can not call the action of the commandButton. This is a bug of richfaces or my faults.

      <rich:scrollableDataTable id="taskTablePaneId"
       height="#{layoutBean.taskTblHeight}"
       width="#{layoutBean.taskTblWidth}"
       value="#{appData.tasks}" var="task" sortMode="single" rows="0"
       selection="#{mainBean.selection}"
       rowClasses="taskRows" columnClasses="taskColumns" >
      <rich:column>
       <f:facet name="header">
       <h:outputText value="Action"/>
       </f:facet>
       <a4j:commandButton image="/images/wrench2-16x16.png"
       disabled="#{task.status!='WAITING'}"
       title="Update" style="font-size:7pt;margin-top:2px"
       action="#{mainBean.takeSelection}"
       oncomplete="Richfaces.showModalPanel('#{mainBean.updateTaskModalPanelId}')">
       </a4j:commandButton>
       </rich:column>
       </rich:scrollableDataTable>
      


      java code
      public AbstractTask takeSelection()
       {
       if(selection != null)
       {
       Iterator keys = getSelection().getKeys();
       while(keys.hasNext())
       {
       SimpleRowKey rowKey = (SimpleRowKey)keys.next();
       int index = rowKey.intValue();
       List<AbstractTask> tasks = AppData.getInstance().getTasks();
       AbstractTask selectedTask = tasks.get(index);
       setSelectedUpdateTask(selectedTask);
       }
       }
       return null;
       }
      


      thanks a lot.

        • 1. Re: commandButton doesn't work in scrollableDataTable
          Ilya Shaikovsky Master

          1) do you have form element around?
          2) do you have rich:messages somewhere on your page?

          • 2. Re: commandButton doesn't work in scrollableDataTable
            Dongyao Zhao Novice

            very thanks for your answer, with form element around the column works well. But i have another problem by drag and drop with rich:scrollableDataTable. it shows, that only the first line can be dragged from the table. the remainder can not be dragged. with debug i have found, all lines with the same id. what do cause the error.

            
            <rich:scrollableDataTable id="pidTablePaneId"
             rowKeyVar="p" frozenColCount="1"
             height="#{layoutBean.freePidTblHeight}"
             width="#{layoutBean.freePidTblWidth}"
             value="#{appData.freePids}" var="pid" sortMode="single" rows="40"
             rowClasses="taskRows" columnClasses="taskColumns">
            
             <rich:column id="pidstreamTypeId">
             <f:facet name="header">
             <h:outputText value="Stream Type"/>
             </f:facet>
             <a4j:outputPanel layout="block">
             <rich:dragIndicator id="indicator" />
             <h:outputText value="#{pid.streamType}" />
             <rich:dragSupport dragIndicator=":indicator"
             dragType="PID" dragValue="#{pid}">
             <rich:dndParam name="label" value="#{pid.streamType}" />
             </rich:dragSupport>
             </a4j:outputPanel>
             </rich:column>
            </rich:scrollableDataTable>
            </h:form>
            


            around the table the css files are used.

            • 3. Re: commandButton doesn't work in scrollableDataTable
              Dongyao Zhao Novice

              sorry, i have written wrong. i have no form neither rich:messages around the table. I want to getting a modalpanel id from backing bean through the action .

              action="#{mainBean.takeSelection}"
               oncomplete="Richfaces.showModalPanel('#{mainBean.updateTaskModalPanelId}')">

              Problem:
              1. can not call the action
              2. with others methods i have getted the modalpanel id, but it doesn't show the modal panel. Error messages is (with debug) :
              panel has no properties
              [Break on this error] panel.component.show(event, opts);

              thanks.

              p.s i have tested with form around the table, but don't work.



              • 4. Re: commandButton doesn't work in scrollableDataTable
                Ilya Shaikovsky Master

                could you just check our demo sample. It almost the same but working.

                • 5. Re: commandButton doesn't work in scrollableDataTable
                  Dongyao Zhao Novice

                  yes, it working fine. But in demo the commandbutton lies outer the table.

                  • 6. Re: commandButton doesn't work in scrollableDataTable
                    Ilya Shaikovsky Master

                    Unfortunatelly nothing changed while using it inside for me. working the same..

                    • 7. Re: commandButton doesn't work in scrollableDataTable
                      Dongyao Zhao Novice

                      the structure by me looks like:
                      body
                      ------h:form
                      --------------a4j:region
                      -------------------------- rich:scrollableDataTable
                      ------------------------------------------------------<rich:column>
                      -----------------------------------------------------------------------<rich:commandButton and modalpanel>

                      • 8. Re: commandButton doesn't work in scrollableDataTable
                        Ilya Shaikovsky Master

                         

                        <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                         xmlns:ui="http://java.sun.com/jsf/facelets"
                         xmlns:h="http://java.sun.com/jsf/html"
                         xmlns:f="http://java.sun.com/jsf/core"
                         xmlns:a4j="http://richfaces.org/a4j"
                         xmlns:rich="http://richfaces.org/rich">
                        
                        
                         <h:form>
                         <rich:spacer height="30" />
                         <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1"
                         height="400px" width="700px" id="carList" rows="40"
                         columnClasses="col" value="#{dataTableScrollerBean.allCars}"
                         var="category" sortMode="single"
                         binding="#{dataTableScrollerBean.table}"
                         selection="#{dataTableScrollerBean.selection}">
                        
                         <rich:column id="make">
                         <f:facet name="header">
                         <h:outputText styleClass="headerText" value="Make" />
                         </f:facet>
                         <h:outputText value="#{category.make}" />
                         </rich:column>
                         <rich:column id="model">
                         <f:facet name="header">
                         <h:outputText styleClass="headerText" value="Model" />
                         </f:facet>
                         <h:outputText value="#{category.model}" />
                         </rich:column>
                         <rich:column id="price">
                         <f:facet name="header">
                         <h:outputText styleClass="headerText" value="Price" />
                         </f:facet>
                         <h:outputText value="#{category.price}" />
                         </rich:column>
                         <rich:column id="mileage">
                         <f:facet name="header">
                         <h:outputText styleClass="headerText" value="Mileage" />
                         </f:facet>
                         <h:outputText value="#{category.mileage}" />
                         </rich:column>
                         <rich:column width="200px" id="vin">
                         <f:facet name="header">
                         <h:outputText styleClass="headerText" value="VIN" />
                         </f:facet>
                         <h:outputText value="#{category.vin}" />
                         </rich:column>
                         <rich:column id="stock">
                         <f:facet name="header">
                         <h:outputText styleClass="headerText" value="Stock" />
                         </f:facet>
                         <h:outputText value="#{category.stock}" />
                         </rich:column>
                         <rich:column>
                         <a4j:commandButton value="Show Current Selection" reRender="table"
                         action="#{dataTableScrollerBean.takeSelection}"
                         oncomplete="javascript:Richfaces.showModalPanel('panel');"
                         onclick="event.stop(event)" />
                        
                         </rich:column>
                         </rich:scrollableDataTable>
                         <rich:spacer height="20px" />
                         <a4j:commandButton value="Show Current Selection" reRender="table"
                         action="#{dataTableScrollerBean.takeSelection}"
                         oncomplete="javascript:Richfaces.showModalPanel('panel');" />
                         </h:form>
                         <rich:modalPanel id="panel" autosized="true">
                         <f:facet name="header">
                         <h:outputText value="Selected Rows" />
                         </f:facet>
                         <f:facet name="controls">
                         <span style="cursor: pointer"
                         onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
                         </f:facet>
                         <rich:dataTable value="#{dataTableScrollerBean.selectedCars}"
                         var="sel" id="table">
                         <rich:column>
                         <f:facet name="header">
                         <h:outputText value="Make" />
                         </f:facet>
                         <h:outputText value="#{sel.make}" />
                         </rich:column>
                         <rich:column id="model">
                         <f:facet name="header">
                         <h:outputText value="Model" />
                         </f:facet>
                         <h:outputText value="#{sel.model}" />
                         </rich:column>
                         <rich:column id="price">
                         <f:facet name="header">
                         <h:outputText value="Price" />
                         </f:facet>
                         <h:outputText value="#{sel.price}" />
                         </rich:column>
                         <rich:column id="mileage">
                         <f:facet name="header">
                         <h:outputText value="Mileage" />
                         </f:facet>
                         <h:outputText value="#{sel.mileage}" />
                         </rich:column>
                         <rich:column id="stock">
                         <f:facet name="header">
                         <h:outputText value="Stock" />
                         </f:facet>
                         <h:outputText value="#{sel.stock}" />
                         </rich:column>
                         </rich:dataTable>
                         </rich:modalPanel>
                        </ui:composition>
                        


                        this works fine for me under current 3.2.1 snapshot(outside and inside buttons shows right selection, only selection). this is just changed demosite example page. (do not pay attention to event.stop, it's used in order no to loose selection)

                        • 9. Re: commandButton doesn't work in scrollableDataTable
                          Dongyao Zhao Novice

                          thank you very much. Many problems are caused by layout?

                          • 10. Re: commandButton doesn't work in scrollableDataTable
                            Dongyao Zhao Novice

                            No, it doesn't work yet.:(

                            • 11. Re: commandButton doesn't work in scrollableDataTable
                              Dongyao Zhao Novice

                              with debug i have found, the rich:scrollableDataTable can not generate the row id, all rows with the same id, so i can drag only the first row. what causes the problem? i have wirttten a javascript function, which generates the id for all rows, then i can drag all rows.

                              • 12. Re: commandButton doesn't work in scrollableDataTable
                                Dongyao Zhao Novice

                                the above question is for.

                                "darmstadter" wrote:
                                very thanks for your answer, with form element around the column works well. But i have another problem by drag and drop with rich:scrollableDataTable. it shows, that only the first line can be dragged from the table. the remainder can not be dragged. with debug i have found, all lines with the same id. what do cause the error.
                                
                                <rich:scrollableDataTable id="pidTablePaneId"
                                 rowKeyVar="p" frozenColCount="1"
                                 height="#{layoutBean.freePidTblHeight}"
                                 width="#{layoutBean.freePidTblWidth}"
                                 value="#{appData.freePids}" var="pid" sortMode="single" rows="40"
                                 rowClasses="taskRows" columnClasses="taskColumns">
                                
                                 <rich:column id="pidstreamTypeId">
                                 <f:facet name="header">
                                 <h:outputText value="Stream Type"/>
                                 </f:facet>
                                 <a4j:outputPanel layout="block">
                                 <rich:dragIndicator id="indicator" />
                                 <h:outputText value="#{pid.streamType}" />
                                 <rich:dragSupport dragIndicator=":indicator"
                                 dragType="PID" dragValue="#{pid}">
                                 <rich:dndParam name="label" value="#{pid.streamType}" />
                                 </rich:dragSupport>
                                 </a4j:outputPanel>
                                 </rich:column>
                                </rich:scrollableDataTable>
                                </h:form>
                                


                                around the table the css files are used.