Update a datatable row using the rowKey

[lg900]

I want to ajax update a single datatable row, given the rowKey, when the data changes on the server side. I can already update the whole table, that works no problem, but the table contains lots of data so ajax updating it is quite expensive.

On the client side I can select the relevant tr with this, for example:

$('tr[data-rk="3"]');

Is there a way of doing this on the server with PrimeFaces.current().ajax().update( ... ) ?

[melloware]

You can use @row(n) search expression which does just that - it updates the nth row in a table. In order to update the current row, you need to pass row index as an argument. Set rowIndexVar="rowIdx" attribute on <p:dataTable> and then:

<p:commandButton ... update="@form:visitTable:@row(#{rowIdx})" />

See the docs: https://primefaces.github.io/primefaces/14_0_0/#/core/searchexpression?id=primefaces-additional-keywords

[lg900]

Maybe I wasn't completely clear but I can't get the ajax update to work from the server backend in Java.

This works (but it ajax updates the whole table):
PrimeFaces.current().ajax().update( "mainForm:dataTableComponent:dataTable" );

This does not work (in my application 0 is replaced with the correct row index):
PrimeFaces.current().ajax().update( "mainForm:dataTableComponent:dataTable:@row(0)" );

I could in theory do it in the client front end - the backend can also trigger the client via a websocket to "do things". But I couldn't figure out how to get the client to just "go and ajax update this particular row in the datatable". The documentation recommended using a remoteCommand, but I couldn't work out how to get the remote command to:

update="@form:visitTable:@row(myJavaScriptVariable)"

where the important bit is myJavaScriptVariable, which contains the row index.

I even tried puting a remote command in each row of the datatable - which it refused to do because it said the parent was not an instance of UIData.

Do you have any ideas how to get the server side code working, or to get the client javascript (which is outside of the individual row scope in the websocket callback) to ajax update a specific row?

Any hints would be really appreciated :)

(Primefaces 14.0.6)

[melloware]

Actually row looks like it can be used server side capable. let me test it

[lg900]

I couldn't get @Row to work in the java backend, but I managed to get something working - which involves 2 roundtrips and involves embedding all cells within the table within a panelGroup with a particular css class for each row.

For example, the css class might be "row-dynamic-update-{rowId}"

This is the workflow:

Step 1
// Java Backend
receive an event that data has changed and update the data store
extract the primary key from the data and send a message via websocket to the client containing the primary key

Step 2:
// Client frontend in the javascript websocket callback
extract the primary key of the changed data
call a remoteCommand defined in the .xhtml passing the primary key of the changed data record as an argument
// The remote command is defined as follows - this is important because update="xyz" cannot be specified dynamically
<p:remoteCommand name="updateDataTable" action="#{cc.attrs.tableBean.updateDataTable}" oncomplete="onUpdateDataTableComplete(args);"/>

Step 3:
// Java backend within client session / within a session scoped bean
extract the data record from the data store (changed record)
iterate through all of:
- record list for the data table
- selected records list for the data table
- filtered records list for the data table
- replace the existing record with the changed record in all of these lists if the primary key matches
return (this is the important bit) the row index from filtered records (if not null) otherwise from the record list to the client

Step 4:
// Java frontend in javascript callback which is triggered by the remote command

        function onUpdateDataTableComplete( args ) {
           var rowSelector = '@(.row-dynamic-update-' + args.rowIndexToAjaxUpdate + ')';
           PrimeFaces.ab( {
               source: 'mainForm:dataTableComponent:updateDataTable',
               update: rowSelector,
               oncomplete: function( xhr, status, args ) {
                        console.log( 'ajax done for rowSelector == ", rowSelector );
                    }
                } );
           ...

What would be really nice would be a way of using the rowKey to reference the data in primefaces. So, for example this could work from the backend:

PrimeFaces.current().ajax().update("@Form:dataTable:@Rowkey(myRowKey)");

Even if @Row could work from the backend it would be helpful.
Also, I couldn't get @Row to work from the frontend either - maybe because of dynamic IDs in the components (we are using p:columns which are dynamic).
However, the jquery selector works in combination with packing each table cell in a panelGrid with a css class based on rowId.

Phew ... !

[melloware]

Maybe its dynamic columns but I need to test it to see if its a bug. @row should work fine.