Steps to reproduce on test case:

• Load application.
• Enter in a "f" in the filter input to display the last column.
• Select the row.
• Click on the Submit button, "Submitted!" should now be displayed in the second column.
• Clear the filter input and deselect the row.
• Enter in a "o" in the filter input field, this will now just display the first column.
• Select the row.
• Click on the submit button. Nothing is shown in the second column.
• Clear the filter input field, the first row now shows the "Submitted!" value in the second column.

Note: This issue occurs on the first try in the Williams 1Line app.

I believe that this problem may be due to a DOM diff / update bug, in part because it is hard to reproduce (the 2nd filtering must contain only 1 row, the Williams app doesn't even work the first time), but most strongly because it is fixed by altering the page layout very slightly:

<ace:dataTable id="testTable"
value="#

"
var="item"
stateMap="#

"
selectionMode="single">
<ace:column headerText="Column One"
filterBy="#

</ace:column>
<ace:column headerText="Column Two">
#

</ace:column>
</ace:dataTable>

When using the broken page markup the response you'd expect to update the second column, looks like:

<partial-response><changes><update id="form:testTable:0:_t11"><Unable to render embedded object: File (testTable:0:_t11">Four</span>]]></update><update id="form:testTable_selection"><) not found.[CDATA[<input id="form:testTable_selection" name="form:testTable_selection" type="hidden" />]]></update><update id="form:testTable_deselection"><Unable to render embedded object: File (testTable_deselection" name="form:testTable_deselection" type="hidden" />]]></update><update id="javax.faces.ViewState"><) not found.[CDATA[-5180981550601262950:-997285592024805949]]></update><eval><![CDATA[ice.applyFocus('form:testTable:j_idt10_filter');]]></eval><extension aceCallbackParam="validationFailed">

</extension></changes></partial-response>

and when using the altered markup, the update for the same scenario is:

<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="form:testTable_row_0"><![CDATA[<tr class=" ui-datatable-even ui-selected ui-state-highlight " id="form:testTable_row_0"><td><div>
Four
</div></td><td><div>
Submitted!
</div></td></tr>]]></update><update id="form:testTable_selection"><Unable to render embedded object: File (testTable_selection" name="form:testTable_selection" type="hidden" />]]></update><update id="form:testTable_deselection"><) not found.[CDATA[<input id="form:testTable_deselection" name="form:testTable_deselection" type="hidden" />]]></update><update id="javax.faces.ViewState"><Unable to render embedded object: File (-2873470306126015661]]></update><eval><) not found.[CDATA[ice.applyFocus('form:testTable:j_idt10_filter');]]></eval><extension aceCallbackParam="validationFailed">

</extension></changes></partial-response>

The table is rendering itself as follows:

old DOM:

<table><thead><tr><th class="ui-widget-header"><div class="ui-header-column" id="form:testTable:j_idt9"><div><span class="ui-header-text">Column One</span></div><input class="ui-column-filter" id="form:testTable:j_idt9_filter" name="form:testTable:j_idt9_filter" onkeyup="widget_form_testTable.filter(event)" size="1" value="o" /></div></th><th class="ui-widget-header"><div class="ui-header-column" id="form:testTable:j_idt11"><div><span class="ui-header-text">Column Two</span></div></div></th></tr></thead><tbody class="ui-datatable-data ui-widget-content" id="form:testTable_data"><tr class=" ui-datatable-even ui-selected ui-state-highlight " id="form:testTable_row_0"><td><div><span id="form:testTable:0:_t10">Four</span></div></td><td><div><span id="form:testTable:0:_t12">Submitted!</span></div></td></tr></tbody></table>

new DOM:

<table><thead><tr><th class="ui-widget-header"><div class="ui-header-column" id="form:testTable:j_idt9"><div><span class="ui-header-text">Column One</span></div><input class="ui-column-filter" id="form:testTable:j_idt9_filter" name="form:testTable:j_idt9_filter" onkeyup="widget_form_testTable.filter(event)" size="1" value="o" /></div></th><th class="ui-widget-header"><div class="ui-header-column" id="form:testTable:j_idt11"><div><span class="ui-header-text">Column Two</span></div></div></th></tr></thead><tbody class="ui-datatable-data ui-widget-content" id="form:testTable_data"><tr class=" ui-datatable-even ui-selected ui-state-highlight " id="form:testTable_row_0"><td><div><span id="form:testTable:0:_t10">One</span></div></td><td><div><span id="form:testTable:0:_t12">Submitted!</span></div></td></tr></tbody></table>

so the "Submitted" value that is new for "One" is not detected as a difference because it was previously rendered in the same row for "Four".

The sequence of events is as follows:

Standard render from submit writes a single row table to the DOM containing "Four Submitted"

Custom render updates the browser (but not the DOM) to show "One"

Standard render from submit writes a single row table to the DOM containing "One Submitted"

The only apparent delta is from "Four" to "One"

The fundamental problem is that the customUpdate does not participate in the standard rendering process.

The customUpdate is as follows:

<extension id="form:testTable" ice.customUpdate="true"><![CDATA[<div id="form:testTable" class="ui-datatable ui-widget"><table><thead><tr><th class="ui-widget-header"><div id="form:testTable:j_idt9" class="ui-header-column"><div><span class="ui-header-text">Column One</span></div><input id="form:testTable:j_idt9_filter" name="form:testTable:j_idt9_filter" class="ui-column-filter" size="1" value="f" onkeyup="widget_form_testTable.filter(event)" /></div></th><th class="ui-widget-header"><div id="form:testTable:j_idt11" class="ui-header-column"><div><span class="ui-header-text">Column Two</span></div></div></th></tr></thead><tbody id="form:testTable_data" class="ui-datatable-data ui-widget-content"><tr id="form:testTable_row_0" class=" ui-datatable-even "><td><div><span id="form:testTable:0:_t10">Four</span></div></td><td><div><span id="form:testTable:0:_t12"></span></div></td></tr></tbody></table><input type="hidden" id="form:testTable_selection" name="form:testTable_selection" /><input type="hidden" id="form:testTable_deselection" name="form:testTable_deselection" /><script type="text/javascript">
//<![CDATA[
widget_form_testTable = new ice.ace.DataTable('form:testTable',

);
//]]>
</script></div>]]></extension>

which is essentially a large DOM update. Could the component be modified to not use customUpdate in this case and just render into the table subtree? customUpdate is really only suitable for transient changes to the page, such as a list of rows to show and hide (even though all rows remained rendered).

Note that the fix for ICE-7364 is causing a regression in this test case due to JavaScript escaping problems.

Resolved in 26100 by changing filter requests to normal DOM updates.

Resolved. Sorting is now refactored to work without customUpdates.

Expansion refactoring still in progress but could be released at this point since its updates don't effect the rest of the table.