how to update single row of DataTable?

[jobor]

Hello
Does anyone know how to update a songle row of a datatable?
I have a scrollable datatable where you can see e.g. 20 rows. When you scroll down to e.g. row 60 and click on it details are shown in a Panel and you can edit the selected model. Pushing on the save button writes the data to the db and the row is updated in the list.
But if I update the list from the command button the complete list is redrawn and the first row is visible again. The user ha to scroll down again to see the results in the list. This is an undesired behaviour.
I want to update a single row and not the redraw the complete list.

Code: Select all

<h:form id="list-form">
	<p:dataTable id="model-list" scrollable="true" scrollHeight="250"
			 value="#{programmaBean.models}" var="model" rowKey="#{model.seq}"
			 selectionMode="single" selection="#{programmaBean.selectedModel}"
			 style="background-color: #f5f5f5">
		<p:ajax event="rowSelect" listener="#{programmaBean.onRowSelect}" update=":programma-info-panel :ddv-panel" />

Code: Select all

<p:panel id="ddv-panel" header="DDV-planning">
	<h:form id="ddv-form">
	<p:toolbar id="resources-toolbar">
		<p:toolbarGroup align="left">
			<p:commandButton value="Bewaren" actionListener="#{programmaBean.saveModel}" update="upload-naar-npo-medewerker :list-form:model-list" />
		</p:toolbarGroup>
	</p:toolbar>
<h:panelGrid columns="2">

As you can see the update="upload-naar-npo-medewerker :list-form:model-list" is functioning well but it redrawas the complete list.
I want to redraw a single row.

PS I searched for hours on the internet but nothing I could use or I recognize that is useful for me.

Code: Select all

	public void onRowSelect(SelectEvent e) {
		DataTable component = (DataTable) e.getComponent();
		int row = component.getRowIndex();
		currentModel = ((Programma) e.getObject());
	}

BTW the int row = component.getRowIndex(); is always returning -1

[kukeltje]

Try this http://showcase.omnifaces.org/utils/Ajax

[jobor]

Ronald, perfect answer!

The Ajax.updateRow() method is perfectly nice. When I scroll down to e.g. row 60 and invoking Ajax.updateRow(uiDataTable, 60); updates the row only and the list is scrolling to the top anymore. Very nice!

But! there is a but!

How do I get the row id in the backing bean as a result of clicking on a row.
You see row 60 is hardcoded for the test.

Code: Select all

	public void onRowSelect(SelectEvent e) {
		DataTable component = (DataTable) e.getComponent();
		int row = component.getRowIndex();
		currentModel = ((Programma) e.getObject());
	}

The method above is callled due to clicking on a row but the int row is always -1. While the currentModel is perfectly set.

The code below shows the the rowKey in the list and it is visible starting at 0 to the end of the list.

Code: Select all

<p:dataTable id="model-list" scrollable="true" scrollHeight="260" rowIndexVar="rowIndex"
		 binding="#{programmaBean.uiDataTable}" value="#{programmaBean.model}" var="models" rowKey="#{model.seq}"
		 selectionMode="single" selection="#{programmaBean.selectedModel}"
		 style="background-color: #f5f5f5">
<p:ajax event="rowSelect" listener="#{programmaBean.onRowSelect}" update=":programma-info-panel :ddv-panel" >
</p:ajax>
<p:column headerText="id" >
	<h:outputText value="#{rowIndex}" />
</p:column>

I tried a lot of things but I was not successful in getiing the row index to the backing bean (=viewScoped).
I tried also the good old Datamodel as a wrapper around the ArrayList for the value of the dataTable.
But this object also returns -1 on invoking the method dataModel.getRowIndex(); during the save action.

[kukeltje]

Johan,

First of all, I always use a lazydatamodel so I can be more in control of things. Even for simple lists of data (by using a generic model.

Secondly,can't you use arrayList.indexOf(selectedItem)?

[jobor]

Ronald, again a good answer
I was thinking too difficult and the ArrayList hint is so easy.

The solution is:

Code: Select all

	public void onRowSelect(SelectEvent e) {
		uiDataTable = (DataTable) e.getComponent();
		currentModel = ((Programma) e.getObject());
		rowIndex = models.indexOf(currentModel);
	}

Code: Select all

	public void saveModel(ActionEvent e) {
		...
		Ajax.updateRow(uiDataTable, rowIndex);
	}

Thank you very much!