fix: asp:ImageButton onclick problem

7 posts, 0 answers
  1. muhammad
    muhammad avatar
    12 posts
    Member since:
    Sep 2008

    Posted 12 Oct 2008 Link to this post

    i have a  telerik:GridTemplateColumn in grid in which i put a  <ItemTemplate> that contains <asp:ImageButton>. i want to change the image in the function onClick.

    Compiler Error Message: CS0123: No overload for 'OnClick matches delegate 'System.Web.UI.ImageClickEventHandler', When i change the Onclick(sender, EventArgs) it runs ok, but i dont get the methods to change the image url of that templete column.


     

  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 13 Oct 2008 Link to this post

    Hello Muhammad,

    I was able to use the GridTemplateColumn to add an ImageButton and handle its OnClick event in the example below.

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml" > 
    8 <head runat="server"
    9     <title></title
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
    14         <telerik:RadGrid ID="RadGrid1" runat="server"  
    15             DataSourceID="SqlDataSource1" 
    16             AutoGenerateColumns="false"
    17             <MasterTableView 
    18                 DataSourceID="SqlDataSource1"
    19                 <Columns> 
    20                     <telerik:GridTemplateColumn> 
    21                         <ItemTemplate> 
    22                             <asp:ImageButton ID="ImageButton1" runat="server" 
    23                                  OnClick="ImageButton1_Click" 
    24                                  ImageUrl='<%# Bind("ImageUrl") %>' /> 
    25                         </ItemTemplate> 
    26                     </telerik:GridTemplateColumn> 
    27                 </Columns> 
    28             </MasterTableView> 
    29         </telerik:RadGrid> 
    30          
    31         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
    32             ConnectionString="<%$ ConnectionStrings:SqlConnectionString %>"  
    33             SelectCommand="SELECT * FROM [Images]"
    34         </asp:SqlDataSource> 
    35     </form> 
    36 </body> 
    37 </html> 
    38  

    1 using System.Web.UI; 
    2 using System.Web.UI.WebControls; 
    3  
    4 public partial class _Default : System.Web.UI.Page 
    5
    6  
    7     protected void ImageButton1_Click(object sender, ImageClickEventArgs e) 
    8     { 
    9         var imageButton = sender as ImageButton; 
    10         if (imageButton != null) 
    11         { 
    12             imageButton.ImageUrl = "~/Images/04.jpg"
    13         } 
    14     } 
    15
    16  


    I'm not sure what your problem might be (without seeing your code), but hopefully this example demonstrates how to implement the scenario you described. I hope this helps. If you have more questions, please let me know.

    Sincerely,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. muhammad
    muhammad avatar
    12 posts
    Member since:
    Sep 2008

    Posted 15 Oct 2008 Link to this post

    i want to trigger ImageButton1_Click on client side, either by

    "onclick" event or by "onClientClick" events, and not on server side??
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 15 Oct 2008 Link to this post

    Hi Muhammad,

    You can try the following code snippet to achieve the desired scenario.

    ASPX:
    <telerik:GridTemplateColumn    HeaderText="TempCol"  UniqueName="TempCol" > 
     <ItemTemplate> 
         <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/pic4.gif"  /> 
     </ItemTemplate> 
    </telerik:GridTemplateColumn> 

    CS:
    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) 
        { 
     
            if (e.Item is GridDataItem) 
            { 
                GridDataItem item = (GridDataItem)e.Item; 
                ImageButton imgbtn = (ImageButton)item["TempCol"].FindControl("ImageButton1"); 
                imgbtn.Attributes.Add("OnClick", "return Change('" + imgbtn .ClientID+ "');"); 
            } 
        } 

    JS:
    <script type="text/javascript" language="javascript" > 
    function Change(Imagebtn) 
     var Imagebtn=document.getElementById(Imagebtn); 
     alert(Imagebtn) 
     Imagebtn.src="Images/pic2.gif" ; 
     return false; 
    </script> 


    Regards
    Shinu.
  6. muhammad
    muhammad avatar
    12 posts
    Member since:
    Sep 2008

    Posted 18 Oct 2008 Link to this post

    i have not fixed the problem yet. The onClick function has some functionality according to my application, so i cant return the change function with onclick, i want to do that on onclientClick. imgbtn.ClientID as you told me in RadGrid1_ItemDataBound. why onclientclick is not firing??

    the other option is to do the same in OnClientClick(sender, eventargs){} to change the image url. Is it possible to get the client id of image in this function. How??


    the following is the source code i am using. plz do help me???


    Each tel me how to bound the OnClientClick event with

    protected
    void OnClick(Object sender, ImageClickEventArgs e)

     

    {

     

    this.Response.Write( " some functionality click");

     

    }



     

    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

     

    {

     

    if (e.Item is GridDataItem)

     

    {

     

    GridDataItem item = (GridDataItem)e.Item;

     

     

    ImageButton imgbtn = (ImageButton)item["AlertIcon"].FindControl("AlertIcon1");

     

     

    imgbtn.Attributes.Add("OnClientClick", "return Change('" + imgbtn.ClientID + "' );");

     


    }}

     

    <telerik:GridTemplateColumn

     

     

    HeaderText="mybutton" >

     

     

    <ItemTemplate>

     

     

    <asp:ImageButton ID="mybutton1" runat="server" ImageUrl='<%# Eval("somevar") %>'

     

     

    OnClick="OnClick" />

     

     

     

     

    </ItemTemplate>

     

     

    </telerik:GridTemplateColumn>

     

  7. mano
    mano avatar
    8 posts
    Member since:
    Oct 2008

    Posted 19 Oct 2008 Link to this post

    When the onclick is fired,

    1) first the icon is changed
    2) that row in which the icon is placed is deleted on next refresh.

    how can i mark the row in onclick event?? so that i can delete it next it. plz help

  8. muhammad
    muhammad avatar
    12 posts
    Member since:
    Sep 2008

    Posted 20 Oct 2008 Link to this post

    When the onclick is fired, i want to add the following functionality.

    1) first the icon is changed 
        as you told in imagebutton1.click event.

    can you give me any clue to do the 2,

    2) that row in which the icon is placed is deleted on next refresh.

    how can i mark the row in onclick event?? so that i can delete it next it.

    plz help

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017