[CLOSED] Adding a tooltip to Grid Row

  1. #1

    [CLOSED] Adding a tooltip to Grid Row

    Hi,

    Can someone please give me some clue to add a Tooltip for a row in a grid. This tooltip is should be html formatted data in the record corresponding to the row.

    Thanks,
    Last edited by Daniil; Feb 11, 2015 at 6:14 AM. Reason: [CLOSED]
  2. #2
    Hi @barnali,

    If you want to show tooltip on a row column, You can add a Renderer to it, eg:

    X.Column().Renderer("metadata.tdAttr = 'data-qtip=\"' + value + '\"'; return value;")
  3. #3
    You can try the following
    More information: http://forums.ext.net/showthread.php?52391

    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    store = grid.getStore(),
                    record = view.getRecord(view.findItemByChild(toolTip.triggerElement)),
                    column = view.getHeaderByCell(toolTip.triggerElement),
                    data = record.get(column.dataIndex);
    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:GridPanel ID="_grd" runat="server" Title="Records" Frame="false" Width="500" Height="500">
            <Store>
                <ext:Store AutoLoad="true" ID="_str" runat="server">
                    <Proxy>
                        <ext:AjaxProxy Url="~/Example/LoadFakeRecords/">
                            <ActionMethods Read="POST" />
                            <Reader>
                                <ext:JsonReader RootProperty="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model IDProperty="ID" runat="server">
                            <Fields>
                                <ext:ModelField Name="ID" Type="String" />
                                <ext:ModelField Name="Name" Type="String" />
                                <ext:ModelField Name="LastName" Type="String" />
                                <ext:ModelField Name="Address" Type="String" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Text="ID" DataIndex="ID" runat="server" />
                    <ext:Column Text="Name" Flex="1" DataIndex="Name" runat="server" />
                    <ext:Column Text="Last Name" DataIndex="LastName" runat="server" />
                    <ext:Column Text="Address" DataIndex="Address" runat="server" />
                </Columns>
            </ColumnModel>
            <Bin>
                <ext:ToolTip
                    runat="server"
                    Delegate=".x-grid-cell"
                    TrackMouse="true">
                    <Listeners>
                        <Show Handler="onShow(this, #{_grd});" />
                    </Listeners>
                </ext:ToolTip>
            </Bin>
            <Listeners>
        <AfterRender Handler="item.getBinComponent(0).setTarget(item.getView().el);" />
    </Listeners>
        </ext:GridPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index()
            {
                return View();
            }
    
            public StoreResult LoadFakeRecords()
            {
                List<Entity> lst = new List<Entity>();
    
                for (int index = 0; index < 15; index++)
                {
                    lst.Add(new Entity
                    {
                        ID = index,
                        Name = string.Format("Name - {0}", index),
                        LastName = string.Format("Last Name - {0}", index),
                        Address = string.Format("Address - {0}", index)
                    });
                }
    
                return new StoreResult(lst, lst.Count());
            }
        }
    
        [Serializable]
        public class Entity
        {
            public int ID { get; set; }
    
            public string Name { get; set; }
    
            public string LastName { get; set; }
    
            public string Address { get; set; }
        }
    }
  4. #4
    Thanks this worked.
  5. #5
    Barnali, can we mark this thread as closed?

Similar Threads

  1. Adding tooltip to pie chart.
    By KnowledgeSeeker in forum 2.x Help
    Replies: 6
    Last Post: Nov 07, 2013, 6:05 AM
  2. [CLOSED] Adding ToolTip to panel in codebehind
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 17, 2013, 1:26 PM
  3. [CLOSED] Adding line series tooltip dynamically.
    By RCM in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 04, 2013, 7:06 PM
  4. [CLOSED] Adding a tooltip to calendar Events inside a month-details-panel
    By John_Writers in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 18, 2013, 11:56 AM
  5. [CLOSED] ToolTip on grid row
    By inayath in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 07, 2011, 11:13 AM

Tags for this Thread

Posting Permissions