[CLOSED] Cell tooltip

  1. #1

    [CLOSED] Cell tooltip

    Hi,

    in the following example the cell tooltip doesn't appear:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 id="Head1" runat="server">
            <title></title>
        <ext:ResourcePlaceHolder ID="MainResourcePlaceHolder" runat="server" />
     
        <script type="text/javascript">
            var showTip = function () {
                var rowIndex = EXDetailGridPanel.view.findRowIndex(this.triggerElement),
                    cellIndex = EXDetailGridPanel.view.findCellIndex(this.triggerElement),
                    record = dsExpensePivot.getAt(rowIndex),
                    fieldName = EXDetailGridPanel.getColumnModel().getDataIndex(cellIndex),
                    data = record.get(fieldName);
                this.body.dom.innerHTML = data;
            };
        </script>
        </head>
        <body>
            <ext:ResourceManager ID="MainScriptManager" runat="server" RemoveViewState="true"/>
     
            <ext:Viewport ID="MainViewPort" runat="server" HideBorders="true" Layout="border">
                <Items>
                    <ext:Panel
                        ID="EXDetailCardPanel" 
                        Region="Center"
                        runat="server" 
                        Layout="Fit"
                        Frame="false"
                        Border="false">
                        <Items>
     
                            <ext:GridPanel
                                ID="EXDetailGridPanel"
                                runat="server" 
                                Header="false"
                                Border="false"
                                TrackMouseOver="true">
                                <Store>
                                    <ext:Store ID="dsExpensePivot" runat="server" AutoLoad="true">
                                        <Proxy>
                                            <ext:HttpProxy Url="/EasyTime/Expense/GetExpenseSheetPivot/" />
                                        </Proxy>
                                        <Reader>
                                            <ext:JsonReader IDProperty="ExpenseId" Root="data">
                                                <Fields>
                                                    <ext:RecordField Name="ExpenseId" SortDir="ASC" />
                                                    <ext:RecordField Name="ExpenseName" />
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
     
                                        <BaseParams>
                                            <ext:Parameter Name="expenseSheetId" Value="64" Mode="Value" />
                                        </BaseParams>
                                        <SortInfo Field="ExpenseId" Direction="ASC" />
                                    </ext:Store>
                                </Store>
     
                                <ColumnModel ID="DayGridColumnModel" runat="server">
                                    <Columns>
                                        <ext:Column ColumnID="ExpenseName" DataIndex="ExpenseName" Header="Descrizione Spesa" Width="150" Align="Left" />
                                        <ext:Column ColumnID="ExpenseId" DataIndex="ExpenseId" Header="Id Spesa" Width="50" Locked="true" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel SingleSelect="true" runat="server" />
                                </SelectionModel>
                            </ext:GridPanel>
     
                            <ext:ToolTip
                                ID="RowTip"
                                runat="server"
                                Target="={EXDetailGridPanel.getView().mainBody}"
                                Delegate="x-grid3-cell"
                                TrackMouse="true">
                                <Listeners>
                                    <Show Fn="showTip" />
                                </Listeners>
                            </ext:ToolTip>
                        </Items>
                    </ext:Panel>
     
                    <ext:Panel ID="TEDLE_South"
                        runat="server"
                        Height="200"
                        Region="South" Collapsed="true" CollapseMode="Mini"
                        BodyBorder="false"
                        Border="false"
                        Title="&nbsp;"
                        Icon="ApplicationViewList"
                        Layout="Fit">
                    </ext:Panel>
     
                </Items>
            </ext:Viewport>
        </body>
    </html>
    There is something wrong?

    Bye,
    Stefano
    Last edited by Daniil; Feb 01, 2011 at 4:45 PM. Reason: [CLOSED]
  2. #2
    Hi,

    1. Move Tooltip outside ViewPort
    2. Add dot to the start Delegate value
    Delegate=".x-grid3-cell"
  3. #3
    Hi Vladimir,

    now the cell tip appear, but only for non-locked columns.

    In the following example the cell tip doesn't appear for ExpenseName column:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 id="Head1" runat="server">
        <ext:ResourcePlaceHolder ID="MainResourcePlaceHolder" runat="server" />
        <script type="text/javascript">
            var showTip = function () {
                var rowIndex = EXDetailGridPanel.view.findRowIndex(this.triggerElement),
                    cellIndex = EXDetailGridPanel.view.findCellIndex(this.triggerElement),
                    record = dsExpensePivot.getAt(rowIndex),
                    fieldName = EXDetailGridPanel.getColumnModel().getDataIndex(cellIndex),
                    data = record.get(fieldName);
                this.body.dom.innerHTML = data;
            };
        </script>
        </head>
        <body>
            <ext:ResourceManager ID="MainScriptManager" runat="server" RemoveViewState="true"/>
     
            <ext:Viewport ID="MainViewPort" runat="server" HideBorders="true" Layout="border">
                <Items>
                    <ext:Panel
                        ID="EXDetailCardPanel" 
                        Region="Center"
                        runat="server" 
                        Layout="Fit"
                        Frame="false"
                        Border="false">
                        <Items>
     
                            <ext:GridPanel
                                ID="EXDetailGridPanel"
                                runat="server" 
                                Header="false"
                                Border="false"
                                TrackMouseOver="true">
                                <Store>
                                    <ext:Store ID="dsExpensePivot" runat="server" AutoLoad="true">
                                        <Proxy>
                                            <ext:HttpProxy Url="/EasyTime/Expense/GetExpenseSheetPivot/" />
                                        </Proxy>
                                        <Reader>
                                            <ext:JsonReader IDProperty="ExpenseId" Root="data">
                                                <Fields>
                                                    <ext:RecordField Name="ExpenseId" SortDir="ASC" />
                                                    <ext:RecordField Name="ExpenseName" />
                                                </Fields>
                                            </ext:JsonReader>
                                        </Reader>
     
                                        <BaseParams>
                                            <ext:Parameter Name="expenseSheetId" Value="64" Mode="Value" />
                                        </BaseParams>
                                        <SortInfo Field="ExpenseId" Direction="ASC" />
                                    </ext:Store>
                                </Store>
     
                                <ColumnModel ID="DayGridColumnModel" runat="server">
                                    <Columns>
                                        <ext:Column ColumnID="ExpenseName" DataIndex="ExpenseName" Header="Descrizione Spesa" Width="150" Align="Left" Locked="true"/>
                                        <ext:Column ColumnID="ExpenseId" DataIndex="ExpenseId" Header="Id Spesa" Width="50" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel SingleSelect="true" runat="server" />
                                </SelectionModel>
                                <View>
                                    <ext:LockingGridView ID="EXDetailGridView" runat="server" SyncHeights="true" />
                                </View>
                            </ext:GridPanel>
     
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="TEDLE_South"
                        runat="server"
                        Height="200"
                        Region="South" Collapsed="true" CollapseMode="Mini"
                        BodyBorder="false"
                        Border="false"
                        Title="&nbsp;"
                        Icon="ApplicationViewList"
                        Layout="Fit">
                    </ext:Panel>
                </Items>
            </ext:Viewport>
            <ext:ToolTip
                ID="RowTip"
                runat="server"
                Target="={EXDetailGridPanel.getView().mainBody}"
                Delegate=".x-grid3-cell"
                TrackMouse="true">
                <Listeners>
                    <Show Fn="showTip" />
                </Listeners>
            </ext:ToolTip>
        </body>
    </html>
    Bye,
    Stefano
  4. #4
    Hi,

    When it deals with LockingGridView
    GridPanel1.getView().mainBody
    presents only non-locked area.

    Locked area is presented by
    GridPanel1.getView().lockedBody
    I can suggest you to use additional ToolTip for locked ared.

    Example
    <ext:ToolTip 
        runat="server" 
        Target="={EXDetailGridPanel.getView().lockedBody}"
        Delegate=".x-grid3-cell" 
        TrackMouse="true">
        <Listeners>
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>
    Last edited by Daniil; Feb 23, 2011 at 1:51 PM.
  5. #5
    OK Daniil, thanks.

    Stefano

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: 4
    Last Post: Jul 10, 2012, 5:35 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. 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

Tags for this Thread

Posting Permissions