Help with DataGrid/CheckBoxes/double submit

Question

We have a simple datagrid. Each row has a checkbox. The checkbox is set to autopostback, and the code-behind has an event handler for the checkbox check-changed event. This all works as expected, nothing complicated.

However, we want to disable the checkboxes as soon as one is checked to prevent a double submit i.e. check box checked, all checkboxes are disabled via client side javascript, form submitted.

To achieve this I we are injecting some code into the onclick event as follows (note that the alert is just for testing!):

Protected Sub DgAccounts_ItemCreated(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DgAccounts.ItemCreated
    If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
        Dim chk As CheckBox = CType(e.Item.FindControl("chkItemChecked"), CheckBox)            
        chk.Attributes.Add("onclick", "alert('fired ...');DisableAllDataGridCheckBoxes();")
    End If
End Sub

When inspecting the source of the rendered page we get the following:

<input id="DgAccounts__ctl2_chkItemChecked" type="checkbox" name="DgAccounts:_ctl2:chkItemChecked" onclick="alert('fired ...');DisableAllDataGridCheckBoxes();setTimeout('__doPostBack(\'DgAccounts$_ctl2$chkItemChecked\',\'\')', 0)" language="javascript" />

It all appears in order, however the server side event does not fire – I believe this is due to the checkbox being disabled, as if we just leave the alert in and remove the call to disable the checkbox it all works fine.

Can I force the check-changed event to fire even though the check box is disabled?

Answer 1

I haven't tested this myself but when you call your 'DisableAllDataGridCheckBoxes' method, do you need to disable the checkbox that has been checked? If not, you could pass the calling checkbox's id and then only disable all the other checkboxes.

chk.Attributes.Add("onclick", "alert('fired ...');DisableAllDataGridCheckBoxes(" + chk.ClientId + ");")

I would think this would then allow the server side code to fire.

Answer 2

A possible workaround, would be to do all this in the server side code of the RowCommand of the data grid.

(posting the sample in C# but won't be much different in VB I hope)

protected void myGrid_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if(((CheckBox)e.Item.FindControl("chkItemChecked")).Checked)
    {
        foreach(GridViewRow dvRow in myGrid.Rows)
             ((CheckBox)dvRow.FindControl("chkItemChecked")).Enabled = false;
   }
}

or you could use

((CheckBox)e.Item.FindControl("chkItemChecked")).Enabled = false;

if you only want to disable the specific item.

However if you only want to implement this in client side code, it won't help you.

Answer 3

The reason the server side event is not firing is that disabled checkboxes do not get submited with the rest of the form.

The workaround I have used is to set the onclick event of the checkboxes to null rather than disable them - while this gives no visual clue to the user that subsequent clicks are ignored, it does prevent the double submit, and the check boxes are set top the correct state when the response is rendered.

Answer 4

Instead of disabling the checkboxes (which then do not get submitted), just "prevent" them from being selected. Do this by changing their onclick handler to reset the checked state. You coul dset all of the other checkboxes to disabled, and do this just for the one that is processing. Something like:

function stopChanges(cbCurrent) {
   $('INPUT[type=checkbox]').disable(); // disable all checkboxes

   $(cbCurrent)
       .disable(false) // enable this checkbox, so it's part of form submit
       .click(function() {
           // reset to previous checked - effectively preventing change
           $(this).checked = !$(this).checked; 
       }
   );
}