CheckBoxField columns in ASP.NET GridView are disabled even if ReadOnly set to false

Question

I have a GridView with two CheckBoxField columns. They both have ReadOnly property set to false, but html code generated for them has attribute disabled="disabled". So the value cannot be changed.

Generated HTML example:

<span disabled="disabled"><input id="ctl00_ContentBody_GridView_ctl02_ctl01" type="checkbox" name="ctl00$ContentBody$GridView$ctl02$ctl01" checked="checked" disabled="disabled" /></span>

Can anybody say how to figure it out?

Answer 1

This is by design; rows in a GridView are not editable by default.

There's two ways you might address this:

1. Add an Edit link

In your GridView tag, add AutoGenerateEditButton="True". When your GridView renders in the browser, you should now find a hyperlink labelled 'Edit'. If you click it, the fields in your GridView will become editable, and the Edit link will become two links, one to save your changes to the database and the other to discard them. Using this method, all the plumbing to wire up changes in the GridView to the database can be done for you, depending on how you're doing the databinding. This example uses a SqlDataSource control.

_{(source: philippursglove.com)}

2. Add a TemplateField with a CheckBox inside it

Inside the <columns> tag, you can add TemplateFields that you set the databinding up for yourself e.g.

<asp:TemplateField HeaderText="Discontinued">  
    <ItemTemplate>  
        <asp:CheckBox runat="server" ID="DiscontinuedCheckBox" 
            Checked='<%# Eval("Discontinued")  %>' AutoPostback="true" 
            OnCheckedChanged="DiscontinuedCheckBox_CheckedChanged" />  
    </ItemTemplate>  
</asp:TemplateField>

_{(source: philippursglove.com)}

This checkbox will be enabled, but you need to do the work yourself to reflect any changes back to the database. This is straightforward as long as you can get a database key, as you'll need to run an UPDATE statement at some point and you want to run it on the right row! Here's two ways you could do this:

In your Gridview tag, add DataKeyNames="MyDatabasePrimaryKey". Then in your CheckedChanged event handler, you need to find out which row you are in and look that up in the DataKeys array.

protected void DiscontinuedCheckBox_CheckedChanged(object sender, EventArgs e)
{
    CheckBox DiscontinuedCheckBox;
    SqlConnection conn;
    SqlCommand cmd;
    int productId;
    GridViewRow selectedRow;

    // Cast the sender object to a CheckBox
    DiscontinuedCheckBox = (CheckBox)sender;

    // We can find the row we clicked the checkbox in by walking up the control tree
    selectedRow = (GridViewRow)DiscontinuedCheckBox.Parent.Parent;

    // GridViewRow has a DataItemIndex property which we can use to look up the DataKeys array
    productId = (int)ProductGridView.DataKeys[selectedRow.DataItemIndex].Value;

    using (conn = new SqlConnection(ProductDataSource.ConnectionString))
    {
        cmd = new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandType = CommandType.Text;
        if (DiscontinuedCheckBox.Checked)
        {
            cmd.CommandText = "UPDATE Products SET Discontinued = 1 WHERE ProductId = " + ProductId.ToString();
        }
        else
        {
            cmd.CommandText = "UPDATE Products SET Discontinued = 0 WHERE ProductId = " + ProductId.ToString();
        }
        conn.Open();
        cmd.ExecuteNonQuery();
        conn.Close();
    }
}

Or, you could add the key in a HiddenField control:

<asp:TemplateField HeaderText="Discontinued">  
    <ItemTemplate>  
        <asp:hiddenfield runat="server" id="ProductIdHiddenField" 
            Value='<%# Eval("ProductID") %>' />
        <asp:CheckBox runat="server" ID="DiscontinuedCheckBox" 
            Checked='<%# Eval("Discontinued")  %>' 
            AutoPostback="true"
            OnCheckedChanged="DiscontinuedCheckBox_CheckedChanged" />  
    </ItemTemplate>  
</asp:TemplateField>

Code:

protected void DiscontinuedCheckBox_CheckedChanged(object sender, EventArgs e)
{
    CheckBox DiscontinuedCheckBox;
    HiddenField ProductIdHiddenField;

    DiscontinuedCheckBox = (CheckBox)sender;

    ProductIdHiddenField = (HiddenField)DiscontinuedCheckBox.Parent.FindControl("ProductIdHiddenField");

    using (conn = new SqlConnection(ProductDataSource.ConnectionString))
    {
    ...
    if (DiscontinuedCheckBox.Checked)
    {
        cmd.CommandText = "UPDATE Products SET Discontinued = 1 WHERE ProductId = " + ProductIdHiddenField.Value;
    }
    ...
    }