[CLOSED] GridPanel cell tooltip only when data is overflowed

  1. #1

    [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?

    http://examples2.ext.net/#/Miscellan..._Cell_Tooltip/

    Click image for larger version. 

Name:	example 017.png 
Views:	210 
Size:	22.4 KB 
ID:	5323
    Last edited by Daniil; Jan 07, 2013 at 1:36 PM. Reason: [CLOSED]
  2. #2
    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
    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:	210 
Size:	22.4 KB 
ID:	5323
  4. #4
    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:	210 
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
    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
    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
    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. 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. 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