Passing value from Gridview to Hiddenfield thru Javascript returns null

Question

I m passing a field value to Javascript like below.

            <asp:TemplateField>
                <ItemTemplate>
                    <a href="JavaScript:divexpandcollapse('div<%# Eval("ClaimMasterId") %>');">
                        <img id='imgdiv<%# Eval("ClaimMasterId") %>' width="9px" border="0" src="Img1/plus.gif" alt="" title="Add Action Notes" /></a>                        
                </ItemTemplate>
                <ItemStyle Width="10px" VerticalAlign="Middle"></ItemStyle>
            </asp:TemplateField>

Javascript:

<script type="text/javascript">
    function divexpandcollapse(divname) {
        debugger;
        var div = document.getElementById(divname);
        document.getElementById('<%= HiddenField1.ClientID %>').value = div;
        var img = document.getElementById('img' + divname);
        if (div.style.display == "none") {
            div.style.display = "inline";
            img.src = "Img1/minus.gif";
        } else {
            div.style.display = "none";
            img.src = "Img1/plus.gif";
        }
    }
</script>

And I m getting the hiddenfield value on code behind like this:

    protected void ClearImageButton_Click(object sender, ImageClickEventArgs e)
        {
            string s = HiddenField1.Value;
        }

Assume, the ClaimMasterId value is 4507, then while debugging the Javascript in IE, I noticed the passing value is 'div4507' but in Code behind null value returns. Where I did the mistake. Can anyone guide me.

Actually, I m using gridview with expand collapse function using javascript. Without using the SelectedIndexChanged event, I m trying to get the row value using javascript. 'ClaimMasterId' is the key value for each rows, so if I get that value while the user clicked on the 'plus' image that means expanded the gridview, then I can update some fields on that respective row using this Id.Is there any other approach to get the Id without using SelectedIndexChanged event.

Answer 1

I tried it with this snippet and it works like it should:

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <a href="JavaScript:divexpandcollapse('div<%# Eval("ClaimMasterId") %>');">
                    <img id="imgdiv<%# Eval("ClaimMasterId") %>" width="9" border="0" src="Img1/plus.gif" alt="" title="Add Action Notes" />Link</a>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<script type="text/javascript">
    function divexpandcollapse(divname) {
        document.getElementById('<%= TextBox1.ClientID %>').value = divname;
    }
</script>

Answer 2

After a tough time, I withdrawn the javascript concept and used the SelectedIndexChanged event using Datakeys.

Added in Gridview

DataKeyNames="ClaimMasterId"

And in C#

ClaimMasterIdHF.Value = (gvClaimMaster.DataKeys[gvClaimMaster.SelectedIndex].Values["ClaimMasterId"]).ToString();