How to Select Checkbox in GridView

Question

0.00/5 (No votes)

See more:

I binded Gridview with set of images and i want that.. if I will Click on image then correspoinding checkbox will be checked automatically and if checkbox is already checked then it will be unchecked.

http://i.imgur.com/FLuwEae.png

ASP.NET

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" >
                        <ItemTemplate>
                            <asp:Panel ID="Panel1" runat="server" BorderColor="#FF9933" BorderWidth="3px" Height="200px" Width="300px">
                                <table width="100%">
                                    <tr>
                                        <td width="75%" style="color: #FF0000; font-weight: bold" align="center">
                                            <div class="images">
                                                <img src='<%#Eval("ThumbfileLink") %>' height="170px" width="270px" />
                                            </div> 
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="25%" style="color: #FF0000; font-weight: bold" align="center">
                                             <asp:CheckBox ID="CheckBox1" runat="server">
                         </asp:CheckBox> <%#Eval("Width")%> X <%#Eval("Height")%>
                                        </td>
                                    </tr> 
                                </table> 
                             </asp:Panel>
                        </ItemTemplate>
                        </asp:DataList>

How to do this

Thanks

Posted 8-Mar-14 13:13pm

yash343

Add a Solution

Comments

Pranav-BiTwiser 8-Mar-14 23:38pm

i think u have used datalist....

3 solutions

Solution 1

i have an idea to do this.

1) Add a datakey of the value to that gridview
2) Use ItemDatabound event and get the datakey value and validate the checked status.
3) if(datakeyvalue == 0)
{
//get the checkbox
// check using the condition

}

Posted 8-Mar-14 17:29pm

AndrewCharlz

Comments

AspDotNetDev 9-Mar-14 0:07am

I am confused. How does this answer address the question, which is basically how to toggle a checkbox when an image is clicked?

Solution 2

Some ideas (all untested):

Wrap the image tag with a label that has a "for" attribute set to the client ID of the checkbox. Not sure if that's a good practice as far as HTML goes (or if it will even work).
Use an ImageButton rather than an image. This will give you a postback event when clicked. From there, you can determine which row it's in and find the corresponding checkbox in that row and toggle it.
Put a CSS class on the images. On page load, use some JavaScript to attach click event handlers to them based on that class. In the handler, find the nearest checkbox and toggle the checked state.

Posted 8-Mar-14 18:05pm

AspDotNetDev

Updated 8-Mar-14 18:17pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2014-03-08T21:52:00

Let try to use jQuery to achieve this:
add the jquery code to the head section:

XML

<head id="Head1" runat="server">
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".Image1").click(function () {
                // traversing your current table structure
                var $checkbox = $(this).parent().parent().parent().next().children().children();
                $checkbox.prop("checked", !$checkbox.prop("checked"));
            });
        });
    </script>
</head>

Modify the html a bit:

XML

<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" ClientIDMode="Static">
 <ItemTemplate>
<!-- existing -->
<img src='<%#Eval("ThumbfileLink") %>' height="170px" width="270px"  class="Image1"  />
<!-- exiting -->
</asp:DataList>

Hope it helps. Good luck.