RadToolTip on RadListView, paging problem

[Simon Christ]

Hi all

I have a problem with a paging RadListView with ToolTips on every Item, embedded in a UserControl.
On the first page, everything look well and works like expected (mouse over a thumbnail picture opens a tooltip with a bigger image).
On all other pages, the tooltip does not appear.
i compared the html source code of both pages and both pages are identical.

i tried to do it like in the online example: what's wrong?

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadListViewTissue">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadListViewTissue" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="RadToolTipManager1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >
</telerik:RadAjaxLoadingPanel>

<telerik:RadToolTipManager ID="RadToolTipManager1" OffsetY="0" HideEvent="LeaveToolTip"
    Width="400px" Height="170px" runat="server"
    OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"  ShowDelay="500"
    Animation="Fade" Sticky="True">
</telerik:RadToolTipManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server"  />

<telerik:RadListView ID="RadListViewTissue" runat="server"
    onitemdatabound="RadListViewTissue_ItemDataBound" DataKeyNames="contentID"
    ItemPlaceholderID="TissueItemContainer"
    onselectedindexchanged="RadListViewTissue_SelectedIndexChanged"
    AllowPaging="true" onneeddatasource="RadListViewTissue_NeedDataSource"
    onpageindexchanged="RadListViewTissue_PageIndexChanged"  >

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                RadListViewTissue.DataSource = getTissueList();
                RadListViewTissue.DataBind();
            }
        }

        protected DataTable getTissueList()
        {
// ..
            DataTable dtTissue = (DataTable)Session[bufferedTissueList];
// ..
            return dtTissue;
        }

        protected void RadListViewTissue_PageIndexChanged(object sender, RadListViewPageChangedEventArgs e)
        {
            if (e.CommandName == "Sort" || e.CommandName == "Page")
            {
                RadToolTipManager1.TargetControls.Clear();
            }
            RadListViewTissue.CurrentPageIndex = e.NewPageIndex;
            RadListViewTissue.DataSource = getTissueList();
            RadListViewTissue.DataBind();

        }

        protected void RadListViewTissue_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)
        {
            RadListViewTissue.DataSource = getTissueList();
        }

        protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            this.UpdateToolTip(args.Value, args.UpdatePanel);
        }

        private void UpdateToolTip(string elementID, UpdatePanel panel)
        {
            Control ctrl = Page.LoadControl("~/Modules/IWC_FabricDetail.ascx");
            panel.ContentTemplateContainer.Controls.Add(ctrl);
            IWC_FabricDetail details = (IWC_FabricDetail)ctrl;
            details.ContentID = elementID;
        }

        protected void RadListViewTissue_ItemDataBound(object sender, RadListViewItemEventArgs e)
        {
            if (e.Item.ItemType == RadListViewItemType.DataItem || e.Item.ItemType == RadListViewItemType.AlternatingItem)
            {
                Control target = e.Item.FindControl("thumbImage");
                if (!Object.Equals(target, null))
                {
                    if (!Object.Equals(this.RadToolTipManager1, null))
                    {
                        // add to tooltip manager
                        string keyValue = (e.Item as RadListViewDataItem).GetDataKeyValue("contentID").ToString();
                        this.RadToolTipManager1.TargetControls.Add(target.ClientID, keyValue, true);
                    }
                }
            }
        }

thanks a lot for help!

best regards
Simon

[Svetlina Anati]

Hello Simon,

I built up a test demo based on your code but unfortunately to no avail - when I change the page the tooltip is shown on the items on the next page. Please, examine my sample demo and let me know what I should modify in order to reproduce the problem locally. Once I am able to observe the issue on my side I will do my best to help.


Regards,
Svetlina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Simon Christ]

Hello Svetlina

Thank you very much for your advertance and help.
I took your example and modified it step by step to fit my needs.
First I made a Control, put it on a MultiPage then add Database feeding, selecting and it still worked like expected.
Then I put this new control in my existing Web Application .. and had the same result as before. Only the first page shows the ToolTips.

What I also observed: when I move to another page of the ListView (e.g. 5), then I get no ToolTips. But when I change to another Page of the MultiPage and come back later to the ListView, then I see page 5 with ToolTips ok!! Any Idea due to this behaviour?

My Application is a nopCommerce Shop (www.nopcommerce.com), which I want to customize. This shop has URL rewriting built in, is it possible, that this causes this problem? I put a prototype of this application on http://tsd1.bravetailor.com/Products/1-tailored-shirts.aspx
the third tab should be the fabric-selector, which i talk about. Do you think, there is an easy workaround?

Thanks 1000 & best regards
Simon

[Svetlina Anati]

Hi Simon,

What you explain seems to be related to AJAX settings - could you please double check whether you by any chance have additional AJAX settings ?  If so, replicate them in the sample demo and share its code here because unfortunately I cannot tell what is happening on your side without examining a working demo since everything is fine in the sample code.

On a side note, you can test the assumption that the issue is caused by the usage of AJAX by disabling all the AJAX requests for the test and check whether this fixes the issue. If so - replicate the settings and send me the modified runnable code and I will do my best to help.


Kind regards,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.