I am using a WebDataGrid with a template column containing an ASP.NET button.  This button is used to delete a row from my grid by storing the row's data key in my hidden field hfDeletedViewGroupKeys, which I then parse on the server side to remove all rows from a datatable whose IDs appear in this field.  I then rebind the table data to my grid after any time the delete button is clicked.

Here is my problem.   My onRowSelectionChanged() retrieves the correct data key if I move around from row to row clicking each one's respective delete button.  However, if I stay on one row and delete it, all the other rows are "bumped up" so a new row occupies the position of the one I just deleted.  If I click on that new row in the same position as the one just deleted, most of the time, the data key retrieved in my client script is the old one.  The effect is that the row is not actually deleted until I click on a row somewhere and then reclick that row.

Could someone enlighten me as to what I am doing wrong with this approach?

var selectedViewGroupKey = "";
 
function onRowSelectionChanged(sender, eventArgs) {
    var rows = eventArgs.getSelectedRows();
    var selectedRow = rows.getItem(0);
    selectedDataKey = selectedRow.get_dataKey();
 
    var hfSelectedDataKey = document.getElementById("<%= hfSelectedViewGroupKey.ClientID %>");
    hfSelectedDataKey.value = selectedDataKey + ",";
}
 
function onDelete_Click() {
    var hfDeletedDataKeys = document.getElementById("<%= hfDeletedViewGroupKeys.ClientID %>");
    var hfSelectedDataKey = document.getElementById("<%= hfSelectedViewGroupKey.ClientID %>");

            hfDeletedDataKeys.value += hfSelectedDataKey.value;

      }