[CLOSED] Hidden GridPanel + Locked Column + ToolTip not working

  1. #1

    [CLOSED] Hidden GridPanel + Locked Column + ToolTip not working

    Hello, I have a trouble working with a Hidden GridPanel + a Locked Column + ToolTip together

    The row tooltip's are not displaying if those elements are together

    based in this example https://examples.ext.net/#/Miscellan...l_Row_Tooltip/

    I added
    • Hidden="true" property for GridPanel1
    • Locked="true" Width="100" for the company Column
    • a Button to set DataSource of GridPanel1 and show it

    if I remove the Hidden="true" the tooltips show, or if i remove the Locked="true" the tooltips show too, but together don't show
    by boss requeriments we need this properties working together

    here is whe example code (we are using ext.net 4.5.1.0)
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
            }
        }
    
        protected void ButtonBuscar_Click(object sender, DirectEventArgs e)
        {
            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[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
            Store1.DataBind();
            GridPanel1.Show();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>GridPanel Row with ToolTip - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    record = view.getRecord(toolTip.triggerElement),
                    data = Ext.encode(record.data);
    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
     <form runat="server">
            <ext:ResourceManager runat="server" />
    
         <h1>GridPanel Row with ToolTip</h1>
         <ext:Button ID="ButtonBuscar" runat="server" Icon="Zoom" ToolTip="Buscar" Disabled="false">
             <DirectEvents>
                 <Click OnEvent="ButtonBuscar_Click" />
             </DirectEvents>
         </ext:Button>
         <br />
         <ext:GridPanel
             ID="GridPanel1"
             runat="server"
             Title="Array Grid"
             Width="600"
             Hidden="true"
             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" Locked="true" Width="100"  />
                        <ext:Column runat="server" Text="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </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>
    
            <ext:ToolTip
                runat="server"
                Target="={#{GridPanel1}.getView().el}"
                Delegate="={#{GridPanel1}.getView().itemSelector}"
                TrackMouse="true">
                <Listeners>
                    <Show Handler="onShow(this, #{GridPanel1});" />
                </Listeners>
            </ext:ToolTip>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Jul 27, 2018 at 7:08 AM.
  2. #2
    Hello @opendat2000!

    This looks like the rendering process changes in that situation, so your best bet to ensure a safe target binding to the grid would be removing both the target and delegate from the tooltip, and binding them when the document is fully drawn.

    A safe way to do so is binding the onReady event to the gridView's afterRender event, so that it waits the page to be fully loaded before trying to assign targets to the tooltip. This will also allow you to keep the tooltip block before and after the grid, due to the referencing dependencies.

    The minimal required to have your case working though would be just handle the target like this:

    1. remove it from the ext:Tooltip block
    2. add an afterRender event to your grid panel's GridView block:

    <Listeners>
        <AfterRender Handler="Ext.onReady(function() { App.gridTooltip.setTarget(this); });" />
    </Listeners>
    Then it should work no matter what. At least it was the best way I found to make it work so far.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Yes it works now
    Thank you for your help.

    regards
    Sergio

    here is the working code, maybe can be useful for someone more
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
            }
        }
    
        protected void ButtonBuscar_Click(object sender, DirectEventArgs e)
        {
            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[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };
            Store1.DataBind();
            GridPanel1.Show();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>GridPanel Row with ToolTip - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    record = view.getRecord(toolTip.triggerElement),
                    data = Ext.encode(record.data);
    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>GridPanel Row with ToolTip</h1>
            <ext:Button ID="ButtonBuscar" runat="server" Icon="Zoom" ToolTip="Buscar" Disabled="false">
                <DirectEvents>
                    <Click OnEvent="ButtonBuscar_Click" />
                </DirectEvents>
            </ext:Button>
            <br />
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="600"
                Hidden="true"
                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" Locked="true" Width="100" />
                        <ext:Column runat="server" Text="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </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">
                        <Listeners>
                            <AfterRender Handler="Ext.onReady(function() { App.gridTooltip.setTarget(this); });" />
                        </Listeners>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
    
            <ext:ToolTip
                runat="server"
                ID="gridTooltip"
                Delegate="={#{GridPanel1}.getView().itemSelector}"
                TrackMouse="true">
                <Listeners>
                    <Show Handler="onShow(this, #{GridPanel1});" />
                </Listeners>
            </ext:ToolTip>
        </form>
    </body>
    </html>
  4. #4
    Hello Sergio!

    Glad it helped! Thanks for the feedback, and for sharing the solution that worked for you.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. toolTip + Locked Column Error JS
    By raidem in forum 2.x Help
    Replies: 3
    Last Post: May 08, 2015, 8:23 PM
  2. Replies: 3
    Last Post: Feb 04, 2015, 6:08 PM
  3. Replies: 1
    Last Post: Jan 06, 2015, 12:18 PM
  4. Replies: 1
    Last Post: Dec 22, 2014, 2:20 PM
  5. Replies: 6
    Last Post: Mar 24, 2014, 8:03 AM

Tags for this Thread

Posting Permissions