[CLOSED] [3.1] Grid Cell Tooltips not working in a viewport

  1. #1

    [CLOSED] [3.1] Grid Cell Tooltips not working in a viewport

    While updating my application from 2.5 to 3.1, I ran into a problem with my gridpanels and their tooltips.

    It seems that if you have a gridpanel in a viewport the tooltips are never triggered.

    Here is an example:

    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            if (!X.IsAjaxRequest) {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                };
    
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>GridPanel Cell with ToolTip - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
        <script>
            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>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport ID="viewFacultyPortal" runat="server" MinHeight="400"
                MinWidth="250" Layout="FitLayout" AutoScroll="true">
                <Content>
                    <ext:GridPanel
                        ID="GridPanel1"
                        runat="server"
                        Title="Array Grid"
                        Width="600"
                        Height="350">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                                <ext:Column runat="server" Text="Price" DataIndex="price">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                                <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" Mode="Single" />
                        </SelectionModel>
                        <View>
                            <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
                        </View>
                        <Bin>
                            <ext:ToolTip
                                runat="server"
                                Target="={#{GridPanel1}.getView().el}"
                                Delegate=".x-grid-cell"
                                TrackMouse="true">
                                <Listeners>
                                    <Show Handler="onShow(this, #{GridPanel1});" />
                                </Listeners>
                            </ext:ToolTip>
                        </Bin>
                    </ext:GridPanel>
                </Content>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 30, 2015 at 3:13 PM. Reason: [CLOSED]
    T. Nathan Wheeler
    Desktop Programmer, I.T.
    Pensacola Christian College
  2. #2
    Hello Nathan,

    Move your tooltip outside the viewport and it will work just fine.

    Is it an option for you?
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            if (!X.IsAjaxRequest) {
                this.Store1.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>GridPanel Cell with ToolTip - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script>
            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>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport ID="viewFacultyPortal" runat="server" MinHeight="400"
                MinWidth="250" Layout="FitLayout" AutoScroll="true">
                <Content>
                    <ext:GridPanel
                        ID="GridPanel1"
                        runat="server"
                        Title="Array Grid"
                        Width="600"
                        Height="350">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                                <ext:Column runat="server" Text="Price" DataIndex="price">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                                <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" Mode="Single" />
                        </SelectionModel>
                        <View>
                            <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
                        </View>
                    </ext:GridPanel>
                </Content>
            </ext:Viewport>
            <ext:ToolTip
                runat="server"
                Target="={#{GridPanel1}.getView().el}"
                Delegate=".x-grid-cell"
                TrackMouse="true">
                <Listeners>
                    <Show Handler="onShow(this, #{GridPanel1});" />
                </Listeners>
            </ext:ToolTip>
        </form>
    </body>
    </html>
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Fabrício,
    Good morning,That will require a significant change to my masterpage configuration but it might be possible to achieve. Let me see what I can do.

    Update (6/29/2015 at 10:15 cst)
    When I tried this solution it still did not fire the events to show the tooltips.
    Last edited by tnwheeler; Jun 29, 2015 at 4:16 PM.
    T. Nathan Wheeler
    Desktop Programmer, I.T.
    Pensacola Christian College
  4. #4
    I think the ToolTip is now (in Ext.NET v3) created before the GridPanel and this doesn't work:
    Target="={#{GridPanel1}.getView().el}"
    Please try to remove the ToolTip's Target property at all and add this for the GridPanel:
    <Listeners>
        <ViewReady Handler="var toolTip = this.getBinComponent(0);
                            toolTip.setTarget(this.getView().getEl());" />
    </Listeners>
  5. #5
    Daniil,
    Thank-you that worked. I was able to get the tool-tips to show up on my basic pages. I have not tried the one that contains a grid with locked columns yet.

    Update: (6/30/2015)
    This worked for my locked columns as well. Thank-you!!!
    Last edited by tnwheeler; Jun 30, 2015 at 3:08 PM. Reason: Update
    T. Nathan Wheeler
    Desktop Programmer, I.T.
    Pensacola Christian College

Similar Threads

  1. [CLOSED] Grid Cell Tooltips
    By ndotis in forum 2.x Premium Help
    Replies: 2
    Last Post: Nov 27, 2013, 1:18 AM
  2. [CLOSED] [1.0] GridPanel cell and Tooltips
    By state in forum 1.x Premium Help
    Replies: 5
    Last Post: Jun 06, 2013, 6:33 AM
  3. Grid Cell CSS Override not working in 2.0??
    By Tbaseflug in forum 2.x Help
    Replies: 0
    Last Post: May 17, 2012, 8:39 PM
  4. TreeGrid cell Tooltips
    By rajputamit in forum 1.x Help
    Replies: 9
    Last Post: Mar 19, 2012, 12:27 PM
  5. [CLOSED] Gridpanel with cell tooltips
    By jmcantrell in forum 1.x Premium Help
    Replies: 2
    Last Post: Aug 02, 2011, 8:53 AM

Tags for this Thread

Posting Permissions