tooltip not relative after some events

9 posts, 0 answers
  1. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 02 Jun 2013 Link to this post

    I am using a tooltip as a lightweight window/div to enter additional information when I drag drop from grid to grid or use a button to move an item from one grid to another. The tooltip should be centered over the 2nd grid(grdItemSplit).

    The tooltip show up correctly until I select a row from the first grid or when I start to edit a row from the 2nd grid.  Then the tooltip is positioned in the wrong place.

    here are my settings and here is a photo showing the differences.

    <telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true" ShowEvent="FromCode"
                Position="Center" RelativeTo="Element" TargetControlID="grdItemSplit"
                HideEvent="FromCode" Title="Add Item To Split" ShowCallout="true" RenderInPageRoot="true">
    more here...
    </telerik:RadToolTip>


    javascript:

    <script type="text/javascript">
                    //<![CDATA[
                    function onRowDropping(sender, args) {
                        showToolTip();
                        args.set_cancel(true);
                    }
                    function showToolTip() {
                        var tooltip = $find("<%=RadToolTip1.ClientID%>");
                        window.setTimeout(function () { tooltip.show(); }, 1);
                    }
                    function CloseToolTip() {
                        var toolTip = $find('RadToolTip1');
                        toolTip.hide();
                    }
                    function OnCommand(sender, args) {
                        if (args.get_commandName() == "Moveit") {
                            args.set_cancel(true);
                            showToolTip();
                        }
                    }
                    //]]>
                </script>



  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 07 Jun 2013 Link to this post

    Hello,

    Could you try increasing the timeout around the call to show() to at least 20ms and adding dimensions to the tooltip as explained here? I tried showing the tooltip on the events from the code snippets and things appear to be working fine with me. You can find attached my test page and a video so you can compare them with your actual case and try to find the differences.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 07 Jun 2013 Link to this post

    Marin,

    Thanks, but I still have the same issue.

    the second grid (grdItemSplit) is editable in place.  After I edit one of the rows in grdItemSplit  the tooltip no longer shows in the correct place. 

    my example is connected to my database, I will work on an example using a a datatable as soon as I can.

    Marty
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 11 Jun 2013 Link to this post

    Hi Marty,

    It is not very probable that the issue is data related, so perhaps using a hardcoded datasource like on my sample should let you reproduce the issue with it. Once I can inspect it I will do my best to help. I tried modifying that grid so I can enter edit mode, yet things kept working fine with me:
    <telerik:RadGrid ID="grdItemSplit" runat="server">
        <MasterTableView>
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="LinkButton">
                </telerik:GridEditCommandColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    Let me know what else is needed.

    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 14 Jun 2013 Link to this post

    Marin, I plan to look at this again this weekend.

    I don't think it is data related, only event related. ie the event that opens the edit mode of the 2nd grid seems to be breaking my tooltip positioning.

    Thanks again.  I will keep you updated.

  7. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 20 Jul 2013 Link to this post

    Marin,

    Sorry for the long delay here.  I had time to make an example that you can test with no db dependency.

    I am still having the same issue.

    I would prefer to just upload the aspx file and code behind but here it is. long....

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Temp-splitship3.aspx.cs" Inherits="Testing_Temp_splitship3" %>
     
    <!DOCTYPE html>
     
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .ib {
                display: inline-block;
                width: 400px;
                height: 400px;
            }
     
            .spacer {
                height: 200px;
                background-color: Yellow;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI"
                        Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI"
                        Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                    <asp:ScriptReference Assembly="Telerik.Web.UI"
                        Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
                </Scripts>
            </telerik:RadScriptManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="grdOrdersAvail">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="grdOrdersAvail"></telerik:AjaxUpdatedControl>
                            <telerik:AjaxUpdatedControl ControlID="grdItemSplit"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
     
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadScriptBlock runat="server" ID="scriptBlock">
                <script type="text/javascript">
                    //<![CDATA[
                    function onRowDropping(sender, args) {
                        showToolTip();
                        args.set_cancel(true);
                    }
                    function showToolTip() {
                        var tooltip = $find("<%=RadToolTip1.ClientID%>");
                        tooltip.set_targetControlID('grdItemSplit');
                        window.setTimeout(function () { tooltip.show(); }, 1);
                    }
                    function CloseToolTip() {
                        var tooltip = $find("<%=RadToolTip1.ClientID%>");
                        tooltip.set_targetControlID('grdItemSplit');
                        tooltip.hide();
                    }
                    function OnCommand(sender, args) {
                        if (args.get_commandName() == "Moveit") {
                            args.set_cancel(true);
                            showToolTip();
                        }
                    }
                    //]]>
                </script>
            </telerik:RadScriptBlock>
            <telerik:RadToolTip ID="RadToolTip1" runat="server" Modal="true" ShowEvent="FromCode"
                Position="Center" RelativeTo="Element" TargetControlID="grdItemSplit" Width="300px"
                Height="200px"
                HideEvent="FromCode" Title="Add Item To Split" RenderInPageRoot="true" RenderMode="Lightweight">
     
                <asp:UpdatePanel runat="server" ID="UpdatePanel2">
                    <ContentTemplate>
                        <asp:Panel ID="pInquiry" runat="server" Style="padding-left: 11px; width: 300px;
                            height: 100px;">
                            <div>
                                <span>1000</span>
                                <span>
                                    <telerik:RadButton ID="RadButton1" runat="server" Text="Add Remaining" Width="150">
                                    </telerik:RadButton>
                                </span>
                            </div>
                            <div>or</div>
                            <div>
                                <span>
                                    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Width="50"></telerik:RadNumericTextBox>
                                </span>
                                <span>
                                    <telerik:RadButton ID="RadButton2" runat="server" Text="Add This" Width="150"></telerik:RadButton>
                                </span>
                            </div>
                            <div>or</div>
                            <div>
                                <telerik:RadButton ID="RadButton3" runat="server" Text="Cancel" OnClientClicked="CloseToolTip">
                                </telerik:RadButton>
                            </div>
                        </asp:Panel>
                    </ContentTemplate>
     
                </asp:UpdatePanel>
            </telerik:RadToolTip>
     
     
            <div class="spacer"></div>
            <div>
                <div class="ib">
     
                    <telerik:RadGrid ID="grdOrdersAvail" runat="server" Width="300px"
                        OnRowDrop="grdOrdersAvail_RowDrop" CellSpacing="0" GridLines="None"
                         ClientSettings-ClientEvents-OnCommand="OnCommand"
                        Height="280">
                        <MasterTableView DataKeyNames="Id" Width="100%" TableLayout="Fixed"
                            AutoGenerateColumns="False">
                            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
     
                            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
     
                            <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"
                                Created="True">
                            </ExpandCollapseColumn>
                            <Columns>
                                <telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="true">
                                </telerik:GridDragDropColumn>
                                <telerik:GridBoundColumn DataField="Id" DataType="System.UInt32"
                                    FilterControlAltText="Filter Id column" HeaderText="Id" ReadOnly="True"
                                    SortExpression="Id" UniqueName="Id" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Quantity" DataType="System.Int32"
                                    FilterControlAltText="Filter Quantity column" HeaderText="Quantity"
                                    SortExpression="Quantity" UniqueName="Quantity">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Product"
                                    FilterControlAltText="Filter Product column" HeaderText="Product"
                                    SortExpression="Product" UniqueName="Product" HeaderStyle-Width="200">
                                </telerik:GridBoundColumn>
                                <telerik:GridButtonColumn
                                    ButtonType="ImageButton" UniqueName="column"
                                    ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"
                                    ImageUrl="~/Content/Icons/bullet_go.png" CommandName="Moveit" HeaderStyle-Width="30">
                                </telerik:GridButtonColumn>
     
                            </Columns>
     
                            <EditFormSettings>
                                <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                            </EditFormSettings>
     
                            <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
     
                        </MasterTableView>
                        <ClientSettings AllowRowsDragDrop="true" AllowColumnsReorder="false" ReorderColumnsOnClient="false">
                            <Selecting AllowRowSelect="true" EnableDragToSelectRows="true"></Selecting>
                            <ClientEvents OnRowDropping="onRowDropping"></ClientEvents>
                            <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
                        </ClientSettings>
     
                        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
     
                        <FilterMenu EnableImageSprites="False"></FilterMenu>
                    </telerik:RadGrid>
     
                </div>
                <div class="ib">
     
                    <telerik:RadGrid ID="grdItemSplit" runat="server"
                        Width="320px" OnRowDrop="grdItemSplit_RowDrop" CellSpacing="0"
                         GridLines="None" Height="200">
                        <MasterTableView DataKeyNames="Id" Width="100%" AutoGenerateColumns="False"
                             EditMode="InPlace">
     
                            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
     
                            <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
     
                            <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                            </ExpandCollapseColumn>
                            <Columns>
                                <telerik:GridButtonColumn UniqueName="DeleteColumn" ButtonType="ImageButton" CommandName="Delete">
                                </telerik:GridButtonColumn>
                                <telerik:GridBoundColumn DataField="Id" DataType="System.UInt32"
                                    FilterControlAltText="Filter Id column" HeaderText="Id" ReadOnly="True"
                                    SortExpression="Id" UniqueName="Id" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Quantity" DataType="System.Int32"
                                    FilterControlAltText="Filter Quantity column" HeaderText="Quantity"
                                    SortExpression="Quantity" UniqueName="Quantity">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Product"
                                    FilterControlAltText="Filter Product column" HeaderText="Product"
                                    SortExpression="Product" UniqueName="Product" ReadOnly="true">
                                </telerik:GridBoundColumn>
                                <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                                </telerik:GridEditCommandColumn>
                            </Columns>
                            <NoRecordsTemplate>
                                <div style="height: 30px; cursor: pointer;">
                                    Drop Available Item Here
                                </div>
                            </NoRecordsTemplate>
     
                            <EditFormSettings>
                                <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                            </EditFormSettings>
     
                            <PagerStyle Mode="NumericPages" PageButtonCount="4"></PagerStyle>
                        </MasterTableView>
                        <ClientSettings AllowRowsDragDrop="false">
                            <Selecting AllowRowSelect="false" EnableDragToSelectRows="false"></Selecting>
                            <ClientEvents OnRowDropping="onRowDropping"></ClientEvents>
                        </ClientSettings>
     
                        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
     
                        <FilterMenu EnableImageSprites="False"></FilterMenu>
                    </telerik:RadGrid>
     
                </div>
            </div>
     
        </form>
    </body>
    </html>


    and the code behind

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class Testing_Temp_splitship3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            grdOrdersAvail.DataSource = GetTableSource();
            grdItemSplit.DataSource = GetTableDestination();
        }
        protected void grdItemSplit_RowDrop(object sender, Telerik.Web.UI.GridDragDropEventArgs e)
        {
     
        }
        protected void grdOrdersAvail_RowDrop(object sender, Telerik.Web.UI.GridDragDropEventArgs e)
        {
     
        }
        public DataTable GetTableSource()
        {
            DataTable table = new DataTable();
            table.Columns.Add("Id", typeof(int));
            table.Columns.Add("Quantity", typeof(decimal));
            table.Columns.Add("Product", typeof(string));
     
            table.Rows.Add(25, 1000, "Product 1");
            table.Rows.Add(50, 500, "Product 3");
            table.Rows.Add(10, 2500, "Product 4");
            return table;
        }
        public DataTable GetTableDestination()
        {
            DataTable table = new DataTable();
            table.Columns.Add("Id", typeof(int));
            table.Columns.Add("Quantity", typeof(decimal));
            table.Columns.Add("Product", typeof(string));
     
            table.Rows.Add(25, 1000, "Product 2");
            table.Rows.Add(50, 7500, "Product 5");
            return table;
        }
    }

    I used your example code.

    The tooltip still loses its position over the second grid.

    Thanks, Marty


  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 24 Jul 2013 Link to this post

    Hi Marty,

    It would seem that when the tooltip has a static target and this target is disposed with AJAX, but the tooltip is not (the target being the second grid, and that grid gets disposed when it enters edit mode) the tooltip loses the coordinates of the target.
    What I can suggest is removing the target from the markup and setting the targetcontrolID to an empty string when you close it, so the next time the code starts showing the tooltip a target is freshly added and evaluated.
    Also, the timeout around show() must be 20ms and not 1.

    I am attaching here a short video and the sample I build upon your code that seem to function properly with me. I hope they help.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. moegal
    moegal avatar
    273 posts
    Member since:
    Jul 2007

    Posted 24 Jul 2013 Link to this post

    Thanks, This should work.

    I am happy to know I am not going crazy.

    Why 20ms?

    Marty
  10. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 26 Jul 2013 Link to this post

    Hello Marty,

    I am glad things work for you as well :)

    On the timeout duration - there are other places with timeouts in the code, the most notable being one 10ms timeout and several 0ms timeouts, so 20ms is a safe margin that is still small enough.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017