[CLOSED] Grid Tooltip with Renderer

  1. #1

    [CLOSED] Grid Tooltip with Renderer

    Hi,

    I've got a row tooltip no problem following the example but I'd like to pull the active GridView text for a particular row cell, as it has a Renderer in place - I need the rendered value.

    ie: I hover over a row, and one of my columns has a renderer on it with a text value which I'd like to show in my tooltip.

    My tooltip code:

    <ToolTips>
                            <ext:ToolTip ID="RowTip" runat="server" Target="={#{listActionEventLog}.getView().mainBody}"
                                Delegate=".x-grid3-row" TrackMouse="true">
                                <Listeners>
                                    <Show Handler="this.body.dom.innerHTML = setupEventTooltip(this.triggerElement);" />
                                </Listeners>
                            </ext:ToolTip>
                        </ToolTips>
    var setupEventTooltip = function (index) {
        var rowIndex = listActionEventLog.view.findRowIndex(index);
        var record = listActionEventLog.getStore().getAt(rowIndex);
         return "<b>Changes by {0}</b><br />{1}".format(record.get("ModifiedById"), record.get("ChangeLog"));
    };

    This uses the stores though so I'm getting the ID rather than the username showing up for my 'ModifiedById'. I'd rather not have to call the renderer manually again, as the grid already shows the name in the cell.

    Cheers,
    Peter
    Last edited by geoffrey.mcgill; Jan 18, 2012 at 7:38 AM. Reason: [CLOSED]
  2. #2
    Hi Peter,

    You can get an HTML element of a specified cell.
    http://docs.sencha.com/ext-js/3-4/#!...method-getCell

    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[] { "test1" },
                    new object[] { "test2" },
                    new object[] { "test3" }
                };
                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 onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    rowIndex = view.findRowIndex(toolTip.triggerElement),
                    cell = view.getCell(rowIndex, grid.getColumnModel().findColumnIndex("test"));
                toolTip.body.dom.innerHTML = cell.childNodes[0].innerHTML;
            };
        </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="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test" DataIndex="test">
                            <Renderer Handler="return '<b>' + value + '</b>';" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
            <ext:ToolTip 
                runat="server"
                Target="#{GridPanel1}.getView().mainBody"
                Delegate=".x-grid3-row" 
                TrackMouse="true"
                AutoHide="false">
                <Listeners>
                    <Show Handler="onShow(this, #{GridPanel1});" />
                </Listeners>
            </ext:ToolTip>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] ext:StringFilter & Renderer on grid
    By peter.campbell in forum 1.x Premium Help
    Replies: 7
    Last Post: May 27, 2011, 10:37 AM
  2. [CLOSED] Renderer on grid performance
    By jeybonnet in forum 1.x Premium Help
    Replies: 1
    Last Post: Apr 28, 2011, 1:05 PM
  3. Grid Column Renderer
    By karthik.arian03 in forum 1.x Help
    Replies: 8
    Last Post: Feb 11, 2011, 6:34 AM
  4. [CLOSED] Tooltip / Renderer for Grid Header Column
    By csharpdev in forum 1.x Premium Help
    Replies: 4
    Last Post: Dec 02, 2010, 9:16 AM
  5. [CLOSED] How to add tooltip to a javascript image renderer
    By garrisrd in forum 1.x Premium Help
    Replies: 4
    Last Post: Oct 05, 2010, 1:43 PM

Tags for this Thread

Posting Permissions