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
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
Rank 1
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" />
<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>
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
Rank 1
Rank 1
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
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