Call Javascript from GridView TemplateField

Question

I have a GridView, I have coded like the below

<asp:TemplateField HeaderText="Item">
 <ItemTemplate>                                            
   <asp:Button ID="btnItem" OnClientClick="javascript:SearchReqsult(<%#Eval("Id") %>);"
 CssClass="Save" runat="server" /> 
</ItemTemplate>
</asp:TemplateField>

I face a run time error which says that my button control is formatted correctly I suppose the issue with the following

OnClientClick="javascript:SearchReqsult(<%#Eval("Id") %>);"

Any idea?

try to use this OnClientClick="javascript:SearchReqsult('<%# Eval("Id") %>');" — Jignesh Rajput
– Jignesh Rajput, Commented Mar 9, 2012 at 9:51

vml19 · Accepted Answer · 2012-03-13 22:01:49Z

2

Try the following code

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
         Button btn = (Button)e.Row.FindControl("btnItem");
         btn.Attributes.Add("OnClick","SearchReqsult(this.id);");
    } 
 }

edited Mar 13, 2012 at 22:01

vml19

3,87211 gold badges48 silver badges65 bronze badges

answered Mar 9, 2012 at 10:19

Vishal Patel

2811 silver badge5 bronze badges

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

1 Comment

Pankaj Over a year ago

ID is the field to bound with button.

Arion · Accepted Answer · 2012-03-09 09:51:06Z

1

Can't you do this is databound. Maybe something like this:

protected void Page_Load(object sender, EventArgs e)
{
    yourGridView.RowDataBound += (s, ev) =>
            {
               if (ev.Row.RowType == DataControlRowType.DataRow)
               {
                   var btn= (Button) ev.Row.FindControl("btnCheque");
                   btn.OnClientClick = "javascript:SearchReqsult(" + 
                                     DataBinder.Eval(ev.Row.DataItem, "Id") + ");";
               }
            };
}

answered Mar 9, 2012 at 9:51

Arion

31.3k10 gold badges74 silver badges89 bronze badges

1 Comment

vml19 Over a year ago

I do update panel post back using __doPostBack inside javascript:SearchReqsult. But Request.Params.Get("__EVENTARGUMENT") is always null when I click on the button. the ID doesnt get passed code behind

Software Engineer · Accepted Answer · 2012-03-09 09:58:36Z

1

Try enclosing javascript function call in single quotes:

OnClientClick='javascript:SearchReqsult(<%#Eval("Id") %>);'

Maybe the problem is with missing/wrong quotes.

answered Mar 9, 2012 at 9:58

Software Engineer

3,9861 gold badge28 silver badges35 bronze badges

1 Comment

Pankaj Over a year ago

This is not rendering the onclick event of properly. Please check your view source of your page.

Neelam · Accepted Answer · 2012-03-09 11:30:55Z

1

Enclose your 'id' field in single quotes.

just replace

 btn.OnClientClick = "javascript:SearchReqsult(" + 
                                 DataBinder.Eval(ev.Row.DataItem, "Id") + ");";

with

 btn.OnClientClick = "javascript:SearchReqsult(" + 
                                 DataBinder.Eval(ev.Row.DataItem, 'Id') + ");";

your code will come as

protected void Page_Load(object sender, EventArgs e)
{
yourGridView.RowDataBound += (s, ev) =>
        {
           if (ev.Row.RowType == DataControlRowType.DataRow)
           {
               var btn= (Button) ev.Row.FindControl("btnCheque");
               btn.OnClientClick = "javascript:SearchReqsult(" + 
                                 DataBinder.Eval(ev.Row.DataItem, 'Id') + ");";
           }
        };
}

answered Mar 9, 2012 at 11:30

Neelam

1,07812 silver badges26 bronze badges

1 Comment

Pankaj Over a year ago

We can directly move Your above mentioned code to HTML side only.

Indi · Accepted Answer · 2012-03-09 11:55:34Z

1

This is what you need to do

CODE BEHIND:

protected void GridView_RowCreated(object sender,GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (((DataRowView)e.Row.DataItem) !=null)
            ((Button)e.Row.FindControl("btnCheque")).Attributes.Add("onclick","SearchReqsult(" + ((DataRowView)e.Row.DataItem)["productId"].ToString() + ")");

    }
}

HTML:

<asp:Button ID="btnCheque" CssClass="Save" runat="server" Text="My Button" />

answered Mar 9, 2012 at 11:55

Indi

33.9k7 gold badges61 silver badges80 bronze badges

7 Comments

Indi Over a year ago

Change "productId" column name to your column name "id". This is a working code example.

Pankaj Over a year ago

Your lazy loading is wrong in this context. DataRowView cannot be null.. Instead you can check ((DataRowView)e.Row.DataItem)["Id"] for null values.

Pankaj Over a year ago

Why you should go for code behind for such a small task? Just need to call the client function on button click. So no need to waste execution time in executing code behind as well...

Indi Over a year ago

@PankajGarg DataRowView can be null on post back. Have a look.

Pankaj Over a year ago

DataRowView cannot be null. Reason is, the datasource suppose offers you 10 row, this means that you have view of 10 rows. So itself row cannot be null. BUT the cell value can be null. If row is null, then what are you expecting from your DataSource ? If you are expecting no rows then it will not come to RowboundData for DataItem iteration.

|

Pankaj · Accepted Answer · 2012-03-09 14:35:31Z

1

Try with String.Format Class

<asp:Button ID="btnCheque" runat="server" 
OnClientClick=<%#String.Format("return SearchReqsult('{0}');", Eval("ID")) %> />

edited Mar 9, 2012 at 14:35

answered Mar 9, 2012 at 11:02

Pankaj

10.2k40 gold badges152 silver badges298 bronze badges

Comments

Kaushik Patel · Accepted Answer · 2012-03-09 09:51:50Z

0

Put Labe l and bind Id in that and make it visible false.

On GridView RowDatabound event add attrinute to control and assign javascript on button onclientclick event

answered Mar 9, 2012 at 9:51

Kaushik Patel

1

Comments

PraveenVenu · Accepted Answer · 2012-03-09 11:54:27Z

0

Try with single quotes instead of double and string.Format()

<asp:Button ID="btnCheque" OnClientClick=<%# string.Format("javascript:SearchReqsult('{0}');return false;",Eval("id")) %> CssClass="Save" runat="server" />

edited Mar 9, 2012 at 11:54

answered Mar 9, 2012 at 11:04

PraveenVenu

8,3674 gold badges32 silver badges39 bronze badges

3 Comments

Pankaj Over a year ago

This is not rendering the onclick event properly. Please check the View source in your page.

PraveenVenu Over a year ago

I have updated the code. This should work. Please remove the retun false; if you dont need.

Pankaj Over a year ago

Still there is one formatting issue. Single quote is missing around the {0} and single quote not required before your <%#

Sandip Patel · Accepted Answer · 2017-07-21 07:43:51Z

0

Call javascript function from Template Field

<asp:TemplateField HeaderText="Status" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
    <asp:LinkButton ID="lnkDelete" OnClientClick=<%#String.Format("return dis_status('{0}');", Eval("Status")) %> runat="server" CommandArgument='<%# Eval("AgtId")%>' Text='<%# Eval("Status")%>' CommandName="cmdDelete" />
</ItemTemplate>

edited Jul 21, 2017 at 7:43

answered Jul 21, 2017 at 7:36

Sandip Patel

12 bronze badges

Collectives™ on Stack Overflow

Call Javascript from GridView TemplateField

9 Answers 9

1 Comment

1 Comment

1 Comment

1 Comment

7 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

1 Comment

1 Comment

1 Comment

7 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related