Adding A Webservice Enabled Tooltip To RadComboBox Item

[Paul Herzberg]

Hello,

I sucessfully added a radtooltip to a RadList control by using the ItemDataBound event using this code in the page:

    <telerik:RadToolTipManager ID="radToolTipManager1" runat="server" HideEvent="LeaveTargetAndToolTip"
    Width="250" Height="100" RelativeTo="Element" Position="MiddleRight" ShowDelay="500" >
    <WebServiceSettings Method="GetToolTipData" Path="~/Services/ToolTipWebService.asmx" />
    </telerik:RadToolTipManager>

And this in the code behind

 void RadListBoxSource_ItemDataBound(object sender, RadListBoxItemEventArgs e)
{
    if (e.Item is RadListBoxItem)
        {
            this.radToolTipManager1.TargetControls.Add(e.Item.ClientID, (e.Item as RadListBoxItem).Value, true);
        } 
}

The value is an ID that can be used to return a list from the webservice (in this case a list of Departments the hovered over person works for).

I tried to adapt this code for a RadComboBox on the same page, but no ToolTip is shown.

void ddPerson_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
   if (e.Item is RadComboBoxItem)
   {
      this.radToolTipManager1.TargetControls.Add(e.Item.ClientID, (e.Item as RadComboBoxItem).Value, true);
   }
}

Is there a step that I am missing? The ClientID for the item when I add a breakpoint is something like "i0" which doesn't seem long enough.

Thank you for your help

Paul Herzberg

[Marin Bratanov]

Hello Paul,

You would need to first set the id attribute of each item from the code-behind, because combo box items do not have an ID by design - they have only text and value:

e.Item.Attributes.Add("id", e.Item.ClientID);
this.radToolTipManager1.TargetControls.Add(e.Item.ClientID, (e.Item as RadComboBoxItem).Value, true);

For your convenience I am attaching here a simple page that shows this in action. I have replaced the webservice with an AJAX call to simplify the sample and get it all in two runnable files.

An alternative I can suggest is to use the RadToolTipManager's client-side API along with the RadComboBox's OnClientFocus event to create tooltips on the client, e.g.:

function OnClientFocusHandler(sender, eventArgs)
{
    var items = sender.get_items();
    var tooltipManager = $find("<%= radToolTipManager1.ClientID%>");

    for (i = 0; i < items.get_count(); i++)
    {
        var li = items.getItem(i).get_element();
        li.id = items.getItem(i).get_value();
        var tooltip = tooltipManager.getToolTipByElement(li);
        if (!tooltip)
        {
            tooltip = tooltipManager.createToolTip(li);
            tooltip.set_value(items.getItem(i).get_value());

            //for static text, for load-on-demand leave it commented
            //tooltip.set_text(items.getItem(i).get_text());
        }
    }
}

which will not require OnItemDataBound handler. I am attaching a page with this logic as well.

All the best,
Marin Bratanov
the Telerik team

[Paul Herzberg]

Thank you for your prompt reply. That worked perfectly.

Cheers.

Paul