This is a migrated thread and some comments may be shown as answers.

fix: asp:ImageButton onclick problem

6 Answers 679 Views

Grid

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 13 Oct 2008, 05:24 AM

Hello Muhammad,

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

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server"  
        
                        DataSourceID="SqlDataSource1" 
        
                        AutoGenerateColumns="false"> 
        
                        <MasterTableView 
        
                            DataSourceID="SqlDataSource1"> 
        
                            <Columns> 
        
                                <telerik:GridTemplateColumn> 
        
                                    <ItemTemplate> 
        
                                        <asp:ImageButton ID="ImageButton1" runat="server" 
        
                                             OnClick="ImageButton1_Click" 
        
                                             ImageUrl='<%# Bind("ImageUrl") %>' /> 
        
                                    </ItemTemplate> 
        
                                </telerik:GridTemplateColumn> 
        
                            </Columns> 
        
                        </MasterTableView> 
        
                    </telerik:RadGrid> 
        
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
        
                        ConnectionString="<%$ ConnectionStrings:SqlConnectionString %>"  
        
                        SelectCommand="SELECT * FROM [Images]"> 
        
                    </asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            public partial class _Default : System.Web.UI.Page 
        
            { 
        
                protected void ImageButton1_Click(object sender, ImageClickEventArgs e) 
        
                { 
        
                    var imageButton = sender as ImageButton; 
        
                    if (imageButton != null) 
        
                    { 
        
                        imageButton.ImageUrl = "~/Images/04.jpg"; 
        
                    } 
        
                } 
        
            }

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

answered on 15 Oct 2008, 01:01 PM

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.

answered on 18 Oct 2008, 09:41 AM

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" >

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

OnClick="OnClick" />

</ItemTemplate>

</telerik:GridTemplateColumn>