22 Answers, 1 is accepted
There are such demos in our online resources but I am not quite sure exactly which ones would help you because there is a difference in the scenarios when using RadGrid and RadGrid "Prometheus" and I don't know which version of RadGrid you are using. Therefore I suggest you to check out the following links:
RadGrid "Prometheus" and RadToolTip:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/BindToTarget/DefaultCS.aspx
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/ToolTipGrid/DefaultCS.aspx?product=tooltip
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/LoadOnDemand/DefaultCS.aspx
RadGrid Classic and RadToolTip:
http://www.telerik.com/community/forums/thread/b311D-hkhhd.aspx
Please, examine them and in case you experience problems in your implementation, open a new support ticket and send us what you have done so far. As soon as we receive your project, we will do our best to help you.
Greetings,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I created follwing column in the Grid:
| <telerik:GridTemplateColumn AllowFiltering="False" CurrentFilterFunction="NoFilter" |
| FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="" |
| SortExpression="" UniqueName="Info"> |
| <HeaderTemplate> |
| Datum |
| </HeaderTemplate> |
| <ItemTemplate> |
| <asp:LinkButton ID="lnkBOInfo" runat="server"><img runat="server" id="imgBOInfo" alt="" src="images/dialog/info.gif" style="border:0px;vertical-align:middle;" /></asp:LinkButton> |
| </ItemTemplate> |
| </telerik:GridTemplateColumn> |
I add "imgBOInfo" to the "radToolTipManager". The problem is now that tooltip appears only in the first record. How can I show the tooltip for all records?
The tooltip is a "LoadOnDemand" tooltip, In "AjaxUpdate" of "radTooltipManager" I pass values to the "tooltip.aspx" page. One question is now how can I get the "DataKeyValue" of the row where the user has currently the mouse over to pass this value in URL?
I am not quite sure why only the first record is tooltipified - I suppose that probably you don't add the other targets to the RadToolTipManager's TargetControls collection. Make sure that you do this in the Item_DataBound event handler - this will ensure that the target for each databound record is added.
For your second question I suggest looking at the following link:
grid documentation
In case you experience problems in your implementation, please open a new support ticket and send us what you have implemented so far. Once we receive it we will do our best to help you.
Regards,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
1. Thanks for help, I add the control to tooltipify to radToolTipmanager as posted in my last replay and in the Online-Demo I cannot see the difference to may way. I hope you can point me in the right direction here, how to add "'all" controls to the TooltipManager.
2. The link you provide shows how to determine clicket row on client side with "OnRowSelected" but I have no row selected, I need to determin the row server side (code behind) where the mouse pointer is over. Hope you can give me here another tip.
Thanks in advance.
I prepared a sample project for you which displays a RadToolTip on each row the RadGrid. You will find additional comments in the code, especially where the target controls are added to the RadToolTipManager's TargetControls collection.
As to your second question, this should be done by detecting the on mouse over event client-side and taking the row index there. After that you should perform a postback and provide this value on the server.
There are several ways to call a serverside code and pass an argument from the client which vary depending on the scenario. Which one you would choose depends on you, because such task is not directly related to the RadToolTip control. For example you can submit the whole form, use __doPostback() or an AJAX request to run your code on the server - more information on the subject is available in various places in the Net. If you are using RadAjax, you can also use RadAjaxManager's AjaxRequest and pass the arguments with it.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Hello Swetlina,
thanks for your help, I get it work with your sample projet!
But there a two new things:
1. If the a tooltip is to height and the control for the tooltip is near bottom webbrowser border it doesn't show at the correct position with attribute Position="BottomRight". Is this a setting or a bug?
2. If you use IE7 (tested on more than one computer, happens only with IE7) and you use sticky="true" there is a strange behaviour. If you have the mouse inside the tooltip and you move the mouse pointer quickly (seems before the tooltip closes automatically.) outside the tooltip to right side the IE7 crashs (message that a problem occures and application must be closed). Bug in tooltip or in IE7?
Regards Markus
Up to your questions:
- The RadToolTip's designed behavior is to show always in the visible browser area. Therefore, when it should exceed the screen bounds it recalculates its coordinates and reposition. You can change this behavior by javascript means. For this purpose you should obtain a reference to the RadToolTipManager and set the popupBehavior's keepInScreenBounds property to false as shown below:
function Configure(sender, args) { sender._popupBehavior.set_keepInScreenBounds(false); }
| <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="OnAjaxUpdate" Position="BottomRight" OnClientBeforeShow="Configure"> |
| </telerik:RadToolTipManager> |
2. The RadToolTip's boundary detection was significantly improved in our last, "Futures" build. Therefore I suggest downloading it and testing your project with it. The "Futures" build is available for download from your Client.net account.
Greetings,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
thanks for help and information, I get it work
Regards Markus
Rank 1
I find out that problem in Ponit 2 still exist.
Regards Markus
Would you please test your scenario with the latest Q1 Release of the RadControls for ASP.NET AJAX, Telerik.Web.UI.dll , Version 2008.1.415.20.
In case you are still able to reproduce the problem, please open a new support ticket and send us a fully working demo project (including database, user controls, etc. if needed) along with a detailed explanation of the reproduction steps and the desired behavior.
Once we get it, we will make further research and we will do our best to improve the behavior.
Regards,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Rank 2
How can I create a tooltip for a GridButtonColumn?
The following shows how to set up a tooltip
for a GridBoundColumn or column header but it seems not to work for a GridButtonColumn.
http://www.telerik.com/help/aspnet-ajax/grdtooltipsforgriditems.html
At the following URL there is a nice example but I cannot make it work for a GridButtonColumn.
http://www.telerik.com/community/forums/aspnet-ajax/tooltip/tooltip-for-radgrid-row.aspx
I want a simple, constant value of the tooltip. I do not need a complex value of the tool tip that depends on the value in the row clicked (like Product ID).
Specifically, when the user puts the mouse over the imagebutton in any row I want the tooltip to show "Edit SCS".
Supplose I add an image button to this example, as in the last column below:
<Columns>
<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ProductID" DataType="System.Int32"
FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ProductID"
ReadOnly="True" SortExpression="ProductID" UniqueName="ProductID">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ProductName"
FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ProductName"
SortExpression="ProductName" UniqueName="ProductName">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="ToolTipified">
<ItemTemplate>
<asp:LinkButton ID="targetControl" runat="server">Show Tooltip</asp:LinkButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/EditSCS.gif" Text="EditSCS"
UniqueName="ES" CommandName="Edit" CommandArgument="ES" >
</telerik:GridButtonColumn>
</Columns>
Can you show how to set up a tooltip for this image button?
Rank 2
I learned I can set up a tooltip easily for an asp:imagebutton using a GridTemplateColumn like this:
<telerik:GridTemplateColumn CurrentFilterFunction="NoFilter" DataField="Description"
FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="Description"
SortExpression="Description" UniqueName="Description">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/EditSCS.gif"
Text="EditSCS" />
<telerik:RadToolTip ID="RadToolTipDescription1" runat="server" TargetControlID="ImageButton1"
RelativeTo="Element" Skin="WebBlue" Position="BottomRight" Animation="None" HideDelay="1000"
AutoCloseDelay="3500" Width="150px" ContentScrolling="Auto" Text="Edit SCS">
</telerik:RadToolTip>
</ItemTemplate>
</telerik:GridTemplateColumn>
But I am using a GridButtonColumn so I can capture the RadGrid1_ItemCommand to set up editing for a user control, like this:
(and I don't know how to set up this code if I use a GridTemplateColumn instead of a GridButtonColumn)
<rad:GridButtonColumn ButtonType="ImageButton" ImageUrl="~/Images/EditSCS.gif" Text="EditSCS"
UniqueName="ES" CommandName="Edit" CommandArgument="ES">
protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
if (e.CommandName == "InitInsert")
{
if (((LinkButton)e.CommandSource).CommandArgument == "ES")
{
RadGrid1.MasterTableView.EditFormSettings.UserControlName = "~/Controls/UsersControlEditSCS.ascx";
}
else
{
RadGrid1.MasterTableView.EditFormSettings.UserControlName = "~/Controls/UsersControlEdit.ascx";
}
As you do not use Item Template and thus cannot define a RadToolTip for each item, I would recommend that you use RadToolTipManager.
For example:
| <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"> |
| </telerik:RadToolTipManager> |
| <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" |
| OnItemDataBound="RadGrid1_ItemDataBound" |
code-behind:
| protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) |
| { |
| if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem) |
| { |
| Control button = (e.Item as GridDataItem)["ES"].Controls[0]; |
| if (!Object.Equals(button, null)) |
| { |
| RadToolTipManager1.TargetControls.Add(button.ClientID, true); |
| } |
| } |
| } |
I have attached my test page for your reference.
Greetings,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 2
Rank 2
I assume that most probably what happens is that the tooltips after the sorting show the old information. If so, please note that if you sort the grid by using AJAX you should also update the RadToolTipManager along with the grid - e.g. if you are using an update panel you should also move the RadToolTipManager in the panel, too.
You can find a demo which explains the updates of a tooltipified grid below:
http://demos.telerik.com/aspnet-ajax-beta/tooltip/examples/targetcontrolsandajax/defaultcs.aspx
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
We can also use ItemDataBound event for simple tooltip of a grid as:
<
telerik:GridButtonColumn ButtonType="ImageButton" CommandName="MyCommand" HeaderButtonType="None" UniqueName="MyCommand" ImageUrl="~/MyImage.gif">
<HeaderStyle Width="5%" HorizontalAlign="Center" />
<ItemStyle Width="5%" HorizontalAlign="Center" />
</telerik:GridButtonColumn>
protected
void myGrid_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
{
e.Item.Cells[0].ToolTip = "My Custom Simple Tooltip"; // Check your Cell index based on position of Column
}
}
Regrads,
Imran Javed Zia
Rank 1
This is the tofix only the first record is tooltipified
<ItemTemplate >
<asp:HyperLink ID="HyperLink1" runat="server" Width="10px" Height="50px"
>
<asp:Image ID="Image2" runat="server" Width="90px" Height="120px" ImageUrl='<%# Eval("imgFile") %>' ToolTip="Show album" RelativeTo="Element" Position="MiddleRight" EnableShadow="true"/> </asp:HyperLink>
<telerik:RadToolTip ID="RadToolTip3" runat="server" TargetControlID="image2"
Animation="Slide" Position="MiddleRight">
</telerik:RadToolTip>
</ItemTemplate>
Rank 1
last column.
Is there a way of allowing the Tooltip to resize itself "outside" of its container (RadGrid)?
The issue being that depending on the number of rows returned in the table, if there is say only on row returned, the tooptip height will be truncated to only be as big as the table, and not show it's entire contents.
Cheers for any help.
Would you please set RenderInPageRoot="true" and test again? When this property is true, the tooltip is rendered as a form child and I assume that the problem in your case comes from the fact that it is rendered as a child of the grid.
Let me know whether this fixed the issue.
Svetlina
the Telerik team
Rank 1