TFrost TFrost - 1 month ago 11
ASP.NET (C#) Question

Get selected rowIndex of gridview using javascript

I want to get the selected

rowindex
from the
gridview
. In the
gridview
there are 5 columns
ID
,
name
,
model
,
code
and
amount
. It also contains an image, which when clicked opens a popup window by which I can assign values in
ID
,
name
,
model
and
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.

Here is the gridview Code.

<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">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="SNo" />
<asp:TemplateField HeaderText="Machine ID">
<ItemTemplate>
<asp:TextBox ID="txtMID" runat="server" Width="30px"></asp:TextBox>
<img class="style1" alt="" src="../Inventory/Images/BrowseIcon.jpg" onclick="SelectMachineCode(this)"
id="imgMachine" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextBox ID="txtMName" runat="server" Width="120px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Model">
<ItemTemplate>
<asp:TextBox ID="txtMModel" runat="server" Width="80px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Code">
<ItemTemplate>
<asp:TextBox ID="txtMCode" runat="server" Width="70px"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:TextBox ID="txtMAmount" runat="server" Width="90px"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Button ID="AddNewRow" runat="server" CssClass="btnSearch" OnClick="AddNewRow_Click"
Text="Add New Row" />
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" />
</Columns>
<FooterStyle BackColor="#102040" CssClass="mGrid" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>


and this is the javascript

<script type="text/javascript">
var popup;
function SelectMachineCode() {
var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');
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('<%=grvSalesDetails.ClientID%>');
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;
}




I've tried using
hiddenfields
,
parentnode
,
childnode
but couldn't get the selected
rowindex
.

Answer

I got a way to fetch rowindex of gridview when clicking an image.

<ItemTemplate>
    <asp:TextBox ID="txtMID" runat="server" Width="30px"></asp:TextBox>
    <img class="style1" alt="" src="../Inventory/Images/BrowseIcon.jpg" onclick="SelectMachineCode(this)"
        id="imgMachine" />                                                               
</ItemTemplate>

By passing row's property to javascript function and storing index in hiddenValueField I was able to solve the problem.

<script type="text/javascript">
    var popup;
    function SelectMachineCode(row) {
        var rowData = row.parentNode.parentNode;
        var rowIndex = rowData.rowIndex;
        document.getElementById("<%=hdValue.ClientID %>").value = rowIndex;
        popup = window.open("/Machinery/lookup/machine_lookup.aspx", "Popup", "width=800");
        popup.focus();
    }
    function LookUpMachineValues(ID, Name, Model, Code, Usage, Description) {
        var grvSalesDetails = document.getElementById('<%=grvSalesDetails.ClientID%>');
        var rowIndexs = document.getElementById("<%=hdValue.ClientID %>").value;
        var ri = parseInt(rowIndexs);
        var MID = grvSalesDetails.rows[ri].cells[1].children[0];
        MID.value = ID;
        var MName = grvSalesDetails.rows[ri].cells[2].children[0];
        MName.value = Name;
        var MModel = grvSalesDetails.rows[ri].cells[3].children[0];
        MModel.value = Model;
        var MCode = grvSalesDetails.rows[ri].cells[4].children[0];
        MCode.value = Code;
    }
</script>