Question

I have this grid..

<tr>
  <td class="TDCaption" style="text-align: 
     <div class="DivStyleWithScroll" style="width: 100%; overflow: scroll; height: 250px;">
       <asp:GridView ID="grdReport" runat="server" AutoGenerateColumns="False" DataKeyNames="BookingNumber"
ShowFooter="True" EmptyDataText="No record found" PageSize="50" CssClass="mGRid">
        <Columns>
          <asp:TemplateField>
            <HeaderTemplate>
          <asp:CheckBox ID="chkAll" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
          <asp:CheckBox ID="chkSelect" runat="server" />
            </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="BookingDate" DataFormatString="{0:d}" HeaderText="Booking Date"
           SortExpression="BookingDate" FooterText="Total" />
          <asp:TemplateField HeaderText="Booking No.">
           <ItemTemplate>
            <asp:HyperLink ID="hypBtnShowDetails" runat="server" Text='<%# Bind("BookingNumber") %>' CssClass="grdCustName"
            Target="_blank" NavigateUrl='<%# String.Format("~/Bookings/BookingSlip.aspx?BN={0}{1}{2}",Eval("BookingNumber"),-1,Eval("DeliveryDate")) %>'
           </ItemTemplate>
          </asp:TemplateField>
          <asp:BoundField DataField="CustomerName" HeaderText="Customer Name" SortExpression="CustomerName">
    </asp:BoundField>
  </Columns>
</asp:GridView>

So, as you can see, the first col is a check box, what is want is that when I click check box, I want the booking number (in the second col) corrospoding to that checkbox, be stored in a variable.
Say, user ticks the 3rd checkbox, the booking no. in 3rd row is 29. I want it to be selected. Also, I should make one more point, all this grid view is in a child page, and is in a content, something like this..

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

Just in case this might affect things. I am using this..

   $(document).ready(function () {
       $("body").delegate(":checkbox", "change", function () {

           var list = $(':checkbox:checked').size();
           alert(list); // tells correctly how many I have checked
           var list2 = $.map(':checkbox:checked', function () {
               return $(this).closest('div').find('.grdCustName').text();
           }).toString();
           alert(list2); // nothing happens
           var list3 = $.map(':checkbox:checked', function () {
               return $(this).text();
           }).get(); // nothing here too
           alert(list3);
           var list4 = $.map(':checkbox:checked', function (index) {
               return $(this).closest('div').find('.grdCustName').eq(index).text();
           }).get(); // nothing here too
           alert(list4);
       });

   });

I even tried all of this without passing in the index, still nothings. I hope I made my self clear, if any doubt just comment and I’ll clarify!

so, can anyone please help me do this?

Answer 1

I would suggest you to use RowDatabound Event to get the Value of hte specific column in Javascript.Please have a look at the following code.this may give you some idea…

In Code Behind:-

void GridView_RowDataBound(Object sender, GridViewRowEventArgs e)
  {
    DataRowView drv = (DataRowView)e.Row.DataItem; 

    if(e.Row.RowType == DataControlRowType.DataRow)
    {
            CheckBox chkSelect=(CheckBox)e.Row.Cells[0].FindControl("chkSelect");
            chkSelect.Attributes.Add("onchange","setVariableValue('"+drv["BookingNumber"].ToString()+"')")
    }

  }

In Javascript:-

function setVariableValue(bookNo)
{
   alert(bookNo);
}