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

Table in ToolTip

12 Answers 314 Views

ToolTip

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

12 Answers, 1 is accepted

answered on 16 Jan 2010, 09:52 PM

I have a similar situation that I think the original poster was asking. I have a asp:DataList with the "RepeatLayout=Table". It is a products display page and can have an unlimited number of table cells that display each available product. A separate control is nested inside of the asp:DataList which retrieves the products and their attributes.

What I am trying to accompolish, is to tooltipify each cell that is generated by the asp:DataList. I don't need dynamic content for the tooltip, just a simple button that is the same for each product cell (ItemBox). I tried placing the tooltip in the control (customControlProductAttributes:ProductBox1) that get's nested and repeated in the asp:DataList for each product, but only the first cell/record/ItemBox in the grid was tooltipified. Here is some sample code. Thanks.

                    <div class="ProductGrid">         
                    <asp:DataList ID="dlProducts" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"         
                        RepeatLayout="Table" ItemStyle-CssClass="ItemBox">         
                        <ItemTemplate>         
                            <customControlProductAttributes:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'         
                                runat="server" />         
                        </ItemTemplate>         
                    </asp:DataList>         
                </div>         

answered on 20 Jan 2010, 12:10 PM

Hello Joe,

I suggest to put a separate RadToolTip in the ItemTemplate as shown below:

<div class="ProductGrid">

<asp:DataList ID="dlProducts" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"

RepeatLayout="Table" ItemStyle-CssClass="ItemBox">

<ItemTemplate>

<customControlProductAttributes:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>'

runat="server" />

<telerik:RadToolTip ID="myToolTip" runat="server" TragetControlID="ctrlProductBox" RenderInPageRoot="true" />

</ItemTemplate>

</asp:DataList>

</div>

Note, that you should set RenderInPageRoot to true in order to ensure that your tooltip's styles will not be affected by the parent elements.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 22 Jan 2010, 04:33 PM

Hi Joe,

I am not sure what exactly happens on your side because I could not examine sample code but I am glad to hear that you managed to solve the problem. If you want to investigate the problem further, you can send me runnable sample code and I will let you know what have been the reasons for the issue.

In case you need further assistance or you have additional questions, do not hesitate to contact me again, I will be glad to help.

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 26 Jan 2010, 05:12 PM

Hi Svetlina,

My original approach will not work. I am trying to tooltipify a custom user control in a DataList. The functionality I am seeking is similar to the telerik example "TooltipifiedRadGrid". The slight difference is that I am using a DataList which is in a user control. The item collection in the DataList is in another custom user control. The user control "ProductBox1" contains a details button that fires an event to get the productid from the product where the button was fired. This postsback and get's the correct product details page (which is another usercontrol ProductInfo.ascx).

Here is some code from the DataList user control:

    
            <%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Templates.Categories.ProductsInGrid" 
        
                CodeBehind="ProductsInGrid.ascx.cs" %> 
        
            <%@ Register TagPrefix="nopCommerce" TagName="ProductBox1" Src="~/Modules/ProductBox1.ascx" %> 
        
            <div> 
        
                        <asp:DataList ID="dlFeaturedProducts" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" 
        
                            RepeatLayout="Table" ItemStyle-CssClass="ItemBox"> 
        
                            <ItemTemplate> 
        
                                <nopCommerce:ProductBox1 ID="ctrlProductBox" Product='<%# Container.DataItem %>' 
        
                                    runat="server" /> 
        
            ///I had a RadToolTip here and it rendered for each control but I could not use the ajaxmanager because the item 
        
            was inside an ItemTemplate 
        
                            </ItemTemplate> 
        
                        </asp:DataList> 
        
                    </div>

Here is the control ProductBox1.ascx

    
            <%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.ProductBox1Control" 
        
                CodeBehind="ProductBox1.ascx.cs" %> 
        
            <div class="buttons"> 
        
                        <br /> 
        
             ///This button fires the event that renders the details I need in a tooltip.

                      <asp:Button runat="server" ID="btnProductDetails" OnCommand="btnQuickView_Click" 
        
                            Text="<% $NopResources:Products.ProductDetails %>" CommandArgument='<%# Eval("ProductID") %>' 
        
                            SkinID="ProductGridProductDetailButton" /><br /> 
        
                        <asp:Button runat="server" ID="btnAddToCart" OnCommand="btnAddToCart_Click" Text="<% $NopResources:Products.AddToCart %>" 
        
                            ValidationGroup="ProductDetails" CommandArgument='<%# Eval("ProductID") %>' SkinID="ProductGridAddToCartButton" /> 
        
                    </div>

Here is the control ProductBox1.ascx.cs

    
            protected void btnQuickView_Click(object sender, CommandEventArgs e) 
        
                    { 
        
                        int productID = Convert.ToInt32(e.CommandArgument); 
        
                        string productURL = SEOHelper.GetProductURL(productID); 
        
                        Response.Redirect(productURL); 
        
                    }

NOTE: This is what I would like to do. Not sure if it's the correct approach.
I would like to have a tooltip over each item in the DataList="dlFeaturedProducts". This would load a tooltip (using ajaxmanager I assume) filled with the user control ProductInfo.ascx(similar to your ProductDetails.ascx example). Again, this is similar to the online example, but I can't get it all to work because of the ajaxmanager not picking up the control nested inside of the ItemTemplate. I tried to ajaxify the entire control="dlFeaturedProducts", but nothing.

I think this has something to do with using a command argument on a button click that normally wants a postback to get the correct ProductId and resulting Product URL. I am trying to strip out the Product URL and just display the details in the tooltip.

I normally would post more examples, but I have tried so many different things I thought starting over with the base would be a better approach. Any ideas you could provide would be greatly appreciate. Thanks again Svetlina.

Regards,
joe

answered on 29 Jan 2010, 10:35 AM

Hello Joe,

As far as I can see, the problem with nesting the tooltip as it was before was in ajaxifying with a RadAjaxManager. Since the initial approach was working what I suggest is to use standard update panels with UpdateMode=Conditional and call their method Update() when needed. Actually, that is also what RadAjaxManager does as well - wrapping in update panels but with separate update panels and manually updating them you will be able to get a more fine-tuned control over the layout and the updated controls.

In this manner you will be able to get the same ajax behavior as with the manager but without changing your other logic.

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 31 Jan 2010, 06:04 AM

Hi Svetlina,

I am stumped. What am I doing wrong? I am trying to reproduce the 'Load On Demand' example. The only difference is that I am using Master pages with 1 control that has the tooltipmangager on it. That control calls another control that is the details page.

Here is my code:
Control 1 ascx

    
            <div class="picture">

                    <asp:HyperLink ID="hlImageLink" runat="server" />

                </div>

            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="Center" 
        
                RelativeTo="Element" Animation="Resize" Skin="WebBlue" OnAjaxUpdate="OnAjaxUpdate"> 
        
            </telerik:RadToolTipManager> 
        
            <asp:Label ID="lblProductId" runat="server"></asp:Label> 
        
            <asp:HiddenField ID="hfProductId2" runat="server" />

The Label controls are used to display the Product Id of each item in the DataList just to confirm if it's working. They are displaying corretly.

Control 1 ascx.cs

    
            private void BindData() 
        
                    { 
        
                        if (product != null) 
        
                        { 
        
                            string productURL = SEOHelper.GetProductURL(product); 
        
                            int productproductid = product.ProductID; ///I removed secondard databinding for brevity sakes

            lblProductId.Text = Convert.ToString(productid); ///this correctly displays the productid just to visually confirm

                            RadToolTipManager1.TargetControls.Add("hlImageLink", ProductId, false); 

            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/ProductInfo.ascx");

                        panel.ContentTemplateContainer.Controls.Add(ctrl);

                        ProductInfoControl details = (ProductInfoControl)ctrl;

                        elementId = details.ProductID;

                    }

            public string ProductId

                    {

                        get { return lblProductId.Text; }

                        set { lblProductId.Text = value; }

                    }

Control 2 .ascx.cs - ascx file is just a single user control

    
            protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        ///***Remove !PostBack for ajax to work 
        
                            BindData(); 
        
                    } 
        
                    public ProductBox1Control pBox1; 
        
                    protected void BindData() 
        
                    { 
        
                        int xxx = Convert.ToInt32(ProductID); 
        
                        Product product = ProductManager.GetProductByID(xxx); 
        
            public string ProductID 
        
                    { 
        
                        get 
        
                        { 
        
                            return pBox1.ProductId; 
        
                        }

I have tried every combination that I can think of. I know the ajax request is working because if I set a static ProductID in control 2, Control 1 will display properly and only the images associated with that control are posted in Firebug. If I hover over the image, the tooltip and control renders properly but only displays the static ProductID I entered. If I look in Firebug again, then I can see the additional images have loaded from the ajax request.

I tried creating a public property in control 1 of the label text that was displaying the correct productid's in each part of the datlist and then call that property in control 2. No go.

It just doesn't seem that hard, but I can't seem to get it to work. Thanks for taking the time to help me Svetlina.

Regards, joe

answered on 04 Feb 2010, 08:37 AM

Hi Joe,

I am afraid that I will need to examine a sample demo locally to get the problem resolved. That is why I activated your support tickets as a trial user and you are now able to open a support ticket. Please, prepare a sample, fully runnable reproduction demo (use a fake programmatic datasource for the grid or Northwind), open a new support ticket and send it to me along with very detailed reproduction steps and explanations. Note that the demo should be fully runnable and it does not need to have your complex custom logic, classes, etc - just the setup related to the tooltip. Once I receive the demo and the instructions, I will do my best to help.

Best wishes,
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Table in ToolTip

12 Answers, 1 is accepted