Imagebutton in radtabstrip not firing server on_click event.

[Bob]

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

[Bob]

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

[Shinu]

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.

[Bob]

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!

[Paul]

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

[Yer]

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?

[Peter Milchev]

Hello Yer,

There is a similar online demo with programmatic template: 

• https://demos.telerik.com/aspnet-ajax/tabstrip/examples/application-scenarios/add-remove-tabs/defaultcs.aspx;

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