edatagrid onDestroy event fires too early

[phreeman]

I have a edatagrid set up where I want to call a function AFTER the row is destroyed. I have tried several variations of calling a function after the row is destroyed but it seems that the destroyRow method shows the dialog box and continues the script executing the function totalUpdate() BEFORE the dialog is confirmed. What I'm looking for is an onAfterDestroy event to trigger another javascript function. The code looks like:

Code:

deleteRow = true;
function orderItemEdit(rowIndex) {
        $('#item_main').edatagrid('editRow', rowIndex);
        if (deleteRow) {
                deleteRow = false;
                $('#item_main').edatagrid('unselectAll');
                $('#item_main').edatagrid('selectRow', rowIndex);
                $('#item_main').edatagrid('destroyRow');
                totalUpdate(); // fires too soon
        }
}

The function is called with the onClickRow method and the totalUpdate function is executed immediately after the destroyRow method shows the messager window. This leads to the deleted row being used in the calculation of the 'total' column and then being deleted later resulting in an erroneous total. Once the messager is confirmed, the row is deleted as expecetd but I then need the totalUpdate function to be called.

Also, why doesn't the messager hold the script until confirmed? If I'm redirecting but have an error (and show in a messager), the messager displays briefly and the redirect happens anyway. Can the behavior of the messager be configured to behave like the alert() function?

Thanks in advance for you help.

[stworthy]

It is not possible to block the confirm message window when using $.messager.confirm. The 'onDestroy' event of edatagrid plugin can be used to solve your issue. If the 'onDestroy' event can not be triggered, please download and update the latest edatagrid plugin from http://www.jeasyui.com/extension/downloads/jquery-easyui-edatagrid.zip.

Code:

$('#dg').edatagrid({
  onDestroy:function(){
    totalUpdate();
  }
});

[phreeman]

I tired that, same result.

I believe that the problem is the OnDestroy event is acted upon once the destroyRow method is called. The destroyRow method asks for confirmation to destroy the row but before I can confirm (perhaps since the messager doesn't hold the script until a confirmation is returned). The onDestroy event is started so the updateTotal() function is run while the messager is waiting for confirmation PRIOR to the row being deleted. Thus the total is from the column BEFORE the row is deleted and not after. The updateTotal function does get executed using the onDestroy event but before I confirm the destroy, once I confirm, the row is removed. This results in the updateTotal returning the wrong result.

[stworthy]

Please refer to the sample http://jsfiddle.net/YqByE/.
When destroy a row, you can get the correct total rows on 'onDestroy' event.

[phreeman]

I have attached the code I am using. I have added a trash can icon to both the toolbar and each row to try different methods. I add several rows and then press an earlier row (while still in edit mode) and both trash cans work, the row is removed. Then I can select any row (not in edit mode but highlighted) and when I press the trash can icon, the destroy message is displayed but the row is not destroyed. If I double click any row (to re-enter edit mode) and then either trash can icon, the row is removed. Also, in all cases, I don't see the alert message I set for the on Destroy event. It is not firing.

Code:

<!-- Datagrid -->
<div id="itemBar" style="padding:5px;height:auto">
  <div>
<img name="newItem" src="themes/default/icons/16x16/actions/list-add.png" type="img" height="16" id="newItem" onclick="$('#item_main').edatagrid('addRow');" style="cursor:pointer" title="Add" />
<img name="removeItem" src="themes/default/icons/16x16/places/user-trash.png" type="img" height="16" id="removeItem" onclick="alert('toolbar destroyRow'); $('#item_main').edatagrid('destroyRow');" style="cursor:pointer" title="Trash" />
  </div>
</div>
<script type="text/javascript">
function item_mainFormatter(value, row, index) {
    var text = '<img type="img" src="themes/default/icons/16x16/places/user-trash.png" height="16" onclick="$(\'#item_main\').edatagrid(\'destroyRow\');" style="cursor:pointer" title="Delete" />&nbsp;';
  return text;
}
</script>

<div style="clear:both">
<table title="" toolbar="#itemBar" fitColumns="true" idField="id" singleSelect="true" name="item_main" id="item_main" class="easyui-datagrid">
  <thead>
    <tr>
<th hidden="true" editor="text" field="id"></th>
<th width="50" formatter="item_mainFormatter" align="center" field="action">Action</th>
<th width="40" editor="{type:'numberbox',options:{precision:4}}" resizable="true" align="center" field="qty">Quantity</th>
<th width="80" sortable="true" resizable="true" align="center" editor="{type:'combogrid',options:{onShowPanel:function(){ itemInit(this, 'none'); }}}" field="sku">SKU</th>
<th width="160" editor="text" resizable="true" field="description">Description</th>
<th width="60" editor="text" resizable="true" align="right" field="price">Price</th>
<th width="80" editor="text" resizable="true" align="right" field="total" style="text-align:right">Total</th>
    </tr>
  </thead>
</table>
</div>
<script type="text/javascript">
$('#item_main').edatagrid({ 
  onDestroy:function(rowIndex, row) { alert('onDestroy row'); },
  onAdd:function(rowIndex, row) { alert('onAdd row'); lastIndex=rowIndex; rowAutoAdd=true; },
  onEdit:function(rowIndex, row) { alert('onEdit row'); lastIndex=rowIndex; }
 });
</script>

Ultimately, I would like to be able to press the trash can icon on a given row (no matter is it is selected or not), have it selected and then destroyed followed by a function to total the remaining rows.

Thanks for your help on this one. I'm pulling out what little hair I have left trying to get this to work.

Dave