[OPEN] [#1846] GridPanel ToolTip Not Appearing

  1. #1

    [OPEN] [#1846] GridPanel ToolTip Not Appearing

    Dears,

    All GridPanel I used has the code for ToolTip as per examples page as following:

                                        <ext:CommandColumn runat="server" Width="100">
                                            <Commands>
    					                        <ext:GridCommand Icon="RecordGreen" CommandName="Activate">
    						                        <ToolTip Text="Activate" />
    					                        </ext:GridCommand>
    					                        <ext:CommandSeparator />
    					                        <ext:GridCommand Icon="RecordRed" CommandName="Deactivate">
    						                        <ToolTip Text="Disable" />
    					                        </ext:GridCommand>
                                                <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                    <ToolTip Text="Delete"></ToolTip>
                                                </ext:GridCommand>                                                
                                            </Commands>
    			                        </ext:CommandColumn>
    Why ToolTip is not showing when mouseover for my GridPanels?

    Click image for larger version. 

Name:	ToolTip1.jpg 
Views:	62 
Size:	88.0 KB 
ID:	25495

    - In this snapshot, my mouse is pointing to first command icon, but ToolTip not shown.

    Click image for larger version. 

Name:	ToolTip2.jpg 
Views:	59 
Size:	86.7 KB 
ID:	25496

    - Here it is normal, and I used same code for that.

    Kindly, advice.
    Last edited by fabricio.murta; Jan 14, 2021 at 1:40 PM.
  2. #2
    Here test code:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Apps/UC/MasterPage.master" AutoEventWireup="true" CodeFile="GridPanelTest.aspx.cs" Inherits="Apps_UC_GridPanelTest" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
    <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" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" }
                };
    
                this.Store1.DataBind();
    
                //this.ResourceManager1.RegisterIcon(Icon.Accept);
                //this.ResourceManager1.RegisterIcon(Icon.MoneyEuro);
                //this.ResourceManager1.RegisterIcon(Icon.MoneyAdd);
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    
    
        <script>
            var prepareToolbar = function (grid, toolbar, rowIndex, record) {
                // for example hide 'Edit' button if price < 50
                if (record.get("price") < 50) {
                    //hide separator
                    toolbar.items.getAt(1).hide();
                    //hide edit button
                    toolbar.items.getAt(2).hide();
                } else {
                    //otherwise add another button
                    toolbar.add(new Ext.Button({
                        iconCls : "icon-accept",
                        command : "accept"
                    }));
    
                    toolbar.updateLayout();
                }
            };
    
            //in PrepareCommands we can modify commands collection
            var prepareCommands = function (grid, commands, record, row) {
                if (record.get("price") >= 50) {
                    commands.push({
                            command : "accept",
                            iconCls : "icon-accept"
                    });
                }
            };
    
            //in PrepareCommand we can modify command
            var prepareCommand = function (grid, command, record, row) {
                if (command.command == 'Edit' && record.get("price") < 50) {
                    command.hidden = true;
                    command.hideMode = 'display'; //you can try 'visibility' also
                }
            };
    
            var prepareCellCommand = function (grid, command, record, row, col, value) {
                if (command.command == 'Dollar' && record.get("price") < 50) {
                    command.iconCls = "icon-moneyeuro";
                }
            };
    
            var prepareCellCommands = function (grid, commands, record, row, col, value) {
                if (record.get("price") >= 50) {
                   commands.push({
                       iconCls : "icon-moneyadd",
                       command : "moneyadd"
                   });
                }
            };
        </script>
    
    <body>
        
            
            <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>
    
            <ext:GridPanel
                runat="server"
                StoreID="Store1"
                Title="Row commands"
                Width="800"
                Height="300">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                        <ext:Column runat="server" Text="Price" Width="100" DataIndex="price">
                            <Renderer Format="UsMoney" />
    
                            <Commands>
                                <ext:ImageCommand Icon="MoneyDollar" CommandName="Dollar" />
                            </Commands>
    
                            <PrepareCommand Fn="prepareCellCommand" />
                            <PrepareCommands Fn="prepareCellCommands" />
    
                            <Listeners>
                                <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                            </Listeners>
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange" />
                        <ext:DateColumn runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" />
    
                        <ext:ImageCommandColumn runat="server" Width="100" Text="Image Cmds">
                            <Commands>
                                <ext:ImageCommand Icon="Delete" CommandName="Delete">
                                    <ToolTip Text="Delete" />
                                </ext:ImageCommand>
                                 <ext:ImageCommand Icon="NoteEdit" CommandName="Edit">
                                    <ToolTip Text="Edit" />
                                </ext:ImageCommand>
                            </Commands>
                            <PrepareCommand Fn="prepareCommand" />
                            <PrepareCommands Fn="prepareCommands" />
                            <Listeners>
                                <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                            </Listeners>
                        </ext:ImageCommandColumn>
    
                        <ext:CommandColumn runat="server" Width="100" Text="Toolbar Cmds">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete">
                                    <ToolTip Text="Delete" />
                                </ext:GridCommand>
                                <ext:CommandSeparator />
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                    <ToolTip Text="Edit" />
                                </ext:GridCommand>
                            </Commands>
                            <PrepareToolbar Fn="prepareToolbar" />
                            <Listeners>
                                <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>
            </ext:GridPanel>
      
    </body>
    </html>
    </asp:Content>
    
    The ToolTip appears only when mouseover Image Cmds but Toolbar Cmds.
  3. #3
    Hello @aliabdulla!

    Thanks for the test case, I could reproduce the issue. In fact, to reproduce it I could just try to give any ext:GridCommand component a tooltip from markup, in the GridPanel > Commands > Prepare Toolbar live v5 example.

    And just by chance, the example itself shown a way to overcome this situation. It seems an issue in the ext.GridCommand component makes it bind a broken/unreliable tooltip to the resulting button component when it is rendered.

    To overcome the issue, just move the tooltip definition, from the component itself, to its PrepareToolbar handler.

    In your example, add this to the top or bottom of the prepareToolbar() client side function:

    toolbar.items.each(function (item) {
        if (item.command == "Edit") {
            item.setTooltip("Edit this record that costs USD " + record.get('price') + ".");
        } else if (item.command == "Delete") {
            item.setTooltip("Send database a command to delete database company <b>" + record.get('company') + "</b>.");
        }
    });
    This would allow you to assign a tooltip according to the button's actual command (instead of relying in its position with toolbar.items.getAt()). So this should be easier to maintain and more error-safe in the long run.

    This is indeed a bug, and we've logged issue #1846 to track and fix this. We'll post a follow-up here as soon as the fix is applied to the code and ready to make it to the next release.

    Hope this helps!
  4. #4
    Hello @fabricio.murta,

    Thanks a lot for your cooperation.

    Inform us through this post once problem solved.

    Regards,

Similar Threads

  1. Replies: 7
    Last Post: Jan 05, 2016, 11:35 PM
  2. Gridpanel is appearing multiple times
    By Mr.Techno in forum 1.x Help
    Replies: 4
    Last Post: Jun 22, 2011, 11:35 AM
  3. [CLOSED] IFrame appearing above all other components
    By rbarr in forum 1.x Legacy Premium Help
    Replies: 34
    Last Post: May 09, 2011, 10:46 AM
  4. IFrame appearing above all of components
    By rbarr in forum 1.x Help
    Replies: 0
    Last Post: Apr 11, 2011, 9:10 AM
  5. [CLOSED] Scrollbar multiselect not appearing
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 11, 2010, 2:06 PM

Posting Permissions