[CLOSED] [#671] Grid cell's tooltip

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [#671] Grid cell's tooltip

    On version 2.x, grid cell's tooltip works as expected: https://examples2.ext.net/#/Miscella..._Cell_Tooltip/

    But on version 3.1, at revision 6281, it doesn't. Its possible to reproduce the issue on: https://examples3.ext.net/#/Miscella..._Cell_Tooltip/

    Thanks in advance
    Last edited by geoffrey.mcgill; Feb 07, 2015 at 1:38 AM.
  2. #2
    Going further, when tooltip is placed inside grid's bin, the layout breaks. On version 2.x, everything works as expected.
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    store = grid.getStore(),
                    record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
                    column = view.getHeaderByCell(toolTip.triggerElement),
                    data = record.get(column.dataIndex);
    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:GridPanel ID="_grd" runat="server" Title="Records" Frame="false" Width="500" Height="500">
            <Store>
                <ext:Store AutoLoad="true" ID="_str" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="LastName" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
                    <ext:Column Text="Last Name" DataIndex="LastName" runat="server" />
                    <ext:Column Text="Address" DataIndex="Address" runat="server" />
                </Columns>
            </ColumnModel>
            <Bin>
                <ext:ToolTip
                    runat="server"
                    Target="={#{_grd}.getView().el}"
                    Delegate=".x-grid-cell"
                    TrackMouse="true">
                    <Listeners>
                        <Show Handler="onShow(this, #{_grd});" />
                    </Listeners>
                </ext:ToolTip>
            </Bin>
        </ext:GridPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public StoreResult LoadFakeRecords()
            {
                List<Entity> lst = new List<Entity>();
    
                for (int index = 0; index < 15; index++)
                {
                    lst.Add(new Entity
                    {
                        ID = index,
                        Name = string.Format("Name - {0}", index),
                        LastName = string.Format("Last Name - {0}", index),
                        Address = string.Format("Address - {0}", index)
                    });
                }
    
                return new StoreResult(lst, lst.Count());
            }
        }
    
        [Serializable]
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
    
            public string LastName { get; set; }
    
            public string Address { get; set; }
        }
    }
  3. #3
    Just to add that a javascript error occurs:

    SyntaxError: An invalid or illegal string was specified
  4. #4
    Just to add that a javascript error occurs:

    SyntaxError: An invalid or illegal string was specified
    Mimisss, can you give me more details?
  5. #5
    I got the following error:

    Click image for larger version. 

Name:	tt001.png 
Views:	5 
Size:	11.4 KB 
ID:	19561
  6. #6
    In both tooltip examples (grid cell and row) error

    SyntaxError: An invalid or illegal string was specified
    is shown.

    That's why the tooltip is not showing up, probably.

    -- Edit:

    Did some digging... the javascript error seems to boil down to

     "Invalid id selector: "App.GridPanel1.getView().el""
    so I set GridView's ID and used it in the tooltip's Target property and it works.

            ...
            <View>
                <ext:GridView runat="server" ID="GridView1" />
            </View>
            ...
    
        <ext:ToolTip ID="ToolTip1" 
            runat="server" 
            Target="GridView1"
            Delegate=".x-grid-cell"
            TrackMouse="true">
            <Listeners>
                <Show Handler="onShow(this, #{GridPanel1});" /> 
            </Listeners>
        </ext:ToolTip>   
    Can you confirm?
    Last edited by Dimitris; Jan 27, 2015 at 2:22 PM.
  7. #7
    I was not able to reproduce on version 3.1, at revision 6281.

    Can you tell me the class name and method name where this error was thrown?

    Going further, can you try the following?
    <ext:ToolTip
        runat="server"
        Target="App._grd.getView().el"
        Delegate=".x-grid-cell"
        TrackMouse="true">
        <Listeners>
            <Show Handler="onShow(this, App._grd);" />
        </Listeners>
    </ext:ToolTip>
  8. #8
    Let me clarify that I am referring to the tooltip online examples (and not your code).

    Your suggestion does not work either.

    The only way I've managed to make the tooltip work property without causing the "Invalid id selector: "App.GridPanel1.getView().el"" error (which I think is the reason why the tooltips are not working properly as you've reported in your original post) is by setting the GridView's ID as the value of the Tooltip's Target property. Didn't it work for you?
  9. #9
    I got it. Let's gonna wait a position from Daniil.
  10. #10
    Hello everybody,

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/671

    It has been fixed in the revision #6299 (trunk). It goes to 3.1.0 beta.

    As for the scenario with putting a ToolTip into a GridPanel's Bin. Yes, it works with Ext.NET v2, but it was kind of hacky behavior. The ToolTip is created and the target is assigned before rendering on that target. So, a null target is assigned to the ToolTip. To get it working I would suggest you the following.

    1. Remove the ToolTip's Target.
    2. Set this for the GridPanel.
    <Listeners>
        <AfterRender Handler="this.getBinComponent(0).setTarget(this.getView().el);" />
    </Listeners>
    Last edited by Daniil; Aug 17, 2015 at 10:48 AM.
Page 1 of 2 12 LastLast

Similar Threads

  1. How can Set tooltip on single cell on grid?
    By Sangeeta in forum 2.x Help
    Replies: 7
    Last Post: Nov 19, 2014, 11:35 AM
  2. [CLOSED] Cell's tooltip
    By canbay in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 04, 2013, 3:21 PM
  3. [CLOSED] Grid cell tooltip
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 21, 2012, 2:18 PM
  4. [CLOSED] Grid-cell Tooltip
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 10, 2012, 5:43 PM
  5. Tooltip display on Grid Cell
    By madhugumma in forum 1.x Help
    Replies: 1
    Last Post: Jul 29, 2009, 3:31 PM

Posting Permissions