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

Imagebutton in radtabstrip not firing server on_click event.

6 Answers 87 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 06 Aug 2008, 09:11 PM

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

6 Answers, 1 is accepted

Sort by
0
Bob
Top achievements
Rank 1
answered on 07 Aug 2008, 09:03 PM
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

0
Accepted
Shinu
Top achievements
Rank 1
answered on 08 Aug 2008, 10:41 AM
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.

0
Bob
Top achievements
Rank 1
answered on 08 Aug 2008, 01:50 PM
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!
0
Paul
Telerik team
answered on 08 Aug 2008, 02:10 PM
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.
0
Yer
Top achievements
Rank 1
answered on 05 Jul 2019, 03:36 PM

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?

0
Peter Milchev
Telerik team
answered on 10 Jul 2019, 12:07 PM
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.
Tags
TabStrip
Asked by
Bob
Top achievements
Rank 1
Answers by
Bob
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Paul
Telerik team
Yer
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or