toolTip + Locked Column Error JS

  1. #1

    toolTip + Locked Column Error JS

    Hi,
    I found that if we are using Tooltip with Locked properties we are getting JavaScript Error. Is this is Bug?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <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" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
    
                this.Store1.DataBind();
            }
        }
    </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: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" Locked="true"/>
                        <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>
  2. #2
    Hi @raidem,

    Welcome to the Ext.NET forums!

    This Delegate="={#{GridPanel1}.getView().itemSelector}" is not going to work with a locking GridPanel.

    A locking GridPanel is actually two GridPanels - locked and normal.
    http://docs.sencha.com/extjs/4.2.1/#...-enableLocking

    Please define two ToolTips as follows:
    <ext:ToolTip 
        runat="server" 
        Target="={#{GridPanel1}.getView().el}"
        Delegate="={#{GridPanel1}.normalGrid.getView().itemSelector}"
        TrackMouse="true">
        <Listeners>
            <Show Handler="onShow(this, #{GridPanel1});" />
        </Listeners>
    </ext:ToolTip>
    
    <ext:ToolTip 
        runat="server" 
        Target="={#{GridPanel1}.getView().el}"
        Delegate="={#{GridPanel1}.lockedGrid.getView().itemSelector}"
        TrackMouse="true">
        <Listeners>
            <Show Handler="onShow(this, #{GridPanel1});" />
        </Listeners>
    </ext:ToolTip>
  3. #3

    Trick to display on some specific column.

    Hi @Daniil
    I'm also Happy joining to this fantastic product community!
    I have one additionall extra question.
    For example:

    https://examples2.ext.net/#/Miscella..._Cell_Tooltip/

    Here I can get Column Header Name and display ToolTip if my mouse coursor is on some specif column.
    Is it possible to to have ToolTip only on some specific column using my previous example?

    Thanks in advance.
    Best Regards
    raidem
  4. #4
    There is a solution for Ext.NET v1.
    http://forums.ext.net/showthread.php...ll=1#post44680

    It could help you to get a solution for v2.

Similar Threads

  1. Replies: 3
    Last Post: Feb 04, 2015, 5:08 PM
  2. Replies: 3
    Last Post: Dec 10, 2014, 9:36 AM
  3. Error/Bug Gridpanel When Column Locked
    By w0rtez in forum 2.x Help
    Replies: 1
    Last Post: Jul 22, 2013, 8:49 PM
  4. [CLOSED] treegrid locked column error
    By tobros in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 10, 2013, 5:24 AM
  5. treegrid locked column error
    By tobros in forum 2.x Help
    Replies: 0
    Last Post: Jun 07, 2013, 8:53 AM

Tags for this Thread

Posting Permissions