checkbox in gridview (updatepanel)

**met0555** · Aug 4th, 2011, 04:31 PM

Hi,

I have a grdiview with checkbox both are in an updatepanel.
What i'm trying to do is whenever a checkbox is clicked i want my labelbox to show +1 and when it's unchecked i want to show -1 .
The problem i'm having is i can't access that check box, it doesn't recognized it when i start writing checkbox2 ...... my code looks like this :

vb Code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                   <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" AllowPaging="True"    OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" 
                          onrowupdating="GridView1_RowUpdating" 
                          onrowcancelingedit="GridView1_RowCancelingEdit" 
                    AllowSorting="True"     AutoGenerateColumns="False" DataKeyNames="ID" PageSize="20" 
                    style="font-size: 7pt; font-family: Tahoma" UseAccessibleHeader="False">
                    <Columns>
                     <asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                 <asp:CheckBox ID="CheckBox2" runat="server" />
           </ItemTemplate>
            </asp:TemplateField>
                        <asp:CommandField CancelText="C" DeleteText="D" EditText="E" InsertText="I" 
                            NewText="N" SelectText="S" ShowDeleteButton="True" ShowEditButton="True" 
                            UpdateText="U"  />
                  
 
 
                      <asp:TemplateField HeaderText="ID" Visible="False">
           <EditItemTemplate>
            <asp:TextBox ID="textID2" runat="server" Text='<%# Bind("ID") %>' Width="28" Font-Size="8" Font-Names="tahoma" Enabled="False"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label15" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
.....

thanks

**gep13** · Aug 5th, 2011, 01:19 AM

Hello,

The reason that it doesn't like it is because CheckBox2 doesn't actually exist

What I mean by that is, within the ItemTemplate for the definition of what makes up the GridView CheckBox2 does exist, however, only in the Template. When the GridView renders to the HTML which is sent to the page, there will actually be lots of CheckBoxes, not just one. As a result, you can't directly access the "one" CheckBox that exists in the ItemTemplate.

Does that make sense?

In order to "fix" this problem you can do one of two things.

During the RowDataBound event of the GridView you can inspect the contents of the row, and using the FindControl method you can find the instance of the CheckBox for the given row. Once you have that reference you can either assign a JavaScript function to the click event of the CheckBox and do the work of adding +1 or -1 to the screen, or you can assign a Server Side method to the Click event of the CheckBox so that when clicked, the part of the page in the UpdatePanel goes back to the server and takes the necessary action.

Hope that makes sense!

Gary

**danasegarane** · Aug 5th, 2011, 03:45 AM

Here comes Jquery for Help. You need to use the css for counting the checkbox count.

Sample

Code:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
     function getCount()
{
     var chkboxes=$(" .chkbox"); //Get all the checkboxes
     var checkedCount = chkboxes.filter(":checked").length; //get the checkedcount
     alert(checkedCount);
}

$(document).ready(function(){

$(" .chkbox").each(function() {
 
            $(this).change(function(){
                getCount();
            });
        });
});

</script>




</head>
<body >



<input type="text" class="total" />
<input type="checkbox" class="chkbox" />
<input type="checkbox" class="chkbox" />



</body >

</html>

**met0555** · Aug 5th, 2011, 10:56 AM

Hi,

I tried to use the code you provided me, and it works fine but not with my checkboxes in my gridview.

i also tried to make it work like this, but it seems its not working i don't know what im missing

vb Code:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        '  Dim GridView1 As GridView = CType(sender, GridView)
        Dim atLeastOneRowDeleted As Boolean = False ' Iterate through the Products.Rows property 
        Label38.Text = 0
        Dim a, b As String
        For Each row As GridViewRow In GridView1.Rows
            Dim cb As CheckBox = row.FindControl("CheckBox2")
            If cb IsNot Nothing AndAlso cb.Checked Then
 
                atLeastOneRowDeleted = True
                Dim ID As Integer = (GridView1.DataKeys(row.RowIndex).Value)
 
                a += 1
                b += ID & " "
 
            End If
        Next
        If a > 11 Then
            Label38.Text = b
            Label38.ForeColor = Drawing.Color.Red
        End If
 
 
    End Sub

t
hx

**danasegarane** · Aug 5th, 2011, 07:52 PM

Originally Posted by met0555

Hi,

I tried to use the code you provided me, and it works fine but not with my checkboxes in my gridview.

i also tried to make it work like this, but it seems its not working i don't know what im missing

vb Code:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        '  Dim GridView1 As GridView = CType(sender, GridView)
        Dim atLeastOneRowDeleted As Boolean = False ' Iterate through the Products.Rows property 
        Label38.Text = 0
        Dim a, b As String
        For Each row As GridViewRow In GridView1.Rows
            Dim cb As CheckBox = row.FindControl("CheckBox2")
            If cb IsNot Nothing AndAlso cb.Checked Then
 
                atLeastOneRowDeleted = True
                Dim ID As Integer = (GridView1.DataKeys(row.RowIndex).Value)
 
                a += 1
                b += ID & " "
 
            End If
        Next
        If a > 11 Then
            Label38.Text = b
            Label38.ForeColor = Drawing.Color.Red
        End If
 
 
    End Sub

t
hx

Where is the code to count ?

**met0555** · Aug 5th, 2011, 08:51 PM

vb Code:

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
     function getCount()
{
     var chkboxes=$(" .checkbox2"); //Get all the checkboxes
     var checkedCount = chkboxes.filter(":checked").length; //get the checkedcount
     alert(checkedCount);
}
 
$(document).ready(function(){
 
$(" .checkbox2").each(function() {
 
            $(this).change(function(){
                getCount();
            });
        });
});
 
</script>

**gep13** · Aug 8th, 2011, 12:46 AM

Originally Posted by met0555

i also tried to make it work like this, but it seems its not working i don't know what im missing

Rather than simply saying that something isn't working, it would be better if you could explain exactly why it isn't working. Are there any errors, either on the client side or the server side? If so, what are they? Have you set breakpoints in your code and began stepping through the code? Does it do anything that you are not expecting? If so, what?

Gary

**danasegarane** · Aug 9th, 2011, 01:38 AM

Originally Posted by met0555

vb Code:

<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
     function getCount()
{
     var chkboxes=$(" .checkbox2"); //Get all the checkboxes
     var checkedCount = chkboxes.filter(":checked").length; //get the checkedcount
     alert(checkedCount);
}
 
$(document).ready(function(){
 
$(" .checkbox2").each(function() {
 
            $(this).change(function(){
                getCount();
            });
        });
});
 
</script>

Did you apply the css checkbox2 to each checkbox in design view ?

**benmartin101** · Aug 10th, 2011, 03:10 AM

gep13: Is there a way to create an event handler for a checkbox inside a datagrid?

met0555: I'm assuming that the labelbox is also within the gridview, and each row has one? If so, try this code inside the Page_Load():

Code:

protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {
                int count = GridView1.Rows.Count;
                for (int i = 0; i < count; i++)
                {
                    CheckBox cb = (CheckBox)GridView1.Rows[i].FindControl("CheckBox2");
                    if (cb.Checked)
                    {
                        Label lbl = (Label)GridView1.Rows[i].FindControl("LabelBox");//i'm assuming this is the ID of your label
                        lbl.Text = "+1";
                    }
                    else
                    {
                        Label lbl = (Label)GridView1.Rows[i].FindControl("LabelBox");
                        lbl.Text = "-1";
                    }
                }
            }
          
        }

On your .aspx page, make sure that the CheckBox2 control has AutoPostBack set to True:

Code:

<asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true"/>

edit: gep13:I noticed you mentioned that you can create a click event on the server side, but I tried that during the "RowDataBound" event, like so:

Code:

protected void RowDataBound(object sender, GridViewRowEventArgs e)
        {

            CheckBox cb = (CheckBox)e.Row.FindControl("CheckBox2");
            if (cb != null)
            {
                cb.CheckedChanged += new EventHandler(cb_CheckedChanged);
            }
        }

It went through the code including the setting of the event handler, but when I finally clicked on a checkbox, it did not trigger the cb_CheckedChanged event. Am I missing something in the code behind or in the aspx page?

**gep13** · Aug 10th, 2011, 03:23 AM

Hello,

The approach that you are trying is definitely the correct one.

Have you set a breakpoint on this line:

Code:

cb.CheckedChanged += new EventHandler(cb_CheckedChanged);

Does it actually get run?

Gary

**met0555** · Aug 10th, 2011, 06:30 AM

Thanks for the helps.

@benmartin101: with the code you provided for the Page_Load and RowDataBound, it works fine, but if i click on two checkboxes quickly i get error like this one "System.Web.HttpException: The client disconnected. ---> System.Web.UI.ViewStateException: Invalid viewstate." as it server side its slow

I believe i have to use java or jquery ... to make it fast

@danasegarane :

I tried ur code again earlier, and my checkbox code in my gridview looks like this

Code:

<asp:CheckBox ID="CheckBox2" runat="server"  class="chkbox" />

and i don't have to duplicate for each checkbox it will do it auto in gridview.

and the rest of the code i just copy pasted ur original code. Then when i test it by checking and unchecking the checkboxes i always get a mdgbox with the value of 0.

(sorry i' new to jquery, but it seems it's my only chance here)

thanks

**gep13** · Aug 10th, 2011, 10:45 AM

Originally Posted by met0555

I believe i have to use java or jquery ... to make it fast

That really isn't the main reason to use jQuery of JavaScript

**benmartin101** · Aug 10th, 2011, 10:32 PM

Originally Posted by gep13

Hello,

The approach that you are trying is definitely the correct one.

Have you set a breakpoint on this line:

Code:

cb.CheckedChanged += new EventHandler(cb_CheckedChanged);

Does it actually get run?

Gary

Yes, it goes through that line for sure (and it does so multiple times depending on the number of checkboxes generated). cb_CheckedChanged() should handle that event, right?

**benmartin101** · Aug 10th, 2011, 10:34 PM

Originally Posted by met0555

Thanks for the helps.

@benmartin101: with the code you provided for the Page_Load and RowDataBound, it works fine, but if i click on two checkboxes quickly i get error like this one "System.Web.HttpException: The client disconnected. ---> System.Web.UI.ViewStateException: Invalid viewstate." as it server side its slow

Not sure if this would help, but maybe try setting EnableViewStateMac = "False".

**benmartin101** · Aug 11th, 2011, 12:18 AM

This is weird, but when I add OnCheckedChanged="cb_CheckedChanged" to the aspx page like so:

Code:

<ItemTemplate>
                        <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="true" OnCheckedChanged="cb_CheckedChanged"/>
                    </ItemTemplate>

It ends up catching that checkedchanged event. But why won't it do it programmatically?

**benmartin101** · Aug 11th, 2011, 02:16 AM

I don't think I can add event handlers during the RowDataBound event. The earliest, I think, I can add event handlers is during the OnRowCreated event - during postback.

**benmartin101** · Aug 11th, 2011, 02:24 AM

Here's new code:

Code:

//assign this method on GridView1's OnRowCreated in the aspx page
 protected void RowCreated(object sender, GridViewRowEventArgs e)
        {
            CheckBox cb = (CheckBox)e.Row.FindControl("CheckBox2");
            if (cb != null)
            {
                cb.CheckedChanged += new EventHandler(cb_CheckedChanged);
                cb.TabIndex = (short)e.Row.DataItemIndex;
            }
        }

        protected void cb_CheckedChanged(object sender, EventArgs e)
        {
            
            CheckBox cb = (CheckBox)sender;
            Label lb = (Label)GridView1.Rows[cb.TabIndex].FindControl("Label1");
            if (lb.Text == "" || lb.Text=="-1")
            {
                lb.Text = "+1";
            }
            else
            {
                lb.Text = "-1";
            }
        }

Don't forget to set AutoPostBack="True".

**gep13** · Aug 11th, 2011, 07:03 AM

Originally Posted by benmartin101

I don't think I can add event handlers during the RowDataBound event. The earliest, I think, I can add event handlers is during the OnRowCreated event - during postback.

Ah, my bad!

I should have used my own advice and checked here:

http://msdn.microsoft.com/en-us/library/ms178472.aspx

You need to create the Event Handler early enough in the Page Life Cycle so that it "sticks" around across Post Backs. Sorry for sending you up the garden path! If I had taken the time to create a sample I would have been able to point you in the right direction

Gary

**benmartin101** · Aug 12th, 2011, 12:30 AM

Originally Posted by gep13

Ah, my bad!

I should have used my own advice and checked here:

http://msdn.microsoft.com/en-us/library/ms178472.aspx

You need to create the Event Handler early enough in the Page Life Cycle so that it "sticks" around across Post Backs. Sorry for sending you up the garden path! If I had taken the time to create a sample I would have been able to point you in the right direction

Gary

yeah, i forgot about the Page Life Cycle thing. Still thinking i'm programming in windows form applications.

**gep13** · Aug 12th, 2011, 01:46 AM

Originally Posted by benmartin101

yeah, i forgot about the Page Life Cycle thing. Still thinking i'm programming in windows form applications.

You will get used to it

Thread: checkbox in gridview (updatepanel)

Thread Tools

Display

checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Re: checkbox in gridview (updatepanel)

Posting Permissions