[CLOSED] ToolTip not working with Viewport

  1. #1

    [CLOSED] ToolTip not working with Viewport

    Hi,

    I have a tooltip on Gridpanel.
    It doesn't work inside a viewport.
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestToolTip.aspx.vb" Inherits="CUST.Roche.Import.View.TestToolTip" %>
    <%@ 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 runat="server">
        <script type="text/javascript">
          function showAddress(contactId, value) {
         
          if (value == 'Address') {
           url = "../_ContactAndAddress/EventTexts.aspx";
           window.open(url);
          }
          if (value == 'Copy') {
           url = "../_ContactAndAddress/ContactControl.aspx?Usage=Internal&ContactId=" + contactId;
           window.open(url);
          }
         }
    
         var showToolTip = function (toolTip, grid) {
    
          var cellIndex = grid.view.findCellIndex(toolTip.triggerElement);
          var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
          if (fieldName == "EventText") {
           var rowIndex = grid.view.findRowIndex(toolTip.triggerElement);
           var record = StoreEventList.getAt(rowIndex);
           if (typeof (record) != 'undefined' && record.get('Error') != 'ERROR') {
            // toolTip.update(data);
            url = "../_ContactAndAddress/EventTexts.aspx?Usage=Internal";
            toolTip.load({ url: url, mode: 'iframe' });
           } else {
            toolTip.hide();
           }
          }
          else {
           toolTip.hide();
          }
          return false;
         };
       </script>
        <title></title>
    </head>
    <body>
     <form id="form1" runat="server">
     <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
     <ext:Store ID="StoreEventList" runat="server" IgnoreExtraFields="false">
      <Reader>
       <ext:JsonReader>
        <Fields>
         <ext:RecordField Name="Id" />
         <ext:RecordField Name="EventCauserInt" Type="String" />
         <ext:RecordField Name="EventCauserExt" Type="String" />
         <ext:RecordField Name="EventOwner" Type="String" />
         <ext:RecordField Name="EventState" Type="String" />
         <ext:RecordField Name="EventType" Type="String" />
         <ext:RecordField Name="EventText" />
        </Fields>
       </ext:JsonReader>
      </Reader>
     </ext:Store>
     <ext:Viewport ID="Viewport1" runat="server" Layout="fit">
      <Items>
       <ext:Panel ID="PanelMaster" runat="server" Layout="border" Border="true" Region="Center">
        <Items>
         <ext:GridPanel ID="GridPanel1" runat="server" StoreID="StoreEventList" TrackMouseOver="true"
          Title="Expander Rows with control" Collapsible="false" AnimCollapse="true" Width="600"
          Height="450" Header="false" colu>
          <ColumnModel ID="ColumnModel1" runat="server">
           <Columns>
            <ext:Column ColumnID="Id" Header="Id" Hidden="true" Width="40" DataIndex="Id" />
            <ext:Column ColumnID="EventCauserExt" Header="EventCauserExt" Width="40" DataIndex="EventCauserExt" />
            <ext:Column ColumnID="EventCauserInt" Header="EventCauserInt" Width="20" DataIndex="EventCauserInt">
            </ext:Column>
            <ext:Column ColumnID="EventOwner" Header="EventOwner" Width="20" DataIndex="EventOwner">
            </ext:Column>
            <ext:Column ColumnID="EventState" Header="EventState" Width="20" DataIndex="EventState">
            </ext:Column>
            <ext:Column ColumnID="EventType" Header="EventType" Width="20" DataIndex="EventType">
            </ext:Column>
            <ext:Column ColumnID="EventText" Header="EventTexts" Width="20" DataIndex="EventText">
            </ext:Column>
            <ext:CommandColumn Width="60" DataIndex="EventText">
             <Commands>
              <ext:GridCommand Icon="PageWhite" CommandName="Address">
              </ext:GridCommand>
             </Commands>
            </ext:CommandColumn>
           </Columns>
          </ColumnModel>
          <Listeners>
           <Command Handler="showAddress(record.dataId, command);" />
          </Listeners>
          <View>
           <ext:GridView ID="GridView1" runat="server" ForceFit="true" />
          </View>
          <SelectionModel>
           <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
          </SelectionModel>
          <Plugins>
           <ext:RowExpander ID="RowExpander" runat="server">
            <Component>
             <ext:FormPanel ID="RowEditor1" runat="server" Padding="6" Height="300" Border="false"
              Layout="form" ForceLayout="true" ButtonAlign="Right" Cls="white-footer">
              <Items>
               <ext:CompositeField ID="CompositeField1" runat="server">
                <Items>
                 <ext:TextField ID="txtExtEventCauserName" runat="server" DataIndex="EventCauserExt"
                  FieldLabel="ExtEventCauser" Width="150" />
                 <ext:Button runat="server" ID="ExtEventCauser" Icon="UserEarth" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSearchExternelContact %>">
                  <DirectEvents>
                   <Click OnEvent="cmdSearchExtUser">
                    <ext:EventMask ShowMask="true" />
                   </Click>
                  </DirectEvents>
                 </ext:Button>
                </Items>
               </ext:CompositeField>
               <ext:CompositeField ID="CompositeField2" runat="server">
                <Items>
                 <ext:TextField ID="txtIntEventCauserName" runat="server" DataIndex="EventCauserInt"
                  FieldLabel="IntEventCauser" Width="150" ReadOnly="false" />
                 <ext:Button runat="server" ID="IntEventCauser" Icon="User" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSearchInternalContact %>">
                  <DirectEvents>
                   <Click OnEvent="cmdSearchUser">
                    <ext:EventMask ShowMask="true" />
                   </Click>
                  </DirectEvents>
                 </ext:Button>
                </Items>
               </ext:CompositeField>
               <ext:CompositeField ID="CompositeField3" runat="server">
                <Items>
                 <ext:TextField ID="txtEventOwner" runat="server" DataIndex="EventOwner" FieldLabel="EventOwner"
                  Width="150" />
                 <ext:Button runat="server" ID="ButtonEventOwner" Icon="User" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSearchExternelContact %>">
                  <DirectEvents>
                   <Click OnEvent="cmdSearchUser">
                    <ext:EventMask ShowMask="true" />
                   </Click>
                  </DirectEvents>
                 </ext:Button>
                </Items>
               </ext:CompositeField>
               <ext:ComboBox runat="server" ID="comEventType" DisplayField="Key" ValueField="Value"
                DataIndex="EventType" FieldLabel="<%$ Resources:CUSTRocheImport, EventType %>"
                ItemCls="rocheFieldLabelText" Cls="rocheTextField">
                <Store>
                 <ext:Store ID="StoreEventType" runat="server">
                  <Reader>
                   <ext:JsonReader>
                    <Fields>
                     <ext:RecordField Name="Value" />
                     <ext:RecordField Name="Key" />
                    </Fields>
                   </ext:JsonReader>
                  </Reader>
                 </ext:Store>
                </Store>
               </ext:ComboBox>
               <ext:ComboBox runat="server" ID="comEventState" DisplayField="Key" ValueField="Value"
                DataIndex="EventState" FieldLabel="<%$ Resources:CUSTRocheImport, EventState %>"
                ItemCls="rocheFieldLabelText" Cls="rocheTextField">
                <Store>
                 <ext:Store ID="Store2" runat="server">
                  <Reader>
                   <ext:JsonReader>
                    <Fields>
                     <ext:RecordField Name="Value" />
                     <ext:RecordField Name="Key" />
                    </Fields>
                   </ext:JsonReader>
                  </Reader>
                 </ext:Store>
                </Store>
               </ext:ComboBox>
               <ext:TabPanel ID="TabPanelEventTexts" runat="server" AutoWidth="true" Height="350"
                EnableTabScroll="true">
                <Items>
                 <ext:Panel ID="Panel2" runat="server" Title="Text1" Padding="5">
                  <Items>
                   <ext:TextArea runat="server" ID="textArea1" DataIndex="EventTexts" ItemCls="rocheFieldLabelText"
                    Cls="rocheTextField" Height="60" AutoWidth="true">
                   </ext:TextArea>
                  </Items>
                 </ext:Panel>
                </Items>
                <TopBar>
                 <ext:Toolbar ID="Toolbar2" Flat="false" runat="server">
                  <Items>
                   <ext:Button ID="Button5" runat="server" Text="Add Panel" Icon="Add" OnDirectClick="AddTextArea">
                   </ext:Button>
                  </Items>
                 </ext:Toolbar>
                </TopBar>
               </ext:TabPanel>
               <ext:Hidden ID="Hidden1" runat="server" Text="1" />
               <ext:Panel ID="PanelTexts" runat="server" Title="Accordion" Height="185" Width="350"
                Layout="Accordion" AutoScroll="true">
                <Items>
                 <ext:Panel ID="Panel1" runat="server" Title="Panel 1" Html="Panel 1" Padding="5"
                  Border="false" />
                </Items>
               </ext:Panel>
              </Items>
              <Buttons>
               <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk" ToolTip="<%$ Resources:CUSTRocheImport, TooltipSaveOrderEvent %>">
                <Listeners>
                 <Click Handler="#{RowEditor1}.getForm().updateRecord(#{RowEditor1}.record);
                                             #{RowExpander}.collapseRow(#{StoreEventList}.indexOf(#{RowEditor1}.record));" />
                </Listeners>
                <DirectEvents>
                 <Click OnEvent="cmdSave">
                  <ext:EventMask ShowMask="true" />
                 </Click>
                </DirectEvents>
               </ext:Button>
               <ext:Button ID="Button2" runat="server" Text="Cancel" Icon="Decline" ToolTip="<%$ Resources:CUSTRocheImport, TooltipCancelEvent %>">
                <Listeners>
                 <Click Handler="#{RowExpander}.collapseRow(#{Store1}.indexOf(#{RowEditor1}.record));" />
                </Listeners>
               </ext:Button>
              </Buttons>
             </ext:FormPanel>
            </Component>
            <Listeners>
             <Expand Handler="#{RowEditor1}.record = record; #{RowEditor1}.getForm().loadRecord(record);" />
            </Listeners>
           </ext:RowExpander>
          </Plugins>
         </ext:GridPanel>
         <ext:ToolTip ID="RowTip" runat="server" Target="={GridPanel1.getView().mainBody}"
          MaxWidth="1000" MaxHeight="1000" Delegate=".x-grid3-cell" TrackMouse="true" ShowDelay="10"
          Anchor="bottom" NoCache="true" Closable="true" Icon="PageWhite">
          <Listeners>
           <Show Handler="showToolTip(#{RowTip}, #{GridPanel1});" />
          </Listeners>
         </ext:ToolTip>
        </Items>
       </ext:Panel>
      </Items>
     </ext:Viewport>
     </form>
    </body>
    </html>
    Thank you for your help
    Elke
    Last edited by Daniil; Sep 12, 2012 at 5:56 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Unfortunately, a sample causes
    Parser Error Message: Could not load type 'CUST.Roche.Import.View.TestToolTip'.
    Please look at the 7. B) here:
    Forum Guidelines For Posting New Topics
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Unfortunately, a sample causes
    Parser Error Message: Could not load type 'CUST.Roche.Import.View.TestToolTip'.
    Please look at the 7. B) here:
    Forum Guidelines For Posting New Topics
    of course, if you cant halp me without an whole working exsample then I can send you the codebihind to.

    Imports CUST.Roche.Import.View.CUST.Roche.Service
    Imports Ext.Net
    Imports CUST.Roche.Shared.Constants
    Public Class TestToolTip
     Inherits System.Web.UI.Page
     Private ReadOnly Property OrderData As List(Of RocheEventDTO)
      'Public Property EventType As String
      'Public Property EventState As String
      'Public Property EventDate As String
      'Public Property EventText As List(Of String)
      'Public Property EventCauserInt As String
      'Public Property EventCauserExt As String
      'Public Property EventOwner As String
      'Public Property EventTexts As List(Of OrderEventTextDTO)
      Get
       Dim l As New List(Of RocheEventDTO)
       Dim a As New RocheEventDTO
       a.EventType = "Wartung"
       a.EventState = "nachError"
       a.EventDate = DateTime.Now.ToString
       a.EventCauserInt = "Peter"
       a.EventCauserExt = "Dani"
       a.EventOwner = "Elke"
       a.EventText = "aaaaaaaaa;bbbbbbbbbbbb"
       l.Add(a)
       Return l
      End Get
     End Property
     
     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      If Not IsPostBack And Not ExtNet.IsAjaxRequest Then
       Me.StoreEventList.DataSource = OrderData
       Me.StoreEventList.DataBind()
       BindData()
      End If
     End Sub
     Private Sub BindData()
      Dim eventType = CodeValuesService.Instance.GetCodeDictionaryofDomain(DomainNames.OrderEventType)
      Dim eventTypeStore = Me.comEventType.GetStore()
      eventTypeStore.DataSource = eventType
      eventTypeStore.DataBind()
      Dim eventState = CodeValuesService.Instance.GetCodeDictionaryofDomain(DomainNames.OrderEventState)
      Dim eventStateStore = Me.comEventState.GetStore()
      eventStateStore.DataSource = eventState
      eventStateStore.DataBind()
     End Sub
     <DirectMethod()>
     Public Sub cmdSearchExtUser(ByVal sender As Object, ByVal e As DirectEventArgs)
      ShowContact("External")
     End Sub
     <DirectMethod()>
     Public Sub cmdSearchUser(ByVal sender As Object, ByVal e As DirectEventArgs)
      ShowContact("Internal")
     End Sub
     Private Sub ShowContact(usage As String)
      Dim contactWindow As New Ext.Net.Window
      With contactWindow
       .ID = "Contact"
       .AutoLoad.Url = String.Format("../_ContactAndAddress/ContactControl.aspx?Usage={0}", usage)
       .AutoLoad.Mode = LoadMode.IFrame
       .Width = Unit.Pixel(700)
       .Height = Unit.Pixel(600)
       .Render(Me.Form)
       .Hidden = False
      End With
     End Sub
     <DirectMethod()>
     Public Sub cmdSave(ByVal sender As Object, ByVal e As DirectEventArgs)
      Dim dto As New RocheEventDTO
      dto.EventCauserExt = Me.txtExtEventCauserName.Text
      Dim ltexts As New List(Of OrderEventTextDTO)
      GetValues(Me.TabPanelEventTexts.Controls, ltexts)
      dto.EventTexts = ltexts
     End Sub
     Private Sub GetValues(ByVal controls As ControlCollection, ByVal dto As List(Of OrderEventTextDTO))
      Dim textArea As Ext.Net.TextArea
      Dim panel As Ext.Net.Panel
      For Each c In controls
       If Type.Equals(c.GetType(), GetType(Ext.Net.TextArea)) Then
        Dim control As Ext.Net.XControl = CType(c, XControl)
        textArea = CType(control, Ext.Net.TextArea)
        Dim text As New OrderEventTextDTO
        text.Text = textArea.Text
        'Dim d As DateTimeOffset = New DateTimeOffset(DateTime.Now)
        'text.TextDate = d ' New DateTimeOffset(DateTime.Now)
        dto.Add(text)
       ElseIf Type.Equals(c.GetType(), GetType(Ext.Net.Panel)) Then
        Dim control As Ext.Net.XControl = CType(c, XControl)
        panel = CType(control, Ext.Net.Panel)
        GetValues(panel.Controls, dto)
       End If
    
      Next
     End Sub
     Public Sub AddTextArea(ByVal sender As Object, ByVal e As DirectEventArgs)
      Dim index = GetIndex()
      Dim tab As New Ext.Net.Panel
      tab.ID = "Text" + index.ToString()
      tab.Title = "Text" + index.ToString()
      tab.Padding = 5
      tab.Border = False
      Dim ta As New TextArea
      With ta
       .ID = "textArea" + index.ToString()
       .DataIndex = "EventText"
       .AutoWidth = True
      End With
      tab.Items.Add(ta)
      'geht nicht
      'Me.Form.Controls.Add(ta)
      tab.AddTo(Me.TabPanelEventTexts)
      Me.TabPanelEventTexts.SetActiveTab(index)
     End Sub
     Private Function GetIndex() As Integer
      Dim index = Convert.ToInt32(Me.Hidden1.Text) + 1
      Me.Hidden1.Text = index.ToString()
      Return index
     End Function
    End Class
  4. #4
    Quote Originally Posted by sisa View Post
    of course, if you cant halp me without an whole working exsample then I can send you the codebihind to.
    Well, just a sample which we can run without any changes always gives you the best chance to get a solution as faster as we can.

    Unfortunately, a sample is still not runnable.

    Please try to move the ToolTip outside the Viewport.
  5. #5
    Quote Originally Posted by Daniil View Post
    Well, just a sample which we can run without any changes always gives you the best chance to get a solution as faster as we can.

    Unfortunately, a sample is still not runnable.

    Please try to move the ToolTip outside the Viewport.

    Yes I have tried it. But it doesn't work.
  6. #6
    Quote Originally Posted by sisa View Post
    Yes I have tried it. But it doesn't work.

    <%@ Page Language= "VB"%>
    <%@ 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">
    <script runat="server">
     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      
    
      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"}
           }
      Store1.DataBind()
     
     End Sub
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>GridPanel Cell with ToolTip - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
        <script type="text/javascript">
         var template = '<span style="color:{0};">{1}</span>';
         var change = function (value) {
          return String.format(template, (value > 0) ? "green" : "red", value);
         };
         var pctChange = function (value) {
          return String.format(template, (value > 0) ? "green" : "red", value + "%");
         };
         var showToolTip = function (toolTip, grid) {
         // alert("hier");
          var cellIndex = grid.view.findCellIndex(toolTip.triggerElement);
          var fieldName = grid.getColumnModel().getDataIndex(cellIndex);
          if (fieldName == "company") {
           var rowIndex = grid.view.findRowIndex(toolTip.triggerElement);
           var record = StoreEventList.getAt(rowIndex);
           if (typeof (record) != 'undefined' && record.get('Error') != 'ERROR') {
            // toolTip.update(data);
            url = "http://www.google.ch/";
            toolTip.load({ url: url, mode: 'iframe' });
           } else {
            toolTip.hide();
           }
          }
          else {
           toolTip.hide();
          }
          return false;
         };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
             <ext:Viewport ID="Viewport1" runat="server" Layout="fit">
      <Items>
       <ext:Panel ID="PanelMaster" runat="server" Layout="border" Border="true" Region="Center">
        <Items>
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                StripeRows="true"
                Title="Array Grid" 
                TrackMouseOver="true"
                Width="600" 
                Height="350"
                AutoExpandColumn="Company">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                        <ext:Column Header="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
            </ext:GridPanel>     
            
          <ext:ToolTip ID="RowTip" runat="server" Target="={GridPanel1.getView().mainBody}"
          MaxWidth="1000" MaxHeight="1000" Delegate=".x-grid3-cell" TrackMouse="true" ShowDelay="10"
          Anchor="bottom" NoCache="true" Closable="true" Icon="PageWhite">
          <Listeners>
                    <Show Handler="showToolTip(#{RowTip}, #{GridPanel1});" />
                </Listeners>
            </ext:ToolTip> 
                </Items>
       </ext:Panel>
      </Items>
     </ext:Viewport>    
        </form>
        
    </body>
    </html>


    an running simple Example the Tooltip is under the first colum.
    Without viewport it works but when I add the viewport the listener is not working.

    Hope the helps.
  7. #7
    Thank you for the sample.

    I think you should set up
    Region="Center"
    for the GridPanel.

    BorderLayout requires a Center region.

    ToolTip must be outside the Viewport or you can place it into the GridPanel Bin collection.
  8. #8
    Quote Originally Posted by Daniil View Post
    Thank you for the sample.

    I think you should set up
    Region="Center"
    for the GridPanel.

    BorderLayout requires a Center region.

    ToolTip must be outside the Viewport or you can place it into the GridPanel Bin collection.

    Yes now the tooltip works. But to put it outside the viewport gives me problems because the viewport is in masterpage for a cuple of pages.
    what did you mean with GridPanel Bin collection
  9. #9
    Quote Originally Posted by sisa View Post
    Yes now the tooltip works. But to put it outside the viewport gives me problems because the viewport is in masterpage for a cuple of pages.
    what did you mean with GridPanel Bin collection
    Yes, the Bin feature is exactly for this case. Here are more details about this feature.
    http://forums.ext.net/showthread.php...ll=1#post57259

    Just place the ToolTip into the GridPanel Bin collection.

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] Window in viewport not working
    By RCM in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 13, 2012, 6:08 PM
  3. Replies: 3
    Last Post: Feb 21, 2012, 7:46 AM
  4. [CLOSED] Tooltip + Grid + ViewPort
    By majunior in forum 1.x Legacy Premium Help
    Replies: 24
    Last Post: Jan 28, 2012, 10:15 AM
  5. [CLOSED] Tooltip and KeyMap is not working on htmlEditor
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 25, 2010, 8:20 AM

Posting Permissions