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

commandButton doesn't work in scrollableDataTable

darmstadter Apr 30, 2008 6:53 AM

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 Apr 30, 2008 7:48 AM (in response to darmstadter)

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

2. Re: commandButton doesn't work in scrollableDataTable

darmstadter Apr 30, 2008 8:28 AM (in response to darmstadter)

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

darmstadter Apr 30, 2008 8:52 AM (in response to darmstadter)
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.
Actions
4. Re: commandButton doesn't work in scrollableDataTable

ilya_shaikovsky Apr 30, 2008 9:27 AM (in response to darmstadter)

could you just check our demo sample. It almost the same but working.
Actions
5. Re: commandButton doesn't work in scrollableDataTable

darmstadter Apr 30, 2008 10:32 AM (in response to darmstadter)

yes, it working fine. But in demo the commandbutton lies outer the table.
Actions
6. Re: commandButton doesn't work in scrollableDataTable

ilya_shaikovsky Apr 30, 2008 10:43 AM (in response to darmstadter)

Unfortunatelly nothing changed while using it inside for me. working the same..
Actions
7. Re: commandButton doesn't work in scrollableDataTable

darmstadter Apr 30, 2008 10:51 AM (in response to darmstadter)

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

8. Re: commandButton doesn't work in scrollableDataTable

ilya_shaikovsky Apr 30, 2008 11:01 AM (in response to darmstadter)

<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

darmstadter Apr 30, 2008 11:06 AM (in response to darmstadter)

thank you very much. Many problems are caused by layout?
Actions
10. Re: commandButton doesn't work in scrollableDataTable

darmstadter Apr 30, 2008 12:09 PM (in response to darmstadter)

No, it doesn't work yet.:(
Actions
11. Re: commandButton doesn't work in scrollableDataTable

darmstadter May 6, 2008 4:43 PM (in response to darmstadter)

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.
Actions

12. Re: commandButton doesn't work in scrollableDataTable

darmstadter May 6, 2008 4:46 PM (in response to darmstadter)

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.

Go to original post