Execute Javascript function from GridView ItemTemplate button click ASP.NET Web Forms

Question

I have a DataGridView that has two ItemTemplate button columns that are dynamically generated. I have code-behind for the both of the buttons that fire when they are clicked, but I also need a javascript function to run when the btnInfo button is clicked

markup:

 <asp:GridView ID="gridResutls" runat="server" OnRowCommand="gridResutls_RowCommand" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="strName" HeaderText="Name"/>
            <asp:BoundField DataField="strBrand" HeaderText="Brand"/>
            <asp:BoundField DataField="strServing" HeaderText="Serving"/>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <asp:Button ID="btnInfo" runat="server" CausesValidation="false" CommandName="MoreInfo"
                            Text="More Info" CommandArgument='<%# Eval("strID") %>'/>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField ShowHeader="False">
                        <ItemTemplate>
                            <asp:Button ID="btnAdd" runat="server" CausesValidation="false" CommandName="AddItem"
                            Text="Add To Log" CommandArgument='<%# Eval("strID") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
        </Columns>
    </asp:GridView>'

I have a javascript function called populateLabel() that I need to fire off when btnInfo is clicked.

Any ideas? (I know similar questions have been asked and I looked throughout the posts and tried a few things but nothing seems to work)

EDIT: Here is what the code-behind for the ItemTemplate buttons looks like

protected void gridResutls_RowCommand(object sender, System.Web.UI.WebControls.GridViewCommandEventArgs e)
    {

        // Kick out if neither of the two dynamically created buttons have been clicked
        if (e.CommandName != "MoreInfo" && e.CommandName != "AddItem")
        {
            return;
        }

        // If the "More Info" buton has been clicked
        if (e.CommandName == "MoreInfo")
        {
             // Some code
        }

        // If the "Add To Log" button has been clicked
        if (e.CommandName == "AddItem")
        {
            // Some code
        }
    }

tdk · Accepted Answer · 2013-11-08 22:40:55Z

4

You can do something like this.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if(e.Row.RowType == DataControlRowType.DataRow)
        {    
            Button btnAdd = e.Row.FindControl("btnAdd") as Button;
            btnAdd.Attributes.Add("OnClick", "populateLabel();");
        }
    }

markup:

<script type="text/javascript">
    function populateLabel() {
        alert('hi');
    }

</script>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="DSModels" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:Button ID="btnInfo" runat="server" CausesValidation="false" CommandName="MoreInfo"
                    Text="More Info" CommandArgument='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:Button ID="btnAdd" runat="server" CausesValidation="false" CommandName="AddItem"
                    Text="Add To Log" CommandArgument='<%# Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

edited Nov 8, 2013 at 22:40

answered Nov 8, 2013 at 21:20

tdk

523 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stas Bukhtiyarov Over a year ago

Nah that doesn't do it

tdk Over a year ago

It seems to be working. I have built and run a sample app. Please see the updated answer

Stas Bukhtiyarov Over a year ago

You're right it does work. Thank you. The label i have generating in the javascript function pops up for a second then disappears. Does it need to be wrapped in a document.ready?

Software Engineer · Accepted Answer · 2013-11-08 21:53:48Z

1

Use OnClientClick:

<asp:Button ID="btnInfo" runat="server" OnClientClick="populateLabel()" CausesValidation="false" CommandName="MoreInfo"
  Text="More Info" CommandArgument='<%# Eval("strID") %>'/>

Example here.

edited Nov 8, 2013 at 21:53

answered Nov 8, 2013 at 21:23

Software Engineer

3,9861 gold badge28 silver badges35 bronze badges

7 Comments

Stas Bukhtiyarov Over a year ago

OnClientClck doesn't work for some reason. I tried that already.

Software Engineer Over a year ago

What your javascript function does ? Add it to your question.

Stas Bukhtiyarov Over a year ago

Populates a nutrition label using a jquery function that comes from an API. I put a breakpoint on the first line of the function and tried a bunch of different things but it wasnt getting hit

Stas Bukhtiyarov Over a year ago

It does recognize populateLabel in the intellisense when i use the OnClientClick though

Vadim Over a year ago

Look at your source what is the html that the page is generating for the button with the OnClientClick set?

|

Collectives™ on Stack Overflow

Execute Javascript function from GridView ItemTemplate button click ASP.NET Web Forms

2 Answers 2

3 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related