Imagebutton in radtabstrip not firing server on_click event.

7 posts, 1 answers
  1. Bob
    Bob avatar
    29 posts
    Member since:
    Jul 2008

    Posted 06 Aug 2008 Link to this post

    Is there anything special I need to do to get an imagebutton click event to fire on the server?

    I have an imagebutton in the template for the tabstrip.
    If I take that imagebutton and place it directly on the page, the click event works fine for the copy outside of the tabstrip.

    <TabTemplate >

    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/image_new.gif" OnClick="ImageButton1_Click"/>

    and code:

    Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)

    Dim x As Integer = 1

    End Sub

  2. Bob
    Bob avatar
    29 posts
    Member since:
    Jul 2008

    Posted 07 Aug 2008 Link to this post

    OK, here is complete demo code.
    Grateful if anyone has any ideas.
    To test, simply put breakpoints on the three event End Sub statements and debug it.
    Note that the imagebutton outside the tabstrip does trigger the server event.

    <%

    @ Page Language="vb" AutoEventWireup="false" CodeBehind="TabStripProblem1.aspx.vb" Inherits="nPOS_Modifiers.TabStripProblem1" %>

    <%

    @ 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>Untitled Page</title>

    <script type="text/javascript">

    function pageLoad() {

    }

    </script>

    </

    head>

    <

    body>

    <form id="form1" runat="server">

    <div>

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <asp:Panel ID="Panel1" runat="server">

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="780px" MultiPageID="RadMultiPage1" SelectedIndex="0" CausesValidation="False"

    ClickSelectedTab="True">

    <TabTemplate >

    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" UseSubmitBehavior="False" />

    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/image_new.gif" OnClick="ImageButton1_Click"/>

    &nbsp;&nbsp;&nbsp;

    <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"

    ontextchanged="TextBox1_TextChanged"></asp:TextBox>

    </TabTemplate>

    </telerik:RadTabStrip>

    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

    </telerik:RadMultiPage>

    <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/image_new.gif" OnClick="ImageButton1_Click"/>

    </asp:Panel>

    </div>

    </form>

    </

    body>

    </

    html>





    and the code




    Imports

    Telerik.Web.UI

    Partial

    Public Class TabStripProblem1

    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

    For x = 1 To 3

    Dim this As New RadTab

    this.Text = x

    this.Value = x

    RadTabStrip1.Tabs.Add(this)

    Next

    End If

    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)

    End Sub

    Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)

    End Sub

    Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As EventArgs)

    End Sub

    End

    Class

  3. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Aug 2008 Link to this post

    Hi Bob,

    I tried  this on my end and the Click event of the ImageButton inside a TabStrip is getting fired properly. I found a forum link discussing such an issue with LinkButton. Go through the forum discussion and see whether it is helpful.
    Linkbutton in tab template

    Regards
    Shinu.

  4. Bob
    Bob avatar
    29 posts
    Member since:
    Jul 2008

    Posted 08 Aug 2008 Link to this post

    Bingo!

    Telerik really should have this factoid as a prominent note right in the help page for the tabstrip control, right where they say you can embed any other control into the tabstrip.

    I spent a good couple of days trying to figure out why the damn thing wasn't firing the server-side event.

    Thank you VERY MUCH for taking the time to reply!
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 08 Aug 2008 Link to this post

    Hi Bob,

    The DOM event model provides a concept called event bubbling. For example, suppose an onclick event handler were assigned to the DIV in the example below. Clicking on the link would fire the event first on the A element, it would then "bubble" up to the containing P element and then up to the DIV where the handler function would be called.

    It's possible for the handler to cancel the event, but assuming it doesn't the event would continue bubbling on up to the document root and finally, the browser would follow the default action of loading the link's URL in the window.

    Note that the P element could also have had an onclick event handler set, as could any elements above the DIV in the document tree. All of these handlers would be called in turn as the event bubbles up to the document root.

    This is known as the bubble phase in the DOM event model. Not all events bubble, for example onfocus and onblur do not. Likewise, not all bubbling events can be canceled, stopping the propagation. You can determine which events bubble and can be canceled either by looking up the documentation for the event or, as we'll see, using the Event object.

    To illustrate, consider the following HTML: 
    <div>   
        <p>Some text in a paragraph element.</p>   
        <p>Another paragraph element with text.</p>   
        <p>Yet another paragraph with text and also a <href="blank.html">link</a>.</p> originalAttribute="href" originalPath=""blank.html">link</a>.</p>"   
    </div> 



    Regards,
    Paul
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Yer
    Yer avatar
    1 posts
    Member since:
    Apr 2019

    Posted 05 Jul in reply to Paul Link to this post

    Hi Paul, you've explain event bubbling but did not provide an valid solution for the question. I too am running into this issue, I thought I could set the command args or the command name on my button inside the template and capture it as it bubbles up but the RadTabStripEventArgs does not provide any access to those properties of the event. I looked at the only available object (Tab) but it doesn't provide any identifiable data that I can use to determine if it is a tab click or a child control event.

    Is there a delete tab example or even an example on how to handle child control events on the server?

  7. Peter Milchev
    Admin
    Peter Milchev avatar
    567 posts

    Posted 10 Jul Link to this post

    Hello Yer,

    There is a similar online demo with programmatic template: 

    Also, the Telerik's RadImageButton does not have the ImageButton click issue so you can use RadImageButton in the tab template. 

    <style>
        .RadButton.remove-icon {
            vertical-align: super;
        }
    </style>


    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" OnTabClick="RadTabStrip1_TabClick" MultiPageID="RadMultiPage1">
        <TabTemplate>
            <asp:Label Text='<%# Container.Text %>' ID="Label1" runat="server" />
            <telerik:RadImageButton ID="RemoveIcon" CssClass="remove-icon" OnClick="RemoveIcon_Click" Image-Url="https://via.placeholder.com/9" runat="server" />
        </TabTemplate>
        <Tabs>
            <telerik:RadTab Text="Tab 1"></telerik:RadTab>
            <telerik:RadTab Text="Tab 2"></telerik:RadTab>
            <telerik:RadTab Text="Tab 3"></telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
        <telerik:RadPageView ID="RadPageView1" runat="server">
            Page 1
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server">
            Page 2
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView3" runat="server">
            Page 3
        </telerik:RadPageView>
    </telerik:RadMultiPage>

    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (RadTab tab in RadTabStrip1.Tabs)
        {
            tab.DataBind();
        }
    }
     
    protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
    {
     
    }
     
    protected void RemoveIcon_Click(object sender, ImageButtonClickEventArgs e)
    {
        var btn = sender as RadImageButton;
        var tab = btn.Parent as RadTab;
        var tabstrip = tab.TabStrip;
        tabstrip.Tabs.Remove(tab);
    }


    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top