Getting checkbox value from nested gridview

Question

I have a nested gridview with 45 checkboxes. I want the user to be able to click a checkbox and have that value held in a separate gridview until they wish to act on it (similar to a shopping cart).

The checkboxes are nested in a 2nd level gridview behind a repeater.

     <repeater>
       <gridview>
          <gridview>
              checkbox
          <gridview/>
       <girdview />
     <repeater />

I was having a heck of a time trying to get the value of the checkbox that deep and want to learn jQuery and thought this is a good time.

What I was thinking was the user would click the checkbox, jQuery would get the id of the control (and value), I could then pass that to a ajax postback trigger and fill the 'shopping cart' gridview. The reason why I need to go through ajax is I need to get more values from a database based on the user selected checkbox.

I think I could take it from there. My biggest problem right now is figuring out how to get the id and value from the checkbox.

jsfiddle.net/AKU4W as long as traversing doesn't matter, just bind to the specific box. -- worst case scenario you can use ASP's $find() to look for the check box controls first, then bind to them (or locate the gridview and find all checkboxes within). — Brad Christie
– Brad Christie, Commented Mar 5, 2011 at 23:41
I'd love to scale this back because I need to understand what's going on before I have the solution...could I see jQuery code to click a checkbox and return the control id of one of the nested checkboxes? — IMAbev
– IMAbev, Commented Mar 6, 2011 at 2:28
Thanks, Brad. After reviewing the link you supplied, I was able to get where I wanted for the moment. I can now click the checkbox and get the value. Now I need to figure how to pass this value to a gridview... — IMAbev
– IMAbev, Commented Mar 6, 2011 at 3:09

David McLean · Accepted Answer · 2011-03-05 23:49:48Z

1

You should be able to get the value (or some data) from the checkbox thats clicked with something like

$('#gridview-wrapper checkbox').live("click", function(e){ //do something with the value form the click.

});

you might want to use the information to populate something elsewhere on the page or you might want to store the value in a data array.

The data array is basically a way for you to store key value pair data in jquery ready for use when the user takes another action on the page.

read more here -> http://api.jquery.com/data/

answered Mar 5, 2011 at 23:49

David McLean

1,4971 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brandon J. Boone · Accepted Answer · 2011-03-06 00:59:13Z

Never used a Repeater, but with some simple jQuery and html I think you can get the same effect without the bloatedness of the gridview controls:

Save as an html file for an example

<html>
<head>
    <title>Test</title>
</head>
<body>
    <table id="tblItems">
        <tbody>
            <tr>
                <td>+</td><td>Category 1</td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 1</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 2</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 3</td><td>Price</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>+</td><td>Category 2</td>
            </tr>
            <tr>
                <td>
                    <table>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 4</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 5</td><td>Price</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" /></td><td>Item 6</td><td>Price</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <table id="tblResults">
        <thead>
            <tr style="font-weight:bold">
                <td >Item Name</td><td>Price</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>
</html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" ></script>
<script>
    $(document).ready(function() {
        $('#tblItems > tbody > tr').each(function(i){
            $row = $(this);
            if(i % 2 == 0){//even rows are expanders
                $row.children('td:eq(0)').click(function(){
                    var $tmp = $(this);
                    var next = i + 1;
                    $row.parent().children("tr:eq(" + next + ")").toggle(); //toggle the next row
                    if($tmp.html() == '+'){ 
                        $tmp.html('-');
                    }else{ 
                        $tmp.html('+');
                    }
                });
            }else{//odd rows are collapsed by default
                $row.toggle();
            }
        });

        $('input[type="checkbox"]').change(function(){
            var $chkBox = $(this),
                data = $chkBox.data('checkboxData');

            if(!data){ //Add some data to remember to this checkbox
                $chkBox.data('checkboxData', {
                    id: Example.GetUniqueId() // create a unique ID for this checkbox
                });
                data = $chkBox.data('checkboxData');
            }
            if($chkBox.is(':checked')){ //checkbox is checked
                $("#tblResults tbody").append($chkBox.closest('tr').clone().attr('id', data.id)); //copy the checked row and add ID
                $("#tblResults input").parent().remove(); //remove the checkbox from the copied row
            }else{
                $("#" + data.id).remove(); //remove copied row when not checked 
            }
        });
    });

    Example = {};

    Example.GetUniqueId = function ()
    {
         var dateObject = new Date();
         var uniqueId =
              dateObject.getFullYear() + '' +
              dateObject.getMonth() + '' +
              dateObject.getDate() + '' +
              dateObject.getTime();

         return uniqueId;
    };
</script>

I agree that the bloat is there for gridview controls, but I am just not there yet. I have the page already created and, unfortunately, nested far more than I want, but nonetheless it's working. Thanks for the code - lots of food for thought.

Collectives™ on Stack Overflow

Getting checkbox value from nested gridview

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related