Close tooltip from button inside tooltip then call event from page

[Shane P]

Hi there,
I am hoping someone can help me out. Let me try explain what I am doing. I have a page that displays thumbnail imagesusing the tooltip manger when a user hovers over the image the tooltip manager loads a usercontrol that displays the normal sized image with a button allowing the user to delete the image.

I have wired up the delete event correctly but I am a little clueless on how I can

•  Close the tooltip after my delete event happens

•  Then once the tooltip has closed call my image binding event on the main page to rebind my list of images removing the image that has just been deleted.
  
  Can anyone suggest what I should be doing?
  
  Thank you

[Svetlina Anati]

Hi Shane,

Straight to your questions:

1. You can close the active tooltip by using the control's client-side API as shown below:
   
   

      function CloseActiveToolTip()
           {
               var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
               if (tooltip) tooltip.hide();
           }

2. You can hook up the RadToolTip's OnClientHide event which fires when the tooltip hides and then perform the desired logic which depends on you and is not related to RadControls. As far as I understood, you want to rebind some controls and this should be done on the server - in this case I recommedn to use AJAX to achieve this. One demo which rebinds a RadGrid from the client by using RadAjaxManager can be found here, you can implement the same logic if you want.

Regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Shane P]

Hi Svetlina,
Thank you for your reply.

I am using a masterpage,a aspx page and a usercontrol. The masterpage contains my ajax manager and my page contains a radajaxpanel.

So am I right by adding

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
   <script type="text/javascript">
 function CloseActiveToolTip() {
            var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
            if (tooltip) tooltip.hide();
        }
        </script>
    </telerik:RadCodeBlock>

into my aspx page, which contains my tooltipmanager. Then in my button on the usercontrol that is loaded inside of the tooltip add this.

    Page.ClientScript.RegisterStartupScript(typeof(Page), "closeit", "<script>CloseActiveToolTip();<script>");

I don't get any errors, nothing happens and if I place a breakpoint in the javascript function it never gets hit.

Can you suggest what I need to change?

THanks
SHane

[Svetlina Anati]

Hello Shane,

As far as I can see from your code, the reason for the problem is that you have not closed the script tag when registering the startup script. After I added the missing slash, it started working as expected. This being said, please modify the code in the following manner:

    Page.ClientScript.RegisterStartupScript(typeof(Page), "closeit", "<script>CloseActiveToolTip();</script>");

and this should fix the issue.

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Shane P]

Thanks Svetlina that was what was causing the problem,

I have got the tooltip now closing by using this in my buttons properties

  <asp:LinkButton ID="btnDeleteImage" runat="server" Text="Delete Image" CssClass="btnSubmitExtended"
        OnClick="btnDeleteImage_Click" OnClientClick="RebindImages()" />

In my button event I have this code.

Page.ClientScript.RegisterStartupScript(typeof(Page), "closeit", "<script>CloseActiveToolTip();</script>");
((ListStolenVehicle)this.Page).ReBindPage();

Which calls th ReBindPage event from my aspx page cs file

        public void ReBindPage()
        {
           lblSomethig.Text = imageRepeater.Items.Count.ToString();
           PopulateImageRepeater();
           Panel1.DataBind();
        }

If I place a breakpoint on the PopulateImageRepeater(); I can see that imageRepeater.Items.Count is correct however even tho this is in an ajax panel the repeater or labels are not been updated.

What do I need to add to cause the ajax update to happen?

[Tervel]

Hello Shane,

We do not have your AJAX code - and we do not know whether you use a RadAjaxManager, or RadAjaxPanel or UpdatePanel. Whatever the approach, however, the problem is most likely that your code/page is not configured to update the part of the page which you expect to be updated. As you point, your server code will execute fine and all settings will be as they should, but then the "right" HTML will not be sent back to the clientside.

Our suggestion is to check documentation on UpdatePanels on www.asp.net or RadAjax documentation on how to do partial page updates properly. For test purposes, you should try updating your panel with an external button. Once you get this working, the code you use together with RadToolTip will work fine.


Greetings,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Shane P]

Hi Tervel,

I am using a masterpage that contains my radscriptmanager and my pages aspx code looks like this (scaled down)

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function conditionalPostback(sender, e) {

var uploadButton = new RegExp("\.btnNext$", "ig");

var upload = $find("<%= radUploadImages.ClientID %>");

//var upload = document.getElementById("<%= radUploadImages.ClientID %>");

if (upload!=null)

{

if (e.get_eventTarget().match(uploadButton)) {

if (upload.getFileInputs()[0].value != "") {

e.set_enableAjax(false);

}

}

}

}

function CloseToolTip() {

var toolTip = $find('RadToolTip1');

toolTip.hide();

}

function RebindImages() {

var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

if (tooltip) tooltip.hide();

}

function CloseActiveToolTip() {

var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();

if (tooltip) tooltip.hide();

}

</script>

</telerik:RadCodeBlock>    <telerik:RadAjaxPanel ID="Panel1" runat="server" ClientEvents-OnRequestStart="conditionalPostback" EnableAJAX="true">     <asp:MultiView ID="vwUserControl" runat="server" ActiveViewIndex="0">           <asp:View ID="vwAddItem" runat="server">           <asp:Repeater ID="imageRepeater" runat="server">               <ItemTemplate>                   <ul class="imageRepeaterul">                       <li class="imageRepeaterli">                           <asp:Image ID="thumbImage" runat="server" CssClass="popupImage" />                       </li>                   </ul>               </ItemTemplate>           </asp:Repeater>       <asp:Label ID="lblSomethig" runat="server" Text="Label"></asp:Label>       <telerik:RadToolTip ID="RadToolTip1" runat="server" Position="Center">       </telerik:RadToolTip>       <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="Center"       RelativeTo="Element" Width="520px" ManualClose="false" Height="450px" Animation="Resize"       ShowCallout="true" Sticky="true" Skin="Web20" OnAjaxUpdate="OnAjaxUpdate">       <TargetControls>       <telerik:ToolTipTargetControl IsClientID="true" TargetControlID="thumbImage" />       </TargetControls>       </telerik:RadToolTipManager>     </asp:View> </asp:MultiView> </telerik:RadAjaxPanel>

   protected void Page_Load(object sender, EventArgs e)
   {
            RadAjaxManager radManager = RadAjaxManager.GetCurrent(Page);
            radManager.AjaxSettings.AddAjaxSetting(Panel1, Panel1);
   }

my cs Page Load

Have I done something wrong with my aspx page?

[Svetlina Anati]

Hello Shane,

As far as I can see from your code you have specified only one target control in the RadToolTipManager  declaration and it is "thumbImage". Please, note that:

You should add all the repeater's items "thumbImage" control to the RadToolTipManager's TargetControls collection, not to only add it once. I suggest to do this in the repeater's ItemDataBound event as shown in the following demos:

http://demos.telerik.com/aspnet-ajax/ToolTip/Examples/TargetControlsAndAjax/DefaultCS.aspx
http://demos.telerik.com/aspnet-ajax/ToolTip/Examples/ToolTipManager/DefaultCS.aspx
http://demos.telerik.com/aspnet-ajax/ToolTip/Examples/ToolTipVersusToolTipManager/DefaultCS.aspx

When you install RadControls, our online examples projects are automatically installed on your computer and you can not only examine their full source code, but also extend them further in order to meet your requirements.

You can open the demos from here:

Start\Programs\Telerik\RadControls for ASPNET AJAX\Open Sample WebSite In VisualStudio

The actual location on your hard disk is the following one:

C:\Program Files\Telerik\RadControls for ASPNET AJAX \Live Demos

I hope that this information is helpful, in case you need further assistance, please prepare a fully runnable reproduction demo, open a new support ticket and send it to me along with detailed reproduction instructions and explanations of the actual and the desired behavior.

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.