What's New?

[CLOSED] How to add tooltip to a javascript image renderer

  1. #1
    Oct 01, 2010, 8:00 PM

    [CLOSED] How to add tooltip to a javascript image renderer

    Hello,

    I've got a column in my grid panel that only contains an image:

    <ext:Column DataIndex="warnings" Width="26" Resizable="false" Hideable="false" Fixed="true" MenuDisabled="true">
    <Renderer Fn="ShowWarningIcon" />
</ext:Column>
    My ShowWarningIcon function is a javascript function:

        <script type="text/javascript">
        function ShowWarningIcon(v, p, record, rowIndex) {
            if (record.data.warnings.length == 0) return;
            return '<img src="icons/error-png/ext.axd">';
        }
</script>
    My question is: how do I gain access to the tooltip?

    Thanks.
    Last edited by Daniil; Oct 04, 2010 at 4:18 PM. Reason: [CLOSED]
  2. #2
    Oct 01, 2010, 9:05 PM
    How about just setting the "title" attribute of the <img> tag? That will give you a light-weight native browser tooltip.

    Or, do you need the full Ext Tooltip?
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Oct 04, 2010, 9:37 AM
    Hi garrisrd,

    I can suggest you the following way. Please look at the example.

    Example
    <%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"test11", "test12", "warning1"},
                                         new object[] {"test21", "test22", ""},
                                         new object[] {"test31", "test32", "warning2"}
                                };
            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>Ext.Net Example</title>

    <script type="text/javascript">
        var myRenderer = function(value, metadata, record, rowIndex, colIndex, store) {
            return (record.get("warnings").length == 0) ? "" : "<img src='icons/error-png/ext.axd'>";
        }
        
        var beforeShowTip = function () {
            var cellIndex = GridPanel1.getView().findCellIndex(this.triggerElement), 
                fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex);
                
            if (fieldName != "test2") {
                return false;
            }
            var rowIndex = GridPanel1.getView().findRowIndex(this.triggerElement),
                record = GridPanel1.getStore().getAt(rowIndex),
                warnings = record.get("warnings");
            if (warnings.length == 0) {
                return false;
            }
        }
        
        var showTip = function () {
            var rowIndex = GridPanel1.getView().findRowIndex(this.triggerElement), 
                record = GridPanel1.getStore().getAt(rowIndex),
                warnings = record.get("warnings");
                
            this.body.dom.innerHTML = warnings;
        }
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="warnings" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2">
                    <Renderer Fn="myRenderer" />
                </ext:Column>
                <ext:Column Header="Warnings" DataIndex="warnings" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:ToolTip ID="ErrorTip" runat="server" Target="={GridPanel1.getView().mainBody}"
        Delegate=".x-grid3-cell" TrackMouse="true">
        <Listeners>
            <BeforeShow Fn="beforeShowTip" />
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>
    </form>
</body>
</html>
    But seems there is an ExtJS bug.
    If the beforeShow returns false during the first attempt of tooltip showing a js error happens.

    I will report this to ExtJS team.
    Last edited by Daniil; Oct 04, 2010 at 9:47 AM.
  4. #4
    Oct 04, 2010, 9:44 AM
    Hi,

    Just use QTip functionality, it is very easy
    Please see
    http://dev.sencha.com/deploy/dev/doc...=Ext.QuickTips

     return '<img src="icons/error-png/ext.axd" ext:qtip="This is a quick tip!" ext:qtitle="Title">';
  5. #5
    Oct 05, 2010, 1:43 PM
    Quote Originally Posted by Daniil View Post
    Hi garrisrd,

    I can suggest you the following way. Please look at the example.

    Example
    <%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] { 
                                         new object[] {"test11", "test12", "warning1"},
                                         new object[] {"test21", "test22", ""},
                                         new object[] {"test31", "test32", "warning2"}
                                };
            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>Ext.Net Example</title>

    <script type="text/javascript">
        var myRenderer = function(value, metadata, record, rowIndex, colIndex, store) {
            return (record.get("warnings").length == 0) ? "" : "<img src='icons/error-png/ext.axd'>";
        }
        
        var beforeShowTip = function () {
            var cellIndex = GridPanel1.getView().findCellIndex(this.triggerElement), 
                fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex);
                
            if (fieldName != "test2") {
                return false;
            }
            var rowIndex = GridPanel1.getView().findRowIndex(this.triggerElement),
                record = GridPanel1.getStore().getAt(rowIndex),
                warnings = record.get("warnings");
            if (warnings.length == 0) {
                return false;
            }
        }
        
        var showTip = function () {
            var rowIndex = GridPanel1.getView().findRowIndex(this.triggerElement), 
                record = GridPanel1.getStore().getAt(rowIndex),
                warnings = record.get("warnings");
                
            this.body.dom.innerHTML = warnings;
        }
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="warnings" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2">
                    <Renderer Fn="myRenderer" />
                </ext:Column>
                <ext:Column Header="Warnings" DataIndex="warnings" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:ToolTip ID="ErrorTip" runat="server" Target="={GridPanel1.getView().mainBody}"
        Delegate=".x-grid3-cell" TrackMouse="true">
        <Listeners>
            <BeforeShow Fn="beforeShowTip" />
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>
    </form>
</body>
</html>
    But seems there is an ExtJS bug.
    If the beforeShow returns false during the first attempt of tooltip showing a js error happens.

    I will report this to ExtJS team.
    The bug has been opened by ExtJS team.
    http://www.sencha.com/forum/showthre...-returns-false

Similar Threads

  1. [CLOSED] Set up ImageCommand tooltip in prepareCommand javascript function
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 09, 2013, 4:58 AM
  2. [CLOSED] Grid Tooltip with Renderer
    By peter.campbell in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 16, 2012, 1:07 PM
  3. [CLOSED] Tooltip / Renderer for Grid Header Column
    By csharpdev in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 02, 2010, 9:16 AM
  4. How i can html of tooltip in javascript function
    By vucuongkg in forum 1.x Help
    Replies: 1
    Last Post: Jun 17, 2010, 4:05 PM
  5. [CLOSED] Get ImageUrl of ext:image with JavaScript
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 23, 2009, 12:19 PM

Posting Permissions