[CLOSED] GridPanel Column Tooltip

**sadaf** · Jan 27, 2011, 9:59 AM

Hi,

Can we add tooltip to columns, basically i trying to add tooltip to column, it should display value of column. How I would add tooltip to company column in following example? Thanks in advance

<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 (!Ext.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();
        }
    }
    
    protected void ToggleChange(object sender, AjaxEventArgs e)
    {
        ToolbarButton button = sender as ToolbarButton;
        this.GridPanel1.ColumnModel.SetHidden(2, button.Pressed);
        button.Text = button.Pressed ? "Show Change" : "Hide Change";
    }

    protected void ChangeHeader(object sender, AjaxEventArgs e)
    {
        ToolbarButton button = sender as ToolbarButton;
        this.GridPanel1.ColumnModel.SetColumnHeader(0, "New label");
        button.Disabled = true;
    }

    protected void ChangeWidth(object sender, AjaxEventArgs e)
    {
        ToolbarButton button = sender as ToolbarButton;
        this.GridPanel1.ColumnModel.SetColumnWidth(1, 100);
        button.Disabled = true;
    }

    protected void ChangeRenderer(object sender, AjaxEventArgs e)
    {
        Renderer r = new Renderer();
        r.Fn = "change";
        this.GridPanel1.ColumnModel.SetRenderer(2, r);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Coolite Toolkit Example - Simple Array Grid</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    

    <script type="text/javascript">
        var template = '<span style="color:{0};">{1}</span>';

        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 + '%');
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>Columns model ajax operation</h1>
        
        <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="n/j h:ia" />
                    </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" Width="160" Sortable="true" DataIndex="company" />
                    <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">                        
                    </ext:Column>
                    <ext:Column Header="Change %" Width="75" Sortable="true" DataIndex="pctChange">
                    </ext:Column>
                    <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                        <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" />
            </SelectionModel>
            
            <BottomBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:ToolbarFill />
                        <ext:ToolbarButton runat="server"
                             Text="Change Header">
                             <AjaxEvents>
                                <Click OnEvent="ChangeHeader" Single="true" />
                             </AjaxEvents>
                        </ext:ToolbarButton>
                        
                        <ext:ToolbarButton runat="server"
                             Text="Change Width">
                             <AjaxEvents>
                                <Click OnEvent="ChangeWidth" Single="true" Success="#{GridPanel1}.getView().refresh(false);" />
                             </AjaxEvents>
                        </ext:ToolbarButton>
                        
                         <ext:ToolbarButton runat="server"
                             Text="Change Renderer">
                             <AjaxEvents>
                                <Click OnEvent="ChangeRenderer" Success="#{GridPanel1}.getView().refresh(false);" />
                             </AjaxEvents>
                        </ext:ToolbarButton>
                        
                        <ext:ToolbarButton runat="server"
                             Text="Hide 'Change'"
                             EnableToggle="true">
                             <AjaxEvents>
                                <Click OnEvent="ToggleChange" />
                             </AjaxEvents>
                        </ext:ToolbarButton>
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>  
    </form>
</body>
</html>

**Daniil** · Jan 27, 2011, 10:02 AM

Hi sadaf,

Please see
http://forums.ext.net/showthread.php?11134

**sadaf** · Jan 27, 2011, 1:14 PM

thanks Dan, It is very helpful - can we display indiviaul column data rather than all columns data in tooltip.

for example if user hovers mouse on first column, it should display 'test11' and if mouse is over 2nd column it should display 'Test22'

thanks

**Daniil** · Jan 27, 2011, 1:19 PM

Please see
https://examples1.ext.net/#/Miscella..._Cell_Tooltip/

It needs to set respective Delegate and Show listener.

**sadaf** · Jan 27, 2011, 1:47 PM

Cannot get cellindex, it always return false.

rowindex is correclty return so is record but cellindex is alway 'false' - I had this problem before I posted you last questions?

Could you please point me why cellindex is returning 'false'?

   
  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;
        }

**Daniil** · Jan 27, 2011, 2:14 PM

The following example works fine. Please investigate.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
 
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            Store store = this.Store1;
            store.DataSource = new object[] {
                                         new object[] {"test11", "test12", "test13"},
                                         new object[] {"test21", "test22", "test23"},
                                         new object[] {"test31", "test32", "test33"}
                                };
            store.DataBind();
        }
    }
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Coolite 0.8.X Example</title>
    <ext:ScriptContainer runat="server" />
 
    <script type="text/javascript">
        Ext.ToolTip.override({
            onMouseMove: function(e) {
                var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
                if (t) {
                    this.targetXY = e.getXY();
                    if (t === this.triggerElement) {
                        if (!this.hidden && this.trackMouse) {
                            this.setPagePosition(this.getTargetXY());
                        }
                    } else {
                        this.hide();
                        this.lastActive = new Date(0);
                        this.onTargetOver(e);
                    }
                } else if (!this.closable && this.isVisible()) {
                    this.hide();
                }
            },

            onTargetOver: function(e) {
                if (this.disabled || e.within(this.target.dom, true)) {
                    return;
                }
                var t = e.getTarget(this.delegate);
                if (t) {
                    this.triggerElement = t;
                    this.clearTimer('hide');
                    this.targetXY = e.getXY();
                    this.delayShow();
                }
            }
        });

        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>
 
    <style type="text/css">
        .myClass {
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:Store ID="Store1" runat="server">
        <Reader>
            <ext:ArrayReader>
                <Fields>
                    <ext:RecordField Name="test1" />
                    <ext:RecordField Name="test2" />
                    <ext:RecordField Name="test3" />
                </Fields>
            </ext:ArrayReader>
        </Reader>
    </ext:Store>
    <ext:GridPanel
        ID="GridPanel1"
        runat="server"
        StoreID="Store1"
        AutoHeight="true">
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:ToolTip
        ID="RowTip"
        runat="server"
        Target="={#{GridPanel1}.getView().mainBody}"
        TrackMouse="true">
        <CustomConfig>
            <ext:ConfigItem Name="delegate" Value=".x-grid3-cell" Mode="Value" />
        </CustomConfig>
        <Listeners>
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>
    </form>
</body>
</html>

**sadaf** · Jan 27, 2011, 2:20 PM

Copy and pasted your code and still getting same expception ...

Here is exact error

Microsoft JScript runtime error: 'this.config[...].dataIndex' is null or not an object

**Daniil** · Jan 27, 2011, 2:23 PM

Please provide an exact version of Coolite you use.

**sadaf** · Jan 27, 2011, 2:26 PM

Coolite v0.8.2.19147

**Daniil** · Jan 27, 2011, 2:46 PM

Hmm, I test under 0.8.2 also.

Please send dlls on support@object.net to test.

Thread: [CLOSED] GridPanel Column Tooltip

Thread Tools

Search Thread

Display

[CLOSED] GridPanel Column Tooltip

Similar Threads

[CLOSED] GridPanel column hyperlink tooltip

[CLOSED] tooltip on grid column

[CLOSED] Ajax tooltip for grid Column

Show tooltip in gridpanel if column is too small

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] GridPanel Column Tooltip

Thread Tools

Search Thread

Display

[CLOSED] GridPanel Column Tooltip

Similar Threads

[CLOSED] GridPanel column hyperlink tooltip

[CLOSED] tooltip on grid column

[CLOSED] Ajax tooltip for grid Column

Show tooltip in gridpanel if column is too small

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us