ToolTips in RadGrid

[Dip]

Hi,
Basicaly I am trying to achieve what you guys have shown on the demo
http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipversustooltipmanager/defaultcs.aspx
I have almost duplicate the code , but am running into js error

if

 

(_d[i].id==this._getUpdatePanelID()) where object is expected as "this" is null..

My Code ...

MainUserControl.ascx

 

<%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

 

 

 

<%

@ Register src="../ToolTips/ToolTipInfo.ascx" tagname="ToolTipInfo" tagprefix="uc3" %>

 

 

 

<

 

telerik:RadToolTipManager ID="RadToolTipManager1"

 

 

 

 

 

runat="server" Position="Center"

 

 

OnAjaxUpdate="ToolTip_OnAjaxUpdate">

 

 

 

 

 

</telerik:RadToolTipManager>

 

<

 

telerik:RadGrid ID="ClientUserRadGrid" runat="server" EnableEmbeddedSkins="False"

 

 

Skin="Shepherd"

 

 

AutoGenerateColumns="false"

 

 

onitemdatabound="UserDetailRadGrid_ItemDataBound"

 

 

onpagesizechanged="ClientUserRadGrid_PageIndexChanged" AllowSorting="True"

 

 

OnItemCommand="ClientUserRadGrid_ItemCommand"

 

 

AllowPaging="True" PageSize="40" onneeddatasource="User_NeedDataSource"

 

 

AllowFilteringByColumn="true" onitemcreated="ClientUserRadGrid_ItemCreated">

 

 

 

<

 

HeaderContextMenu Skin="Shepherd" EnableEmbeddedSkins="False" EnableTheming="True">

 

<

 

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

</

 

HeaderContextMenu>

 

 

 

 

 

<PagerStyle AlwaysVisible="True" Mode="NextPrevAndNumeric" PagerTextFormat="{4} Page {0} of {1},items {2} to {3} of {5}" />

 

 

 

 

 

 

 

<

 

MasterTableView DataKeyNames="UserID"  AllowMultiColumnSorting="true">

 

<

 

RowIndicatorColumn>

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

RowIndicatorColumn>

 

<

 

ExpandCollapseColumn>

 

<

 

HeaderStyle Width="20px"></HeaderStyle>

 

</

 

ExpandCollapseColumn>

 

<

 

Columns>

 

 

 

 

 

<telerik:GridBoundColumn DataField="UserName" HeaderText="Logon Name"

 

 

UniqueName="UserName" >

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridBoundColumn DataField="Department" HeaderText="Department"

 

 

UniqueName="Department" >

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridBoundColumn DataField="Name" HeaderText="Name"

 

 

UniqueName="Name" >

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

<telerik:GridBoundColumn DataField="ProductType" HeaderText="Product Type"

 

 

UniqueName="ProductType">

 

 

 

 

 

</telerik:GridBoundColumn>

 

 

 

 

 

 

 

 

</Columns>

 

 

 

 

 

</

MasterTableView>

 

 

 

 

 

 

 

 

<

FilterMenu Skin="Shepherd" EnableEmbeddedSkins="False" EnableTheming="True">

 

<

 

CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

</

 

FilterMenu>

 

</

 

telerik:RadGrid>

MainUserControl.ascx.cs

 

protected

 

void UserDetailRadGrid_ItemDataBound(object sender, GridItemEventArgs e)

 

{

 

    

 

    if

 

(e.Item is GridDataItem)

 

    {

 

        GridDataItem item = (GridDataItem)e.Item;

 

        RadToolTipManager1.TargetControls.Add(e.Item.ClientID, e.Item.OwnerTableView.DataKeyValues[0][

"UserID"].ToString(),true);

 

    }

 

}

 

protected

 

void ToolTip_OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)

 

{

 

    Control ctrl = LoadControl("ToolTipInfo.ascx");

 

    args.UpdatePanel.ContentTemplateContainer.Controls.Add(ctrl);

 

    ToolTipInfo Info = (ToolTipInfo)ctrl; // this is a control with a only one label and trying to set a text to that Label 

 

    Info.LabelText = args.Value;

}

 

And that is all I have done to get the tooltip, but keep experiencing js error..

thanks,
DIP

[Svetlina Anati]

Hi Dip,

The code you have provided seems to be correct except for the fact that in the ItemDataBound event of the grid you tooltipify all whereas we have used the following conditions to ensure that the items and not headers, etc are tooltipified:

            if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
  ...............
}

As to the js error you experience as far as I can see it concerns the internal update panel of the tooltip manager but I have never seen it before. If reducing the items by type as shown above does not help, I will need to examine a fully runnable demo, debug it and find the reason for the issue.

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