How can I get the value of the CommandArgument in javascript?

Question

I have a gridview that displays a list of files on screen. The column in this view is an asp link button titled Edit. When I click edit, I want to get the value of the commandargument in a javascript function.

function OnEditClick(s, e)
{
    console.log('on edit click fired')
    var values = [];
    values[0] = "Enter document description";
    values[1] = "Edit";
    values[3] = e.CommandArgument.ToString();
    console.log('slowly but surely getting there from here... '+ values[3])
}

<asp:GridView AlternatingRowStyle-CssClass="gridViewAlternatingRow"
    AutoGenerateColumns="False"
    DataKeyNames="Id"
    HeaderStyle-CssClass="gridViewHeader"
    ID="gvDocuments"
    ClientInstanceName="gvDocument"
    OnRowEditing="OnRowEditing"
    RowStyle-CssClass="gridViewRow" runat="server" Caption="DocumentList" CaptionAlign="Right">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton CommandArgument='<%#Bind("Id") %>' CommandName="DocDownload" ID="lnkDownload"
                    runat="server" Text="Download">
                </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="ID">
            <ItemTemplate>
                <asp:Label CssClass="txtAlignCenter" ID="lblId" runat="server" Text='<%#Bind("Id") %>' Width="50px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Type">
            <ItemTemplate>
                <asp:Label ID="lblContentType" runat="server" Text='<%#Bind("ContentType") %>' Width="210px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="lblDescription" runat="server" Text='<%#Bind("Description") %>' Width="380px"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Document Desc">
            <ItemTemplate>
                <asp:Label ID="lblDocDescription" runat="server" Text='<%#Bind("DocumentDescription") %>' Width="380px">
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="lnkEditButton"
                    OnClientClick="OnEditClick()"
                    Text="Edit" CommandName="EditDocument"
                    CommandArgument='<%#Eval("Id")%>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

When I use the following code, I get an error in the chrome console stating that the property CommandArgument is undefined. The exact text of the error is

Uncaught TypeError: Cannot read property 'CommandArgument' of undefined

What is missing in my code?

at OnEditClick (Default.aspx:34)

Answer 1

since your command argument is Id, try to add Id hidden field to your gridview column

<asp:TemplateField>
    <ItemTemplate>
      <span style="display:none"><%# Eval("Id") %></span>
  <asp:LinkButton runat="server" Id="lnkEditButton"
OnClientClick="OnEditClick()"
   Text="Edit" CommandName="EditDocument"
CommandArgument='<%#Eval("Id")%>'/>
</ItemTemplate>
  </asp:TemplateField>

and use javascript to get value on edit click

var id = $(this).closest("tr").find('span').html();

Answer 2

I would add a separate data property to the LinkButton and read from that.

<asp:LinkButton runat="server" ID="lnkEditButton"
    OnClientClick="OnEditClick(this.id)"
    Text="Edit" CommandName="EditDocument"
    CommandArgument='<%# Eval("Id") %>' 
    data-argument='<%# Eval("Id") %>' />

Then in OnEditClick you can read that property.

<script>
    function OnEditClick(element) {
        alert($('#' + element).data('argument'));
    }
</script>

Update

Without jQuery you can do this. Make sure you change to OnClientClick="OnEditClick(this)"

<script>
    function OnEditClick(element) {
        alert(element.getAttribute('data-argument'));
    }
</script>