Recently I came across a situation where I had to add a checkbox to each row of a DFWP and retrieve values of that check boxes in a HTML button click.



Here is what I added in my DFWP’s XSLT to get a check box in each row.

1. In SPD, add a Data View webpart to the page Date View >Insert Data View
2. Configure columns
3. Add an extra column to the left of the rendered data view (you can do this by selecting any left most cell and then Table > Insert > Column to the Left)
4. In the newly generated column, select first (or any <TD>) and then add a HTML check box (Insert > HTML > then Input (Checkbox)
   
   
5. Set the value property of the checkbox to use ID column’s value
   
6. Also add a html button somewhere outside the DFWP. In my example, I will attach an event handler that will read the check box values into an Array. <input
   id=”actionButton”
   type=button
   value=”Get Selected Item IDs”
   />
7. Now add the following script just after the button element.
   
   
   <script>
   
   document.getElementById(“actionButton”).onclick = function() {
   
   
   var idValues = new Array();
   
   $(“input:checkbox:checked”).each(function() {
   
   idValues.push(this.value);
   
   })
   
   alert(idValues.toString());
   
   }
   
   </script>
   
8. Here is the output