Get selected rowIndex of gridview using javascript

Question

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.

TFrost · Accepted Answer · 2015-07-30 12:44:28Z

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>

Joe Schmoe · Accepted Answer · 2016-11-03 14:50:38Z

TFrost's solution works but results are inconsistent and depend on whether pager and/or header controls are displayed.

Let's say you have a header and a pager controls displayed and click on the first data row. JavaScript will return 2 (0 is pager row, 1 is header).

But what if your data set is smaller than page size or you just don't have a pager control at all? In that case pager control will not be displayed and JavaScript will return 1 when you click first data row.

If both pager and header are off JavaScript will return 0 when you click first data row.

Approach I ended up using is to have a primary key (ie unique integer number) in grid view as a separate column. Then you save this number in hidden variable in JavaScript. Then in codebehind you iterate via GridView rows and compare values for this column with the number stored in hidden variable. When match is found this is your selected row.

Collectives™ on Stack Overflow

Get selected rowIndex of gridview using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related