What's New?

[CLOSED] GridPanel hide dragdrop tooltip 2.0

  1. #1
    Jan 07, 2014, 4:31 PM

    [CLOSED] GridPanel hide dragdrop tooltip 2.0

    How can I prevent the tooltip from showing when drag-dropping using cell selection model?
    Funny behavior when clicking from Cell to Cell (IE11)


    http://screencast-o-matic.com/watch/c2VibmnfO1
    Last edited by Daniil; Jan 14, 2014 at 7:39 AM. Reason: [CLOSED]
  2. #2
    Jan 08, 2014, 5:40 AM
    Hi @rthiney,

    I cannot reproduce. Please provide a sample to reproduce and specify the exact version of Ext.NET that you are using.
  3. #3
    Jan 08, 2014, 5:56 AM
    Quote Originally Posted by Daniil View Post
    Hi @rthiney,

    I cannot reproduce. Please provide a sample to reproduce and specify the exact version of Ext.NET that you are using.
    FYI I can't reproduce in Chrome either, but I see it happening in IE 11, and 9 if that helps...

    There is no "short-circuit" to the grag/drop tooltip?

    Vresion:
    Click image for larger version.  Name: Capture.PNG  Views: 12  Size: 11.4 KB  ID: 7453



    Here is the gridpanel markup...

    <ext:GridPanel runat="server" ID="grid" Flex="1" Cls="without-dirty" AnchorVertical="100%" IDMode="Explicit" Border="false" ColumnLines="true" SortableColumns="false" EnableColumnHide="false" EnableColumnMove="false" EnableColumnResize="false" EmptyText="No Data.">

				<TopBar>
					<ext:Toolbar ID="Toolbar1" runat="server" ClassicButtonStyle="true">
						<Items>
							<ext:ComboBox runat="server" ID="cmboQuarters" se DisplayField="Key" ValueField="Value" FieldLabel="Reporting" LabelAlign="Right" LabelWidth="50" Editable="false" QueryMode="Local" Width="135">
								<Store>
									<ext:Store runat="server" ID="storeQuarter">
										<Model>
											<ext:Model runat="server" IDProperty="Value">
												<Fields>
													<ext:ModelField Name="Key" Type="String" />
													<ext:ModelField Name="Value" Type="Int" />
												</Fields>
											</ext:Model>
										</Model>
										<Sorters>
											<ext:DataSorter Direction="DESC" Property="Value" />
										</Sorters>
									</ext:Store>
								</Store>
								<ListConfig MinWidth="60">
									<Tpl ID="Tpl2" runat="server">
										<Html>
											<tpl for="."> 
						                                        <div class="x-boundlist-item">
                                                                        <span title= {[PerformanceMetrics.parseDate(values.Value)]} style="font-size:12px;color:#012e4b">{Key}</span> 
                                                                         
						                                        </div> 
					                                        </tpl>
										</Html>
									</Tpl>
								</ListConfig>
								<Listeners>
								</Listeners>
								<DirectEvents>
									<Select OnEvent="GetGridData">
										<EventMask Msg="Fetching data..." MinDelay="0" ShowMask="true" Target="CustomTarget" CustomTarget="#{grid}" />
										<ExtraParams>
											<ext:Parameter Name="dateInfo" Value="this.value" Mode="Raw" />
										</ExtraParams>
									</Select>
								</DirectEvents>
							</ext:ComboBox>


							<ext:ComboBox runat="server" ID="cmboCurrency" DisplayField="Currency" ValueField="CurrencyPair" FieldLabel="Currency" LabelAlign="Right" LabelWidth="50" Width="140" Editable="false" QueryMode="Local">
								<Store>
									<ext:Store runat="server" ID="storeCurrency">
										<Model>
											<ext:Model runat="server" IDProperty="CurrencyPair">
												<Fields>
													<ext:ModelField Name="Currency" Type="String" />
													<ext:ModelField Name="CurrencyPair" Type="String" />
												</Fields>
											</ext:Model>
										</Model>
										<Sorters>
											<ext:DataSorter Direction="ASC" Property="Currency" />
										</Sorters>
									</ext:Store>
								</Store>
								<DirectEvents>
									<Select OnEvent="UpdateCurrency" Before="var filthy = PerformanceMetrics.isGridDirty(); 
										if (filthy) { PerformanceMetrics.handleGridSaveConfirmation(' changing currency.'); #{cmboCurrency}.setValue(this.oldItem.value); return !filthy;}">
										<ExtraParams>
											<ext:Parameter Name="curr" Value="this.value" Mode="Raw" />
											<ext:Parameter Name="dateInfo" Value="#{cmboQuarters}.getValue()" Mode="Raw" />
										</ExtraParams>
									</Select>
								</DirectEvents>
								<Listeners>
									<BeforeSelect Handler="this.oldItem = {text: this.getRawValue(), value: this.getValue() }" />
								</Listeners>
							</ext:ComboBox>


						</Items>
					</ext:Toolbar>
				</TopBar>
				<Store>
					<ext:Store runat="server" ID="store" GroupField="GroupTitle">
						<Model>
							<ext:Model ID="Model1" runat="server">
								<Fields>
									<ext:ModelField Name="PortfolioPerformanceTitleId" Type="int" />
									<ext:ModelField Name="PerformanceTitleId" Type="int" />
									<ext:ModelField Name="Title" Type="String" />
									<ext:ModelField Name="GroupTitle" Type="String" />
									<ext:ModelField Name="UnitOfMeasurement" Type="String" />
									<ext:ModelField Name="AsterixText" Type="String" />
									<ext:ModelField Name="AsterixCount" Type="String" />
									<ext:ModelField Name="FormatString" Type="String" />
									<ext:ModelField Name="InReport" Type="Boolean" />
									<ext:ModelField Name="IsCalc" Type="Boolean" />
									<ext:ModelField Name="IsDefault" Type="Boolean" />
									<ext:ModelField Name="TMEStart" Type="String" />
									<ext:ModelField Name="TMEStartDataId" Type="int" />
									<ext:ModelField Name="TMEEnd" Type="String" />
									<ext:ModelField Name="TMEEndDataId" Type="int" />
									<ext:ModelField Name="YTDStart" Type="String" />
									<ext:ModelField Name="YTDStartDataId" Type="int" />
									<ext:ModelField Name="YTDEnd" Type="String" />
									<ext:ModelField Name="YTDEndDataId" Type="int" />
									<ext:ModelField Name="FYEStart" Type="String" />
									<ext:ModelField Name="FYEStartDataId" Type="int" />
									<ext:ModelField Name="FYEEnd" Type="String" />
									<ext:ModelField Name="FYEEndDataId" Type="int" />
									<ext:ModelField Name="SortBy" Type="int" />
									<ext:ModelField Name="GroupSortBy" Type="int" />
									<ext:ModelField Name="TMEStartString" Type="String" />
									<ext:ModelField Name="TMEEndString" Type="String" />
									<ext:ModelField Name="YTDStartString" Type="String" />
									<ext:ModelField Name="YTDEndString" Type="String" />
									<ext:ModelField Name="FYEStartString" Type="String" />
									<ext:ModelField Name="FYEEndString" Type="String" />


									<ext:ModelField Name="TMEStartShow" Type="Boolean" />
									<ext:ModelField Name="TMEEndShow" Type="Boolean" />
									<ext:ModelField Name="YTDStartShow" Type="Boolean" />
									<ext:ModelField Name="YTDEndShow" Type="Boolean" />
									<ext:ModelField Name="FYEStartShow" Type="Boolean" />
									<ext:ModelField Name="FYEEndShow" Type="Boolean" />


								</Fields>
							</ext:Model>
						</Model>
						<Sorters>
							<ext:DataSorter Property="SortBy" Direction="ASC" />
						</Sorters>
						<Listeners>
							<Load Handler="PerformanceMetrics.groupIt()" Delay="150" />
						</Listeners>
					</ext:Store>
				</Store>
				<ColumnModel ID="colModel" runat="server">
					<Columns>


						<ext:Column runat="server" DataIndex="Title" ColumnID="Title" Flex="1" Align="Left" Hideable="false" Border="false">
							<HeaderItems>
								<ext:Label runat="server" Text="Metric" CtCls="ux-header-label" />
							</HeaderItems>
							<Renderer Fn="PerformanceMetrics.fixTitle" />
							<Editor>
								<ext:TextField runat="server" SelectOnFocus="true" MaxLength="75" EnforceMaxLength="true" />
							</Editor>
						</ext:Column>




						<ext:Column runat="server" DataIndex="UnitOfMeasurement" ColumnID="UnitOfMeasurement" Width="75" Align="Left" Hideable="false" Border="false">
							<Editor>
								<ext:TextField runat="server" SelectOnFocus="true" MaxLength="50" EnforceMaxLength="true" />
							</Editor>
							<HeaderItems>
								<ext:Label runat="server" Text="Unit" CtCls="ux-header-label" />
							</HeaderItems>
						</ext:Column>




						<ext:Column runat="server" Text="3 Months Ended" ID="TMEGroup" Align="Right">
							<Columns>
								<ext:Column runat="server" DataIndex="TMEStart" Text="NA" ColumnID="TMEStart" Width="80" Align="Right" ID="TMEStart">
									<Renderer Fn="PerformanceMetrics.formatDollar" />
									<Editor>
										<ext:TextField runat="server" SelectOnFocus="true" MaxLength="15" EnforceMaxLength="true" />
									</Editor>
								</ext:Column>
								<ext:Column runat="server" DataIndex="TMEEnd" Text="NA" ColumnID="TMEEnd" Width="80" Align="Right" ID="TMEEnd">
									<Renderer Fn="PerformanceMetrics.formatDollar" />
									<Editor>
										<ext:TextField runat="server" SelectOnFocus="true" MaxLength="15" EnforceMaxLength="true" />
									</Editor>
								</ext:Column>
							</Columns>
						</ext:Column>


						<ext:Column runat="server" Text="6 - 9 Months Ended" ID="SixNineColumn">
							<Columns>
								<ext:Column runat="server" DataIndex="YTDStart" Text="NA" ColumnID="YTDStart" Width="80" Align="Right" ID="YTDStart">
									<Renderer Fn="PerformanceMetrics.formatDollar" />
									<Editor>
										<ext:TextField runat="server" SelectOnFocus="true" MaxLength="15" EnforceMaxLength="true" />
									</Editor>
								</ext:Column>
								<ext:Column runat="server" DataIndex="YTDEnd" Text="NA" ColumnID="YTDEnd" Width="80" Align="Right" ID="YTDEnd">
									<Renderer Fn="PerformanceMetrics.formatDollar" />
									<Editor>
										<ext:TextField runat="server" SelectOnFocus="true" MaxLength="15" EnforceMaxLength="true" />
									</Editor>
								</ext:Column>


							</Columns>
						</ext:Column>




						<ext:Column runat="server" Text="Fiscal Year End" ID="Column1">
							<Columns>
								<ext:Column runat="server" DataIndex="FYEStart" Text="NA" ColumnID="FYEStart" Width="80" Align="Right" ID="FYEStart">
									<Renderer Fn="PerformanceMetrics.formatDollar" />
									<Editor>
										<ext:TextField runat="server" SelectOnFocus="true" MaxLength="15" EnforceMaxLength="true" />
									</Editor>
								</ext:Column>
								<ext:Column runat="server" DataIndex="FYEEnd" Text="NA" ColumnID="FYEEnd" Width="80" Align="Right" ID="FYEEnd">
									<Renderer Fn="PerformanceMetrics.formatDollar" />
									<Editor>
										<ext:TextField runat="server" SelectOnFocus="true" MaxLength="15" EnforceMaxLength="true" />
									</Editor>
								</ext:Column>
							</Columns>
						</ext:Column>






						<ext:CommandColumn runat="server" OverOnly="true" Width="75" Align="Center" Border="false">
							<HeaderItems>
								<ext:Label runat="server" Text="Actions" CtCls="ux-header-label" />
							</HeaderItems>
							<Commands>
								<ext:GridCommand Icon="Bin" CommandName="Delete">
									<ToolTip Text="Remove this metric.  " />
								</ext:GridCommand>
								<ext:GridCommand Icon="Pencil" CommandName="Edit">
									<ToolTip Text="Edit footnote." />
								</ext:GridCommand>
								<ext:GridCommand Icon="CalculatorEdit" CommandName="Adjust">
									<ToolTip Text="Add adjustment." />
								</ext:GridCommand>
							</Commands>
							<GroupCommands>
								<ext:CommandFill />
								<ext:GridCommand Icon="BulletArrowDown" CommandName="SelectGroup" StandOut="false">
								</ext:GridCommand>
								<ext:CommandSpacer Width="67" />
							</GroupCommands>
							<Listeners>
								<Command Fn="PerformanceMetrics.handleGridCommand" />
								<GroupCommand Fn="PerformanceMetrics.handleGroupCommand" />
							</Listeners>
							<PrepareToolbar Fn="PerformanceMetrics.prepToolBar" />
							<PrepareGroupToolbar Fn="PerformanceMetrics.prepGroupToolbar" />
						</ext:CommandColumn>


						<ext:CheckColumn runat="server" ID="chkEdit" DataIndex="InReport" ColumnID="InReport" Width="50" Align="Center" Editable="true" Border="false">
							<HeaderItems>
								<ext:Label runat="server" Text="Display" CtCls="ux-header-label" />
							</HeaderItems>
							<Renderer Fn="PerformanceMetrics.checkColumnRenderer"></Renderer> 
						</ext:CheckColumn>
					</Columns>
				</ColumnModel>


				<SelectionModel>
					<ext:RowSelectionModel runat="server" EnableKeyNav="true" />
				</SelectionModel>


				<Plugins>
					<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1"> 
						<Listeners>
							<Edit Fn="PerformanceMetrics.edit" />
							<BeforeEdit Fn="PerformanceMetrics.beforeGridEdit" />
						</Listeners>
					</ext:CellEditing>
				</Plugins>


				<Listeners>
					<AfterRender Handler="PerformanceMetrics.saveContents(); return true;" />
				</Listeners>


				<Features>
					<ext:Grouping
						ID="Grouping1"
						runat="server"
						HideGroupedHeader="true" ShowGroupsText="false"
						StartCollapsed="false" EnableGroupingMenu="false"
						GroupHeaderTplString='{[ PerformanceMetrics.getGroupingCurrency(values.name,#{hidCurrency}.getValue())]}' />


				</Features>


				<View>
					<ext:GridView ID="GridView1" runat="server" AutoScroll="true" PreserveScrollOnRefresh="true">
						<Plugins>
							<ext:GridDragDrop ID="GridDragDrop1" runat="server"  />
						</Plugins>
						<Listeners>
							<GroupDblClick Fn="PerformanceMetrics.groupDoubleClick" />
							<BeforeDrop Fn="PerformanceMetrics.beforeDrop" />
							<Drop Fn="PerformanceMetrics.handleDrop" />
						 
						</Listeners>
					</ext:GridView>
				</View>
				
				<BottomBar>
					<ext:Toolbar runat="server" ClassicButtonStyle="true">
						<Items>


							<ext:Button runat="server" Icon="Add" ID="btnAddDb" Text="Add New Metric" AutoFocus="true">
								<Menu>
									<ext:Menu runat="server">
										<Items>
											<ext:MenuItem runat="server" Icon="Add" Text="Operational Metric">
												<Listeners>
													<Click Handler="#{hidMetricType}.setValue('Ops'); #{txtUnit}.show(); #{cmboTitles}.clear(); #{txtTitle}.setValue(''); #{storeTitles}.reload();#{winPerfTitles}.setTitle('Add New Operational Metric'); #{winPerfTitles}.show(#{btnAddDb}.el);" />
												</Listeners>
											</ext:MenuItem>
											<ext:MenuItem runat="server" Icon="Add" Text="Financial Metric">
												<Listeners>
													<Click Handler="#{hidMetricType}.setValue('Fiscal'); #{txtUnit}.hide();#{cmboTitles}.clear();#{txtTitle}.setValue(''); #{storeTitles}.reload();#{winPerfTitles}.setTitle('Add New Financial Metric'); #{winPerfTitles}.show(#{btnAddDb}.el);" />
												</Listeners>
											</ext:MenuItem>
										</Items>
									</ext:Menu>
								</Menu>
							</ext:Button>


							<ext:ToolbarFill runat="server" />
							<%--		<ext:Button runat="server" ID="btnExcel" Icon="PageExcel" Text="Export to Excel" Hidden="true">
								<Listeners>
									<Click Handler="return PerformanceMetrics.checkContent();" />
								</Listeners>
								<DirectEvents>
									<Click IsUpload="true" OnEvent="GetTemplate" Success="if (result.extraParamsResponse.msg.length>0) Ext.Msg.alert(msg); ">
										<ExtraParams>
											<ext:Parameter Name="docId" Value="#{hidDocumentId}.getValue()" Mode="Raw" />
										</ExtraParams>
									</Click>
								</DirectEvents>
							</ext:Button>--%>
							<ext:Button runat="server" Icon="Disk" Text="OK" ID="btnSave">
								<Listeners>
									<Click Handler="PerformanceMetrics.saveContents()" />
								</Listeners>
							</ext:Button>
							<ext:Button ID="btnCancel" runat="server" Icon="Decline" Text="Cancel">
								<Listeners>
									<Click Handler=" try{ window.external.CancelFormFromBrowser();  } catch(e){}" />
								</Listeners>
							</ext:Button>




							
						</Items>
					</ext:Toolbar>
				</BottomBar>


				<Listeners>
					<AfterRender Handler=" try { window.parent.App.ContentPlaceHolder1_btnCa.hide(); } catch(e) {}  return true;" Delay="50" />


				</Listeners>


				<DockedItems>
					<ext:Label runat="server" Html="Greyed-out information is saved in the database but will not display in the report(s).</br>" Dock="Bottom" Flex="1" StyleSpec="color:#8B8D8E;text-align:center;" ID="lblDisplayAdmin" />
					<ext:FieldContainer ID="adminCheckBoxContainer" runat="server" Layout="HBoxLayout" Dock="Bottom" IDMode="Explicit" Border="false" Flex="1" StyleSpec="padding-left:3px;background-color:#F84E4E">
						<Defaults>
							<ext:Parameter Name="height" Value="25" />
						</Defaults>
						<Items>
							<ext:DisplayField
								Cls="title"
								IDMode="Explicit"
								runat="server"
								Name=""
								Flex="1"
								Text="Display in Report" />
							<ext:DisplayField
								runat="server"
								Name=""
								Cls="titleMetric"
								Text="" />
							<ext:Checkbox
								ID="chkTMSStart"
								runat="server"
								Name="3"
								Cls="columnCheck" Checked="true">
								<Listeners>
									<Change Fn="PerformanceMetrics.handeColumnHideShow" />
								</Listeners>
							</ext:Checkbox>
							<ext:Checkbox
								runat="server"
								ID="chkTMEEnd"
								Name="4" Checked="true"
								Cls="columnCheck">
								<Listeners>
									<Change Fn="PerformanceMetrics.handeColumnHideShow" />
								</Listeners>
							</ext:Checkbox>
							<ext:Checkbox
								runat="server"
								ID="chkYTDStart"
								Name="5" Checked="true"
								Cls="columnCheck">
								<Listeners>
									<Change Fn="PerformanceMetrics.handeColumnHideShow" />
								</Listeners>
							</ext:Checkbox>
							<ext:Checkbox
								runat="server"
								ID="chkYTDEnd"
								Name="6" Checked="true"
								Cls="columnCheck">
								<Listeners>
									<Change Fn="PerformanceMetrics.handeColumnHideShow" />
								</Listeners>
							</ext:Checkbox>
							<ext:Checkbox
								ID="chkFYEStart"
								runat="server"
								Name="7" Checked="true"
								Cls="columnCheck">
								<Listeners>
									<Change Fn="PerformanceMetrics.handeColumnHideShow" />
								</Listeners>
							</ext:Checkbox>
							<ext:Checkbox
								ID="chkFYEEnd"
								runat="server"
								Name="8" Checked="true"
								Cls="columnCheck">
								<Listeners>
									<Change Fn="PerformanceMetrics.handeColumnHideShow" />
								</Listeners>
							</ext:Checkbox>


							<ext:DisplayField
								runat="server"
								Name=""
								Cls="actionButtons"
								Text=" " />
							<ext:DisplayField
								runat="server"
								Name=""
								Cls="showReport"
								Text=" " />
						</Items>
					</ext:FieldContainer>


				</DockedItems>
				
			</ext:GridPanel>
  4. #4
    Jan 08, 2014, 10:33 AM
    There is no "short-circuit" to the grag/drop tooltip?
    Sorry, I don't understand what you mean by "short-circuit".

    I tried my sample with Ext.NET v2.3 in IE9, still cannot reproduce the problem.

    As for your example. I see the RowSelectionModel, but it seems you said about "cell selection model" in the original post. It is confusing a bit.

    Also your sample contains lots of things which seem to be not related to the problem at all. Also it is not runnable. Please read this post:
    http://forums.ext.net/showthread.php...l=1#post122961

    Are you able to reproduce the problem with the latest Ext.NET?
  5. #5
    Jan 08, 2014, 12:34 PM
    Quote Originally Posted by Daniil View Post
    Sorry, I don't understand what you mean by "short-circuit".

    I tried my sample with Ext.NET v2.3 in IE9, still cannot reproduce the problem.

    As for your example. I see the RowSelectionModel, but it seems you said about "cell selection model" in the original post. It is confusing a bit.

    Also your sample contains lots of things which seem to be not related to the problem at all. Also it is not runnable. Please read this post:
    http://forums.ext.net/showthread.php...l=1#post122961

    Are you able to reproduce the problem with the latest Ext.NET?

    Real simple. I don't want the tooltip to show at all when a user drag/drops a row in the GridPanel. Is there anyway to STOP (short-circuit) that from showing?
  6. #6
    Jan 08, 2014, 2:23 PM
    I don't see such a possibility in API. You can investigate the CellDragDrop's sources. It should be possible to hide.
    http://docs.sencha.com/extjs/4.2.1/s...x-CellDragDrop
  7. #7
    Jan 08, 2014, 4:45 PM
    Quote Originally Posted by Daniil View Post
    I don't see such a possibility in API. You can investigate the CellDragDrop's sources. It should be possible to hide.
    http://docs.sencha.com/extjs/4.2.1/s...x-CellDragDrop

    How can I override? Is this right?
    
		Ext.ux.CellDragDrop.override({
			onViewRender: function (view) {
				 
			}
		});
  8. #8
    Jan 09, 2014, 4:33 AM
    Yes, it is a correct template.

Similar Threads

  1. [CLOSED] Unable to hide tooltip in javascript
    By alscg in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 31, 2013, 7:20 AM
  2. [CLOSED] How to hide empty ToolTip?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 17, 2012, 5:44 AM
  3. [CLOSED] Hide tooltip
    By gets_gui in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 19, 2012, 1:45 PM
  4. [CLOSED] Hide grid tooltip when there is no text
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 25, 2011, 12:16 PM
  5. [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

Posting Permissions