title: Get selected rowIndex of gridview using javascript
body: <p>I want to get the selected <code>rowindex</code> from the <code>gridview</code>. In the <code>gridview</code> there are 5 columns <code>ID</code>, <code>name</code>, <code>model</code>, <code>code</code> and <code>amount</code>. It also contains an image, which when clicked opens a popup window by which I can assign values in <code>ID</code>,<code>name</code>,<code>model</code> and <code>code</code>. Problem is that I can't assign proper values in each rows after clicking image and selecting the row in popup window. 
  For that I need to get the selected index where the image is clicked. </p>
  
  <p>Here is the gridview Code.</p>
  
  <pre><code>&lt;asp:GridView ID="grvSalesDetails" runat="server" AutoGenerateColumns="False" CellPadding="4"
      CssClass="mGrid" ForeColor="#333333" GridLines="None" OnRowDeleting="grvSalesDetails_RowDeleting"
      ShowFooter="True" Style="text-align: left" Width="100%" SelectedRowStyle="myselection"&gt;
      &lt;Columns&gt;
          &lt;asp:BoundField DataField="RowNumber" HeaderText="SNo" /&gt;
          &lt;asp:TemplateField HeaderText="Machine ID"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtMID" runat="server" Width="30px"&gt;&lt;/asp:TextBox&gt;
                  &lt;img class="style1" alt="" src="../Inventory/Images/BrowseIcon.jpg" onclick="SelectMachineCode(this)"
                      id="imgMachine" /&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Name"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtMName" runat="server" Width="120px"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Model"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtMModel" runat="server" Width="80px"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Code"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtMCode" runat="server" Width="70px"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:TemplateField HeaderText="Amount"&gt;
              &lt;ItemTemplate&gt;
                  &lt;asp:TextBox ID="txtMAmount" runat="server" Width="90px"&gt;&lt;/asp:TextBox&gt;
              &lt;/ItemTemplate&gt;
              &lt;FooterStyle HorizontalAlign="Right" /&gt;
              &lt;FooterTemplate&gt;
                  &lt;asp:Button ID="AddNewRow" runat="server" CssClass="btnSearch" OnClick="AddNewRow_Click"
                      Text="Add New Row" /&gt;
              &lt;/FooterTemplate&gt;
          &lt;/asp:TemplateField&gt;
          &lt;asp:CommandField ShowDeleteButton="True" /&gt;
      &lt;/Columns&gt;
      &lt;FooterStyle BackColor="#102040" CssClass="mGrid" Font-Bold="True" ForeColor="White" /&gt;
      &lt;RowStyle BackColor="#EFF3FB" /&gt;
      &lt;EditRowStyle BackColor="#2461BF" /&gt;
      &lt;SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /&gt;
      &lt;PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /&gt;
      &lt;HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /&gt;
      &lt;AlternatingRowStyle BackColor="White" /&gt;
  &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>and this is the javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var popup;
  function SelectMachineCode() {
      var grvSalesDetails = document.getElementById('&lt;%=grvSalesDetails.ClientID%&gt;');
      popup = window.open("machine_lookup.aspx", "Popup", "width=600,height=300");
      popup.focus();
  }
  
  function OpenMachineLookUp() {
      var _PageUrl = "machine_lookup.aspx";
      OpenNewWindow(_PageUrl, "Machine Information", "800", "500");
  }
  
  function LookUpMachineValues(ID, Name, Model, Code, Usage, Description) {
      var grvSalesDetails = document.getElementById('&lt;%=grvSalesDetails.ClientID%&gt;');            
      var rowId=;//selected rowindex here            
  
          var MID = grvSalesDetails.rows[rowId].cells[1].children[0];
          MID.value = ID;
          var MName = grvSalesDetails.rows[rowId].cells[2].children[0];
          MName.value = Name;
          var MModel = grvSalesDetails.rows[rowId].cells[3].children[0];
          MModel.value = Model;
          var MCode = grvSalesDetails.rows[rowId].cells[4].children[0];
          MCode.value = Code;           
  }
  </code></pre>
  
  <p></p>
  
  <p>I've tried using <code>hiddenfields</code>, <code>parentnode</code>, <code>childnode</code> but couldn't get the selected <code>rowindex</code>. </p>