[CLOSED] [1.0] GridPanel cell and Tooltips

  1. #1

    [CLOSED] [1.0] GridPanel cell and Tooltips

    Is it possible to put a tooltip at the cell level on a GridPanel?

    I have a GridPanel with 10 columns and 20 rows. I need to do a tooltip on 3 of the cells in each row, but no tooltip on the row itself.


    Is this possible?
  2. #2

    RE: [CLOSED] [1.0] GridPanel cell and Tooltips

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <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&amp;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 &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan &amp; Chase &amp; 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 &amp; 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 &amp; 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>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>GridPanel Row with ToolTip - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
        <script type="text/javascript">
            var template = '{1}';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            }
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            }
            
            var showTip = function () {
                var rowIndex = GridPanel1.view.findRowIndex(this.triggerElement), 
                    cellIndex = GridPanel1.view.findCellIndex(this.triggerElement),
                    record = Store1.getAt(rowIndex),
                    fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex),
                    data = record.get(fieldName);
                    
                this.body.dom.innerHTML = data;
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true"
                Title="Array Grid" 
                TrackMouseOver="true"
                Width="600" 
                Height="350"
                AutoExpandColumn="Company">
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                        <ext:Column Header="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                </SelectionModel>
            </ext:GridPanel>     
            
            <ext:ToolTip 
                ID="RowTip" 
                runat="server" 
                Target="={GridPanel1.getView().mainBody}"
                Delegate=".x-grid3-cell"
                TrackMouse="true">
                <Listeners>
                    <Show Fn="showTip" />
                </Listeners>
            </ext:ToolTip>     
        </form>
    </body>
    </html>
  3. #3

    Correction to resolution

    I struggled with this solution for a while and then the problem was clear:

    The line:

    Target="={GridPanel1.getView().mainBody}"

    is wrong and should be:

    Target="={#{GridPanel1}.getView().mainBody}"

    -Steve
  4. #4
    Quote Originally Posted by SFritsche View Post
    I struggled with this solution for a while and then the problem was clear:

    The line:

    Target="={GridPanel1.getView().mainBody}"
    is wrong and should be:

    Target="={#{GridPanel1}.getView().mainBody}"
    -Steve
    It's not wrong for this simple example.
    Just #{} is used when a page is configured with Master page.
  5. #5

    How does this work in 2.2? Getting .findRowIndex() doesn't exist?

    Quote Originally Posted by Daniil View Post
    It's not wrong for this simple example.
    Just #{} is used when a page is configured with Master page.
    How does this work in 2.2? Getting .findRowIndex() doesn't exist?
    I'm just trying to show tooltip for certain cells based on the column ...
  6. #6
    Quote Originally Posted by rthiney View Post
    How does this work in 2.2? Getting .findRowIndex() doesn't exist?
    I'm just trying to show tooltip for certain cells based on the column ...
    There is an example for Ext.NET v2.
    https://examples2.ext.net/#/Miscella..._Cell_Tooltip/

Similar Threads

  1. Replies: 1
    Last Post: Jul 10, 2012, 11:16 AM
  2. TreeGrid cell Tooltips
    By rajputamit in forum 1.x Help
    Replies: 9
    Last Post: Mar 19, 2012, 11:27 AM
  3. [CLOSED] Gridpanel with cell tooltips
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2011, 7:53 AM
  4. [CLOSED] GridPanel Cell Tooltips doesn't work in user control
    By skisly in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 09, 2011, 1:57 PM
  5. [CLOSED] Tooltips Example for GridPanel Rows / Cells Tookit Version 0.8
    By niceguymattx in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 21, 2010, 3:17 AM

Posting Permissions