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

Tooltip for Titlebar Icon

6 Answers 61 Views
Window
This is a migrated thread and some comments may be shown as answers.
Monique
Top achievements
Rank 1
Monique asked on 15 Nov 2013, 04:12 AM
Is it possible to add a tooltip to the TitleBar icon, preferably on the server side? I know the tooltip for the TitleBar buttons can be changed thru Telerik.Web.UI.RadWindowUtils.Localization , but there isn't anything for Icon. 

My app allows the user to open multiple windows for various object (such as classes and students). These windows can be minimized, so the user may end up with numerous minimized windows. When a window is minimized I want to be able to identify through the TitleBar icon, with the help of a tooltip, the name of the student.  Note, I do not want to use the TitleBar title as that is already used to identify the class. Besides when the radwindow is minimized the TitleBar title is not fully viewable.

Thanks in advance!

6 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 15 Nov 2013, 10:28 AM
Hi Monique,

This can be done with a couple of lines:
1) add a custom property that will hold the desired attribute to the RadWindow markup declaration
2) use some JavaScript to set it to the icon's title attribute:

<script type="text/javascript">
    function OnClientShow(sender, args)
    {
        $telerik.$(".rwIcon", sender.get_popupElement()).attr("title", sender.get_element().getAttribute("IconTitle"));
    }
</script>
<telerik:RadWindow ID="RadWindow1" runat="server" OnClientShow="OnClientShow" IconTitle="my icon title"
    OpenerElementID="Button1">
</telerik:RadWindow>
<asp:Button ID="Button1" Text="open RW" runat="server" />


An you can set this attribute from the code-behind, of course:
RadWindow1.Attributes.Add("IconTitle", "the desired title");


Regards,
Marin Bratanov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Monique
Top achievements
Rank 1
answered on 15 Nov 2013, 06:21 PM
Hi Marin, Thanks for the quick reply! It seems to work, but it depends on the method used to open the radwindow. If the radwindow is displayed using the Show method it works. However, when using Open it does NOT work. See attached sample. I need to use the Open method as I need to display multiple instances of the same radwindow (hence the reason for the icon tooltip). Is there anyway to get this to work with the Open method?

Thanks!

p.s. I tried to attached the zip file, but it doesn't allow for zip files. So, here is the pages.

<%@ Page Language="VB" AutoEventWireup="false" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

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

<telerik:RadScriptManager ID="RScriptManager" runat="server" />

<telerik:RadScriptBlock ID="RScriptBlock" runat="server">

<script type="text/javascript">

function OnClientShow(sender, args) {

$telerik.$(".rwIcon", sender.get_popupElement()).attr("title", sender.get_element().getAttribute("IconTitle"));

}

function OpenWindow() {

var mgr = $find("<%= wmRadWindowManager.ClientID%>");

var tooltip = document.getElementById('<%= txtTooltip.ClientID%>').value;

$telerik.$(".rwIcon", mgr.get_popupElement()).attr("title", mgr.get_element().setAttribute("IconTitle",tooltip));

mgr.setUrl("rw.aspx");

mgr.open("rw.aspx", null)

//mgr.show(); //must use show for IconTitle will not show

}

function ShowWindow() {

var mgr = $find("<%= wmRadWindowManager.ClientID%>");

var tooltip = document.getElementById('<%= txtTooltip.ClientID%>').value;

$telerik.$(".rwIcon", mgr.get_popupElement()).attr("title", mgr.get_element().setAttribute("IconTitle", tooltip));

mgr.setUrl("rw.aspx");

//mgr.open("rw.aspx", null)

mgr.show(); //must use show for IconTitle will not show

}

</script>

</telerik:RadScriptBlock>

<telerik:RadWindowManager ID="wmRadWindowManager" runat="server"

Behaviors="Minimize, Close, Move"

Height="200px"

IconTitle="IconTitle in Declaration"

Left="225px"

Modal="false"

OnClientShow="OnClientShow"

Title="Class"

Top="50px"

ReloadOnShow="true"

ShowContentDuringLoad="false"

VisibleOnPageLoad="false"

VisibleStatusbar="false"

Width="300px" />

<br /><br />

<asp:Label ID="lblTooltip" runat="server" Text="Add Tooltip" />

<asp:TextBox ID="txtTooltip" runat="server" Width="300px" />&nbsp;

<asp:Button ID="btnOpenRW" Text="Open RW" runat="server" OnClientClick="OpenWindow();return false;" />

<asp:Button ID="btnShowRW" Text="Show RW" runat="server" OnClientClick="ShowWindow();return false;" /><br /><br />

<asp:Label ID="lblInfo" runat="server" Text="With Open RW I can open multiple instances of the same window, but the Icon Tooltip does NOT show. " /><br />

<asp:Label ID="Label1" runat="server" Text="With Show RW I can NOT open multiple instances of the same window, but the Icon Tooltip does show. " />

</form>

</body>

</html

>

<%@ Page Language="VB" AutoEventWireup="false" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

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

<asp:Label ID="Label1" runat="server" Text="Test Tooltip"></asp:Label>

</form>

</body>

</html>


 

 

0
Accepted
Marin Bratanov
Telerik team
answered on 19 Nov 2013, 10:43 AM
Hello Monique,

It does not matter how you open the RadWindow, in any case you can look for the icon and set its title attribute. What is important is to get the needed string to the corresponding RadWindow. I have shown one way that lets you use a custom attribute for instances you declare in the markup, or create in the code-behind.

When you use the RadWindowManager to create a RadWIndow instance dynamically (i.e., one that is not declared in your code), there is no way to set a custom attribute that you can use.

Also, note that you need to use the RadWindow instance, not hte RadWindowManager instance to set the title to. You must not call the show() method for a tooltip manager, not any other of the members of the RadWindow client-side API. The manager has another function and a separate API.

Thus, you only need to show a RadWindow you have declared with the desired custom attribute:
function OnClientShow(sender, args) {
    $telerik.$(".rwIcon", sender.get_popupElement()).attr("title", sender.get_element().getAttribute("IconTitle"));
}
 
function OpenWindow() {
    var mgr = $find("<%= wmRadWindowManager.ClientID%>");
    mgr.open("rw.aspx", "someNamedInstance")
}

Note how there is no other code when opening the popup, its OnClientShow handler will get the custom attribute and use it. Now, the main change is that you need a named instance declared so you can set the custom attribute, for example:
<telerik:RadWindowManager ID="wmRadWindowManager" runat="server"
                          Behaviors="Minimize, Close, Move"
                          Height="200px"
                          IconTitle="IconTitle in Declaration"
                          Left="225px"
                          Modal="false"
                          OnClientShow="OnClientShow"
                          Title="Class"
                          Top="50px"
                          ReloadOnShow="true"
                          ShowContentDuringLoad="false"
                          VisibleOnPageLoad="false"
                          VisibleStatusbar="false"
                          Width="300px">
                          <Windows>
                            <telerik:RadWindow ID="someNamedInstance" runat="server" IconTitle="desired icon title for this instance"></telerik:RadWindow>
                          </Windows>
</telerik:RadWindowManager>

Otherwise, you will need to devise your own logic in the OnClientShow handler to get the needed string (e.g., a page method, a callback, a webservice call so you can get the data from the server, if this is where it is stored), or some customn logic that depends on your business needs.

Regards,
Marin Bratanov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Monique
Top achievements
Rank 1
answered on 20 Nov 2013, 01:42 PM
I got it to work! Thanks Marin, you're the best!
0
As
Top achievements
Rank 1
answered on 27 Nov 2013, 10:09 PM
Hi ,

I am unable to show an image when user hovers the mouse on the title bar of a webpage.
Can you please suggest what script to use to accomplish this objective.

Thanks
0
Marin Bratanov
Telerik team
answered on 29 Nov 2013, 11:05 AM
Hi,

RadWindow offers the IconUrl property that you can point to the the URL of the image you wish to use for its icon.

In case you are looking for setting the icon the browser displays - there are various ways to add a favicon to your site: http://www.w3.org/2005/10/howto-favicon.


Regards,
Marin Bratanov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Window
Asked by
Monique
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Monique
Top achievements
Rank 1
As
Top achievements
Rank 1
Share this question
or