What's New?

[CLOSED] Grid cell tooltip

  1. #1
    Oct 11, 2012, 7:05 AM

    [CLOSED] Grid cell tooltip

    Is there a way to set a tooltip for specific columns cell?
    Thanks in advance
    Marco Morreale
    Last edited by Daniil; Oct 15, 2012 at 1:38 PM. Reason: [CLOSED]
  2. #2
    Oct 11, 2012, 7:42 AM
    Quote Originally Posted by marco.morreale View Post
    Is there a way to set a tooltip for specific columns cell?
    Thanks in advance
    Marco Morreale
    https://examples2.ext.net/#/Miscella..._Cell_Tooltip/

    Good luck !

    Martin
  3. #3
    Oct 11, 2012, 7:55 AM
    Thank you Martin,
    but that will set tooltip for cells in all columns.

    I want to set it just for some columns.

    Marco
  4. #4
    Oct 11, 2012, 11:55 AM
    Hi Marco,

    Return false from a ToolTip BeforeShow listener to prevent a tip from appearing. Within this listener you can determine a column and, respective, a tip should appear or not.
  5. #5
    Oct 11, 2012, 12:20 PM
    Please Daniil, can you provide an example?

    I tried this but ToolTip shows with last valid cell content.

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

        var change = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var onBeforeShow = function (toolTip, grid) {
            var view = grid.getView(),
                store = grid.getStore(),
                rowIndex = view.findItemByChild(toolTip.triggerElement).viewIndex,
                record = store.getAt(rowIndex),
                column = view.getHeaderByCell(toolTip.triggerElement),
                data = record.get(column.dataIndex);

             // I don't want ToolTip for date, decimal. (Format is wrong)
            switch (column.dataIndex) {
                case "Importo", "DatOrdine", "Quantity":
                    return false;
                    break;
                default:
                    toolTip.update(data);
                    break;
            }

        };
    </script>

    M
  6. #6
    Oct 11, 2012, 3:58 PM
    In the example below a ToolTip appears for the second column only.

    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", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" }
            };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var onBeforeShow = function (toolTip) {
            var grid = App.GridPanel1,
                view = grid.getView(),
                store = grid.getStore(),
                column = view.getHeaderByCell(toolTip.triggerElement),
                rowIndex,
                record,
                data;

            if (column.dataIndex !== "test2") {
                return false;
            }

            rowIndex = view.findItemByChild(toolTip.triggerElement).viewIndex,
            record = store.getAt(rowIndex);
            data = record.get(column.dataIndex)
            toolTip.update(data);
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:GridPanel ID="GridPanel1" runat="server">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="test1" />
                            <ext:ModelField Name="test2" />
                            <ext:ModelField Name="test3" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                <ext:Column runat="server" Text="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>

    <ext:ToolTip 
        runat="server" 
        Target="={#{GridPanel1}.getView().el}"
        Delegate=".x-grid-cell"
        TrackMouse="true">
        <Listeners>
            <BeforeShow Fn="onBeforeShow" />
        </Listeners>
    </ext:ToolTip>
</body>
</html>
  7. #7
    Oct 15, 2012, 10:28 AM
    Thank you Daniil.
    Please, mark as closed.
    M
  8. #8
    Dec 20, 2012, 2:30 PM
    Hi Danill,
    I'm trying to use this example to only have a tooltip on 1 cell in a grid, but this code is not quite working right. If I initially hover over column 2 I get the tip, then move over to column 3 and it goes away. But if I go Back to column 2 the tip doesn't show, unless I hover off the grid completely then go back to column 2 and it shows up again. It seems like as soon as False is returned from the Listener it get's completely disabled? Hopefully this makes sense.

    Thanks,
    Jason W
  9. #9
    Dec 21, 2012, 4:16 AM
    Hi Jason,

    Welcome to Ext.NET forums!

    I am unable to reproduce. Please clarify what Ext.NET sources are you testing with?
  10. #10
    Dec 21, 2012, 2:18 PM
    Danill,
    I've been testing with Version 2.0.0 Release, I saw a new version is out so I downloaded 2.1.1 and now the Tooltip is behaving correctly using the new version. Thanks for responding so quickly.

    JW

Similar Threads

  1. [CLOSED] GridPanel Cell Tooltip is not working
    By supera in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 27, 2017, 11:47 AM
  2. [CLOSED] Grid-cell Tooltip
    By adelaney in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 10, 2012, 5:43 PM
  3. [CLOSED] Cell tooltip
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 01, 2011, 4:34 PM
  4. Tooltip display on Grid Cell
    By madhugumma in forum 1.x Help
    Replies: 1
    Last Post: Jul 29, 2009, 3:31 PM
  5. Tooltip of cell contents in GP...?
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: Jan 13, 2009, 1:51 PM

Posting Permissions