Editable data table
Hi everyone,
I have been trying to implement an editable (extended) data table, but failed. I should either save the input values on the fly, i.e. without asking, or with one "Save"-button for several data tables on the page. Neither did I accomplish to do so, nor did I find anything on the net that helped me out.
Whenever I do an Ajax request on the client-side (e.g. opening the modal panel, sorting, filtering,...), the data in the input fields is saved in the database. But... I don't know why. I would really appreciate a suggestion how to either save every change in the input fields (manually triggering an Ajax request?) or manage to save the data only in when clicking on a save button.
I am using Seam's application framework on the server-side and RichFaces 3.3.3 on the client-side. You can see my code below.
Thanks a lot for your great work,
Daniel
<!-- Table 1 -->
<a4j:form id="table1Form" ajaxSubmit="true">
<h:outputText value="Could not find any data in table 1"
rendered="#{table1Query.resultCount == 0}" />
<a4j:region>
<rich:extendedDataTable id="table1" value="#{table1Query.dataModel}"
var="_table1">
<f:facet name="header">
<h:outputText value="Table 1's elements (#{table1Query.resultCount})" />
</f:facet>
<rich:column sortBy="#{_table1.prop1}" label="Property 1" filterBy="#{_table1.prop1}"
id="columnProperty1">
<f:facet name="header">Property 1</f:facet>
<h:inputText id="property1Input" value="#{_table1.prop1}" />
</rich:column>
<rich:column sortBy="#{_table1.prop2}" label="Property 2"
filterBy="#{_table1.prop2}" id="columnProperty2">
<f:facet name="header">Property 2</f:facet>
<h:inputText id="property2Input" value="#{_table1.prop2}" />
</rich:column>
<rich:column sortable="false" label="Action">
<f:facet name="header">Action</f:facet>
<h:commandLink id="modalPanelLink" value="History">
<rich:componentControl for="myModalPanel"
attachTo="modalPanelLink" operation="show" event="onclick" />
</h:commandLink>
</rich:column>
</rich:extendedDataTable>
</a4j:region>
</a4j:form>
<!-- Table 2 -->
<a4j:form id="table2Form" ajaxSubmit="true">
<h:outputText value="Could not find any data in table 2" rendered="#{table2Query.resultCount == 0}" />
<a4j:region>
<rich:extendedDataTable id="table2" value="#{table2Query.dataModel}"
var="_table2">
<f:facet name="header">
<h:outputText value="Table 2's elements (#{table2Query.resultCount})" />
</f:facet>
<rich:column sortBy="#{_table2.prop3" label="Property 3" filterBy="#{_table2.prop3}"
id="columnProperty3">
<f:facet name="header">Property 3</f:facet>
<h:inputText id="property3Input" value="#{_table2.prop3}" />
</rich:column>
<rich:column sortBy="#{_table2.prop4}" label="Property 4"
filterBy="#{_table2.prop4}" id="columnProperty4">
<f:facet name="header">Property 4</f:facet>
<h:inputText id="property4Input" value="#{_table2.prop4}" />
</rich:column>
</rich:extendedDataTable>
</a4j:region>
</a4j:form>
@Name("table1Query")
@AutoCreate
public class Table1Query extends EntityQuery<Table1> {
private static final String EJBQL = "SELECT t FROM Table1";
private static final String[] RESTRICTIONS = {/* ... */};
public ViewE1Query() {
setEjbql(EJBQL);
setRestrictionExpressionStrings(Arrays.asList(RESTRICTIONS));
}
@Override
@Factory("table1List")
public List<Table2> getResultList() {
return super.getResultList();
}
}
@Name("table2Query")
@AutoCreate
public class Table2Query extends EntityQuery<Table2> {
private static final String EJBQL = "SELECT t FROM Table2";
private static final String[] RESTRICTIONS = {/* ... */};
public ViewE1Query() {
setEjbql(EJBQL);
setRestrictionExpressionStrings(Arrays.asList(RESTRICTIONS));
}
@Override
@Factory("table2List")
public List<Table2> getResultList() {
return super.getResultList();
}
}
