Table in ToolTip

13 posts, 0 answers
  1. suresh
    suresh avatar
    8 posts
    Member since:
    Oct 2008

    Posted 27 May 2009 Link to this post

    Hi,


    My Question is Can we have a HTML Table inside RadTooltip Text.

    i.e....  text = "<html><table></table></html>"

    the reason behind this is that, i need to bind  4 rows of records from db to this tooltip in the below format.

    Name :
    Address :
    age :
    DOB :

    ....how do i do it line by line... can i use br tag atleast....... please suggest me a better solution


    with regards,

    Suresh S










  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 May 2009 Link to this post

    Hello suresh,

    I am not sure what is your exact setup and whether you use a separate RadToolTip or a RadToolTipManager but since you assign Text I assume that you use a separate RadToolTip. If so, you can put the HTML content directly in the markup declaration as shown in the following online demo:


    http://demos.telerik.com/aspnet-ajax/tooltip/examples/clientsideapi/defaultcs.aspx

    Kind regards,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. suresh
    suresh avatar
    8 posts
    Member since:
    Oct 2008

    Posted 28 May 2009 Link to this post

    Thanks for the reply,,

    But the solution which u gave doesn't solves my Problem......

    Let me describe u more about it.....

    I need a ToolTip ( Server Side) with 4 rows and 2 Colums..... as shown Below

    Name  |       (Value of name from DB)
    Address  |       (Value of Address from DB)
    Phone  |       (Value of Phone from DB)
    Age  |       (Value of Age from DB)

    The lefthand side is default and right hand side is from Db......

    Hope now u got my issue ....

    looking forward for a Positive and Quick Reply...

    Regards,
    Suresh S









  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 May 2009 Link to this post

    Hi suresh,

    Would you please provide a more detailed explanation why the provided solution does not help? The RadToolTip control does not influence your DB logic or code, once you create the needed table you should just put it in the tooltip and everything should work as expected.

    Kind regards,
    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.
  6. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 16 Jan 2010 Link to this post

    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> 

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 20 Jan 2010 Link to this post

    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.
  8. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 22 Jan 2010 Link to this post

    Hi Svetlina,

    I tried your suggestion, but no luck.  However, I did try changing the 'TargetControlId' to the the datalist control ('id=dlProducts') and that worked perfectly.  Putting the control inside of the ItemTemplate was the real key. Thanks.

    Nos sure why, because your suggestion should be the logical way to do it but if it works that's all that matters.

    Thanks for helping Svetlina.

    Joe
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Jan 2010 Link to this post

    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.
  10. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 22 Jan 2010 Link to this post

    Thanks Svetlina.

    This is the first issue in what I am trying to achieve.  I appreciate your expertise and willingness to assist me.  Stay tuned, I may follow up....

    Thanks Again.

    joe.
  11. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 26 Jan 2010 Link to this post

    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


  12. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 29 Jan 2010 Link to this post

    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.
  13. Joe
    Joe avatar
    26 posts
    Member since:
    May 2009

    Posted 31 Jan 2010 Link to this post

    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
  14. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Feb 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017