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

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

12 Answers 589 Views

ToolTip

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

bemara57 asked on 13 May 2008, 05:44 PM

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)?

12 Answers, 1 is accepted

answered on 14 May 2008, 01:53 PM

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

answered on 16 May 2008, 02:43 PM

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

answered on 28 May 2008, 05:43 PM

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...

answered on 30 May 2008, 07:39 AM

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