RadGrid and Tooltip

[John]

I'm using the radgrid and have it as a databound columns.  How can i insert a tooltip on a specific column where each row passes its unique id to web service for the text?

I'm having trouble figuring out how to procede and can't find an example similar to this.  Thanks.

[Tervel]

Hello John,

I suggest looking at the following two examples:

Bind To Target
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/BindToTarget/DefaultCS.aspx
This example shows three scenarios of binding the tooltip - and one of them is using Telerik RadGrid with bound columns.

WebService
http://www.telerik.com/DEMOS/ASPNET/Prometheus-futures/ToolTip/Examples/WebService/DefaultCS.aspx
This example from the Futures build demos shows configuring the tooltip to a web-service using the Northwind database.

Essentially what you need to do is combine the two examples. If you feel more comfortable with AJAX,then first implement your code to run with the RadToolTipManager OnAjaxUpdate handler, then replace it with a WebService, as demonstrated in the second example.


Best wishes,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[JustinWong]

Hi: I looked at the example. True, one of them showed ToolTip with a grid with bound column. HOWEVER, the ToolTip in this example doesNOT target the boundcolumn. Instead, it targets a template column.  How to you set a RadToolTip for a bound column?  For example, in the demo you referred to, how does one set a RadToolTip for the bound ID column (instead of the templated name column)?

[Svetlina Anati]

Hello Justin,

 

What I suggest is the following:

1) Use the ItemDataBound event in order to be able to reference the items
2) In 1) find the desired particular cell you want to tooltipify
3) Add its client ID to the TargetControls collection

You can see this logic in the demo below (the GridView, tooltipified by the manager, note that this is not a RadGrid but the logic is very similar and you can use it as a start point):


http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipversustooltipmanager/defaultcs.aspx


In case you encounter a problem, let us know and provide more details on the issue and we will do our best to help.

Regards,
Svetlina Anati
the Telerik team

[Albert Shenker]

How would one tootipify a grid CELL not a grid row. The example you provided shows a row. I tried getting a reference to the cell clientId in the ItemDataBound event using the following but it didn't work:

Dim dItem As GridDataItem = CType(e.Item, GridDataItem)

                myToolTipManager.TargetControls.Add(dItem("colname").ClientID, someValue, True)

[Marin Bratanov]

Hi Albert,

The following help article shows how you can access cells and rows: http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html. Its second section treats your case.

Said shortly, you will need exactly what you supposed:

Me.RadToolTipManager1.TargetControls.Add(CType(e.Item, GridDataItem)("UnitPrice").ClientID, (TryCast(e.Item, GridDataItem)).GetDataKeyValue("ProductID").ToString(), True)

I tried this in the following online demo: http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx?product=tooltip. I am attaching here the file and a video from my test.


Kind regards,
Marin Bratanov
the Telerik team

[Waseem]

My Dear, use this code to add tooltip to specific column

<telerik:GridTemplateColumn DataField="Message" HeaderText="Message" SortExpression="Message" UniqueName="Message">
                                            <ItemStyle Width="350px"></ItemStyle>
                                            <ItemTemplate>
                                                                   
<asp:LinkButton ID="lnkMessage" CssClass="mylink" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Message") %>' />
                                            <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="lnkMessage" Text="View Detail"
                                                RelativeTo="Mouse" Position="TopLeft" ></telerik:RadToolTip>
                                        
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>

Regards
Muhammad Waseem

[Luis]

And how can I add a tooltip for every cell, showing some values related to this cell itself? 

Luis

[Albert Shenker]

Check out Marin's reply in this thread on 9/28/2012.