How do I create a ToolTip for items in a ListView control?

[bemara57]

I have products displayed by .NET's ListView control like this:

<asp:ListView ID="productsList" runat="server">
    <LayoutTemplate>
        <asp:DataPager ID="productsPager" runat="server" 
            PageSize="9">
            <Fields>     
                <asp:NumericPagerField
                    ButtonCount="10"
                    NextPageText="..."
                    PreviousPageText="..." />
                <asp:NextPreviousPagerField
                    FirstPageText="First"
                    LastPageText="Last"
                    NextPageText="Next"
                    PreviousPageText="Previous" />
            </Fields>
        </asp:DataPager>
   
        <div class="products">
            <asp:PlaceHolder id="itemPlaceholder" runat="server"></asp:PlaceHolder>
        </div>
    </LayoutTemplate>
    <ItemTemplate>
        <div class="<%= GetProductCssClass() %>">
            <div class="productImage">
                <img src="/images/products/<%# Eval("Image") %>" width="100" />
            </div>
            <div class="productName">
                <asp:Label ID="productName" runat="server">
                    <%# Eval("Name") %>
                </asp:Label>
            </div>
            <div class="productPrice">
                <asp:Label ID="productPrice" runat="server">
                    <%# String.Format("{0:C}", Eval("Price"))%>
                </asp:Label>
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

See the problem is that the items are being generated dynamically, so how can I create a tooltip window for each item generated 9or maybe a master tooltip for all items)?

[Svetlina Anati]

Hello bemara57,

Both RadToolTipManager and RadToolTip controls can be used for tooltipifing. However, there are some significant differences in both implementations and usage and you should decide which approach to choose depending on your particular scenario.

RadToolTipManager's usage

When using the RadToolTipManager control you should iterate through the controls you want to tooltipify and add them to the manager's TargetControls collection. This requires more code than the scenario which uses the RadToolTip control but its main advantage is that the tooltips' content is loaded through AJAX, in the RadToolTipManager's OnAjaxUpdate eventhandler. Furthermore, this approach is suitable for scenarios with WebServices. You can find a similar, working demo here.


RadToolTip's usage

It is more comfortable to use the RadToolTip control when you want to tooltipify a single element. The RadToolTip control can also be included in Item Templates and its content can be set through declarative binding. This requires little code, in fact just declarative setting of the Text property. In this case, the content is not updated through AJAX, it is constant. You can find a similar, working demo here.

In case you still experience problems, please open a new support ticket and attach a fully working project with a detailed explanation of your scenario and the experienced problem.



Best wishes,
Svetlina
the Telerik team

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

[Richard Holland]

Hi,

You mentioned that RadToolTip can be used in ItemTemplates, and the online example that you provided shows this usage as part of a RadGrid.  The example displays data that has already been retrieved as part of the datasource for the grid itself.  How would I create a tooltip for a grid element and display another radgrid within the tooltip.  Can it be done within an embedded tooltip, or must I use the ToolTipMnager in that case?  I have been using the ToolTipManager on a page, but I am running into ViewState problems after a postback.  If I could embed the tooltip in an Item Template, and have that tooltip display another grid, it would solve the ViewState issues I am having..

Thanks for any guidance you can provide.

Jeff

[Svetlina Anati]

Hello Richard,

There are no limitations in the RadToolTip's content controls - you can put whatever you want there, including a grid.


Sincerely yours,
Svetlina
the Telerik team

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

[Jeff Snyder]

Thanks Svetlina.  The RadGrid inside the ItemTemplate would need four of the columns from the outer grid as parameters.  How would I extract those four columns in order to set them as select parameters for the datasource for the grid within the tooltip?

Jeff

[Sebastian]

Hello Jeff,

Consider utilizing client key/values for your outer grid in order to extract the date from the four columns when the tooltip is about to be displayed. Thus you can fetch the values from those columns and use them for the select parameters of the second grid data source. Let me know if I am leaving something from your logic out.

Best regards,
Stephen
the Telerik team

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

[Jeff Snyder]

Hi Stephen,

Your suggestion seems like a great one.  However, I am not using the AJAX version of the Grid, so the ClientDataKeyNames attribute is not available to me.  I tried converting the grid over to the Ajax version, but the 3D skin is gone.  I have used that one throughout my site...

So, I either need another suggestion or getting the key values, or I need some help getting all of the files correct that I need to use for the 3D skin and turn off the embedded skins for the grid...

Thoughts?

Thanks
Jeff

[Jeff Snyder]

Cancel my question...  I found the syntax for client-side key extraction.  Now, how can I get the 3D skin for the AJAX version of the grid?

[Dimo]

Hello Jeff,

You can download the 3D skin for RadGrid from here:

http://www.telerik.com/support/product-skins-downloads.aspx

product: RadGrid for ASP.NET,
version: 3.52

Ths skin will look OK in most scenarios, but you may need to adapt it a little for RadGrid for ASP.NET AJAX by following the guidelines from point 8 :

http://www.telerik.com/help/aspnet-ajax/grdmigrationtoprometheus.html

Let us know if you need further advice.

Sincerely yours,
Dimo
the Telerik team

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

[Jeff Snyder]

Thanks Stephen.  I'll try that skin with the AJAX version and see how it looks.

I've got the tooltip and inner grid inside the template column of the outer grid.  It seems that the tooltips and inner grid for each tooltip are rendered when the outer grid is rendered.  I have 15 records per page in the outer grid, so the prerender event fires 15 times for the inner grid when the page is loaded.  I was hoping to have the inner grid's datasource select parameters set when the user clicks on a certain cell in one of the columns of the outer grid.  I can't seem to capture an event when the user clicks on the template column of the outer grid.  That column is an asp linkbutton and is the target control for the tooltip.  The OnClick event for that linkbutton doesn't seem to fire when it is inside the ItemTemplate for the outer grid...

Any ideas?  The tooltip with the inner grid is not picking up the controlparameters (label fields) that are set client-side when the linkbutton is clicked.  I do have default values set for those select parameters, and the tooltip shows the same grid based upon those default values.  I just need an event to capture so that I can make sure the inner tooltip grid is using the values from the clicked column...

[Sebastian]

Hello Jeff,

Thank you for the additional information you provided. I think that there are two possible solutions for your case:

• intercept the OnRowClick client event of RadGrid, determine whether the user clicked the link button inside the template column (see the project from this code library thread for more info), extract the key values from the relevant grid record and pass them to the select parameters of the data source control which generated the data for the grid inside the tooltip.
• wire the OnClientClick event of the link button residing inside the grid template column. Inside its handler, get reference to the grid item as shown here, fetch once again the key values from the row and use them for select parameter values of the inner grid's data source.

Best regards,
Stephen
the Telerik team

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

[Jeff Snyder]

Thanks Stephen for your response.   I am struggling with what sounds like the simplest part of your two solutions - how to update the select parameters for the datasource of the inner grid and rebind...  Since the inner grids are already fully created when the outer grid is rendered, I'm not sure what server-side event I can utilize to rebind the inner grids.  A small code snippet would help if you have time.  Thanks again!

Jeff

[Sebastian]

Hello Jeff,

When you extract the key value client-side, consider processing and ajax request invoking the ajaxRequest(eventSrc, eventArgs) method of RadAjaxManager (assuming that you ajaxified the grid and the tooltip holding the inner grid via the manager).

Then inside the AjaxRequest handler, modify the select parameters for the nested grid source and refresh the inner grid calling its Rebind() method to reflect the changes. I hope these directions are helpful.

Best regards,
Stephen
the Telerik team

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