What's New?

[CLOSED] GridPanel cell tooltip only when data is overflowed

  1. #1
    Dec 27, 2012, 5:40 PM

    [CLOSED] GridPanel cell tooltip only when data is overflowed

    Hi folks, i would like to know whether it's possible to show cell's tooltip only if cell's content is overflowed?

    https://examples2.ext.net/#/Miscella..._Cell_Tooltip/

    Click image for larger version.  Name: example 017.png  Views: 309  Size: 22.4 KB  ID: 5323
    Last edited by Daniil; Jan 07, 2013 at 1:36 PM. Reason: [CLOSED]
  2. #2
    Dec 27, 2012, 11:25 PM
    Hello!

    Try this one:

    <%@ 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)
        {
            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" }
            };

            this.Store1.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>GridPanel Cell with ToolTip - Ext.NET Examples</title>

    <script>
        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),
                tm = new Ext.util.TextMetrics(column.el);
            
            if (tm.getWidth(data) > (column.getWidth() - 10)) {
                toolTip.update(data);
                return true;
            }
            else {
                return false;
            }
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server"
            Title="Array Grid" 
            Width="600" 
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price">
                        <Renderer Format="UsMoney" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="change">
                        <Renderer Fn="change" />
                    </ext:Column>
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                        <Renderer Fn="pctChange" />
                    </ext:Column>
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" Mode="Single" />
            </SelectionModel>
            <View>
                <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
            </View>
        </ext:GridPanel>     
        
        <ext:ToolTip 
            runat="server" 
            Target="={#{GridPanel1}.getView().el}"
            Delegate=".x-grid-cell"
            TrackMouse="true">
            <Listeners>
                <BeforeShow Handler="return onBeforeShow(this, #{GridPanel1});" /> 
            </Listeners>
        </ext:ToolTip>     
    </form>
</body>
</html>
  3. #3
    Dec 27, 2012, 11:38 PM
    Baidaly, your example works like a charm but i'd like to know whether it's possible to detect if cell's content "ends with" '...', instead of measuring the text again - somehow the text was measured to add the ellipsis to the end of the text.

    Click image for larger version.  Name: example 017.png  Views: 309  Size: 22.4 KB  ID: 5323
  4. #4
    Dec 27, 2012, 11:54 PM
    Quote Originally Posted by RCN View Post
    Baidaly, your example works like a charm but i'd like to know whether it's possible to detect if cell's content "ends with" '...', instead of measuring the text again - somehow the text was measured to add the ellipsis to the end of the text.

    Click image for larger version.  Name: example 017.png  Views: 309  Size: 22.4 KB  ID: 5323
    I think it's not possible because ellipsis is added by browser (via CSS text-overflow) not by ExtJS and therefore there is no way to understand this because text in table's cell doesn't change.
  5. #5
    Dec 28, 2012, 1:44 AM
    Quote Originally Posted by Baidaly View Post
    I think it's not possible because ellipsis is added by browser (via CSS text-overflow) not by ExtJS and therefore there is no way to understand this because text in table's cell doesn't change.
    Maybe it's possible to acomplish this task by using offsetWidth and scrollWidth, as shown below:
    <!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <style type="text/css">
        p.test
        {
            border: 1px solid #000000;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
        }
        
        p.normal
        {
            text-overflow: ellipsis;
        }
    </style>
    <script type="text/javascript">
        var funcA = function () {
            var elmA = document.getElementById("_elmA");

            alert(Ext.net.StringUtils.format("Element OVERFLOWED\n\noffsetWidth: {0}\n\nscrollWidth: {1}", elmA.offsetWidth, elmA.scrollWidth));

            var elmB = document.getElementById("_elmB");

            //-2 due the border
            alert(Ext.net.StringUtils.format("Element NOT overflowed\n\noffsetWidth: {0}\n\nscrollWidth: {1}", elmB.offsetWidth - 2, elmB.scrollWidth));
        }
    </script>
</head>
<body>
    <div style="width: 300px">
        <p id="_elmA" class="test normal">
            Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net
            Ext.Net Ext.Net Ext.Net Ext.Net --- Final
        </p>
    </div>
    <div>
        <p id="_elmB" class="test">
            Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net Ext.Net
            Ext.Net Ext.Net Ext.Net Ext.Net --- Final
        </p>
    </div>
    <ext:ResourceManager runat="server" />
    <ext:Button Text="Click Me" runat="server">
        <Listeners>
            <Click Handler="funcA();" />
        </Listeners>
    </ext:Button>
</body>
</html>
    The code above is an example to detect overflowed text but unfortunately i was not able reproduce the usage presented above on GridPanel's Cell. Can you help me make it work?
    Last edited by RCN; Dec 28, 2012 at 1:47 AM.
  6. #6
    Dec 28, 2012, 5:30 AM
    Please take a look at this example.

    It is almost successful. Almost because it doesn't work for the first cell. Try to shrink the first column as much as possible, then hover the first cell. A ToolTip doesn't appear (I tested in FireFox only). For the rest cell it works well. If write more text, for example, "3m Co 3m Co", it works.

    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)
        {
            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" }
            };
 
            this.Store1.DataBind();
        }
    }
</script>
 
<!DOCTYPE html>
 
<html>
<head runat="server">
    <title>GridPanel Cell with ToolTip - Ext.NET Examples</title>
 
    <script>
        var onBeforeShow = function (toolTip) {             
            var td = toolTip.triggerElement,
                cell = Ext.fly(td).child("div").dom;

            if (cell.clientWidth < cell.scrollWidth) {
                toolTip.update("Hello!");
            }
            else {
                return false;
            }
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
         
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            Title="Array Grid"
            Width="600"
            Height="350">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="company" />
                                <ext:ModelField Name="price" Type="Float" />
                                <ext:ModelField Name="change" Type="Float" />
                                <ext:ModelField Name="pctChange" Type="Float" />
                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column runat="server" Text="Price" DataIndex="price" />
                    <ext:Column runat="server" Text="Change" DataIndex="change" />
                    <ext:Column runat="server" Text="Change" DataIndex="pctChange" />
                    <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView runat="server" TrackOver="true" />
            </View>
        </ext:GridPanel>     
         
        <ext:ToolTip
            runat="server"
            Target="={#{GridPanel1}.getView().el}"
            Delegate=".x-grid-cell"
            TrackMouse="true">
            <Listeners>
                <BeforeShow Fn="onBeforeShow" /> 
            </Listeners>
        </ext:ToolTip>     
    </form>
</body>
</html>
    Just for references.
    http://stackoverflow.com/questions/1...lowing-content
  7. #7
    Dec 28, 2012, 10:06 AM
    Thank you Daniil. I will review it on other browsers and be sure that i'll keep you posted :)

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. [OPEN] [#1316] [2.x] Tooltip is not shown when it is overflowed
    By RCN in forum Bugs
    Replies: 19
    Last Post: Apr 26, 2016, 9:56 PM
  3. [CLOSED] GridPanel Cell Tooltip - javascript error on this.hide()
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 16, 2011, 12:22 PM
  4. Changing a GridPanel cell value with getSelected().data.field_name does not work
    By paul-2011 in forum 1.x Help
    Replies: 1
    Last Post: Jan 03, 2011, 1:49 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