I have a grid which gets populated from the database and works fine. Now I want to add a mouseover event to this grid and display a tooltip text which shows all the column values in multi-line fashion for the highlighted record. The business case here is that there are quite a few columns that are being displayed in the grid and the user would like to have a quick preview instead of horizontally scrolling all the way to the end, before selecting the record. Squeezing all these columns to fit into the screen is not a clean solution in this case.
I have tried looking through all the available methods in the GXT 3.0 API for Grid and GridView but couldn't find anything to get the highlighted records. There are a couple of events for MouseMove, MouseDown and MouseClick but none for MouseOver.
I tried various forums as well to find a solution but there doesn't seem to be one yet so thought it might be useful for others as well if I start this thread.
Please note that this issue is not related to Ext-JS. The version I am using is Ext-GWT 3.0.1.
Thanks
MouseMove IS the one you want. It's only fired when the mouse is over the widget.
Alternatively, you can sink a DOM event to the widget by using:
DOM.sinkEvents(widget.getElement(), Event.ONMOUSEOVER);
in your widget's constructor or onLoad method, and then override the widget's onBrowserEvent:
#Override
public void onBrowserEvent(Event event){
final int eventType = DOM.eventGetType(event);
if(eventType == Event.ONMOUSEOVER) {
//DISPLAY THE INFO
}
}
This is definitely harder than directly adding a handler but pretty customizable. You can choose either one.
BTW you might want to get the position of mouse by using:
mouseX = DOM.eventGetClientX(event);
mouseY = DOM.eventGetClientY(event);
You could accomplish this by creating a custom Cell, and passing that to the grid's specific ColumnConfig.
With the custom Cell, you have access to all the events you would need.
Once you have access to the info you need, displaying it can be done in many ways. GXT provides a lot of solutions for this. Quicktips may be the way to go here though.
Related
I've been searching around (both on SO and around the web) to try to figure out how I can get the current height of the editor after the user has resized it. The TinyMCE 4.x docs don't show any kind of resizing event. When searching around I did come across the ResizeEditor event but that seems to apply only when objects within the editor are resized (which makes it seem like a poorly named event). Despite that, I tried to listen to the ResizeEditor event just to see and it does appear to fire whenever I resize the editor (though, I'm unsure if that's because the actual editor is resizing or because elements within the editor are getting resized, too. In any case, only the event object is passed in as an argument to the listener and I don't see any way to get the editor's current height (after the resize) from that event.
So, is there a way I can do this? To listen to the editor being resized and get its height?
thnx,
Christoph
You should be able to get the entire height of the editor (Menus, Toolbars, StatusBar, content area, etc) with code like this:
tinyMCE.activeEditor.getContainer().clientHeight
tinyMCE.activeEditor.getContainer().clientWidth
When you call tinyMCE.activeEditor.getContainer() you are getting the outermost div that contains all that makes up TinyMCE. From there it is just standard JavaScript to get the relevant dimensions of that element.
Here is an example: http://fiddle.tinymce.com/qigaab/18
The exact already asked question to what I'd like to do is: how to add tooltip on the entries and not the combo....
I cannot use a CCombo. JoeYo said that he solved it by using a DefaultToolTip class on the Combo, but he didn't elaborate.
Can anyone, (#JoeYo hopefully) give me a bit more detail how to got the handle on the list, once dropped, to capture the mouse hover events, and then of course display the tool tip?
If I was supposed to ask for more info on the original question, I could not figure out how. I tried to comment, but was told I did not have enough credits.
DefaultToolTip is part of JFace. Other than the native tooltip of the platform, it can be freely positioned and shown/hidden. Internally it is comprised of a Shell that when shown stays on top of all other controls.
In combination with a MouseListener, the getVisibleItemCount() and getItemHeight you might be able to compute above which item (if any) the mouse cursor hovers and show a tooltip with suitable content.
This answer has a snippet that computes which item of a List widget is under the mouse pointer. It should be possible to adapt it for the Combo widget. The remaining difficulty is probably to figure out the of the drop-down and the gap between of the Combo and its drop-down.
I need to freeze the first column and first row of data in a CellTable, so that users can scroll through the data but still see the labels on the "axes." The first column should scroll when the user scrolls up and down, and the header row should scroll when the user scrolls left and right. Think "Freeze Panes" in Excel.
I'm using GWT 2.1 and am willing to write my own widget to do this if no solutions already exist. My question is a two-parter:
Do any widgets already have this behavior?
Any suggestions if I'm going to implement this myself?
Thanks!
I implemented a solution myself. Check out http://larkolicio.us/ScrollTable/ExperimentTables.html
It's a LayoutPanel with three AbsolutePanels inside it. The frozen columns are a CellTable, the main part is a CellTable, and the header is a Grid - I could find no way to set the width of a CellTable column! A ScrollHandler links the main part to the two frozen parts. There is a little bit of delay - I'd appreciate it if someone could find a way to get rid of the lag between the sections.
I got it working to a point that I could use it, and stopped. It is not a general-purpose widget. Please feel free to use it at your own risk.
This implementation is quite good. I have just tested it. It however needs some changes made to support asynchronous loading. GWT Issue 188 covering similar request for enhacement was created on Oct 2006?!
Thanks for sharing.
once again I've got a question. Since I am using Google Web Toolkit (GWT) at work (along with Java Servlets), I am currently building some user interface with GWT (in Java).
I've got some trouble though. I am using a SplitLayoutPanel which contains a ScrollPanel on the left and another one on the right.
In the left ScrollPanel there's a VerticalPanel with several Labels, which differ in their width. What I want to accomplish, is: if the Label's text doesn't fit in one line, it should display as many characters as possible and have a "..." in the end, if it's not fully displayed.
I am about to add a CustomEvent EventHandler for the Label, which can be fired whenever the Label needs to change its content. Now the problem however is, that I'd need to fire the event whenever the ScrollPanel or its inner VerticalPanel is resized (by dragging the SplitLayoutPanel-Splitter).
Now the question: is it possible to override some sort of "onResize"-Event or at least "onMouseMove"-Event inside the VerticalPanel, so that I could fire the "changeLabelSize()"-method for each Label inside of this VerticalPanel?
How would I go about it? Thank you all for your time in advance! Please ask for anything unclear, so I can clarify it.
Best regards,
Igor.
This can be done easily with the CSS property text-overflow: ellipsis;.
Supported by IE7-, Safari and Konqueror.
And it can be emulated in Firefox.
I would like to arrange UIControls in WPF in a similar way to the applications on the iPhone. They should be positioned on a grid, but a user should be able to drag them somewhere else, after releasing the mouse button (or the finger in case of an iPhone) the selected UIControl should snap back to the next position in the grid. The other UIElements should be rearranged automatically.
Further the user should also be connect two elements with a line or something.
I'm not experienced with WPF. The first question is if there is a container which is suitable for something (System.Windows.Controls.Grid ?) or if I have to extend canvas or somethig else for this.
I would like to know which elements from the WPF framework can be used and which elements I have to write myself.
For people who do not own an iPhone: http://www.youtube.com/watch?v=3omhu2AUWC8
Update
I've looked at AnimatedTilePanel in the BangOTricks examples (see below), this one explains how to create your own Panel and how to let it arrange things there.. However I still need an idea how to implement drag and drop correctly in this example..
Unfortunately, you'll have to write a lot of things yourself, as WPF doesn't automatically do what you're looking for.
For positioning the controls, you can use either UniformGrid or Grid. Assuming it's much like the iPhone video you showed, you can just use the UniformGrid with 4 columns and however many rows you need.
For the dragging animation, layout-wise, you could start by manipulating the RenderTransform property on whatever is being dragged, but you'll have to set a handler to check once you've met whatever threshold necessary to move into the another "cell" -- and at that point, you'll have to changed the order of the items in the tree.
Take a look at AnimatedTilePanel from Kevin's Bag-o-Tricks at:
http://j832.com/bagotricks/
It doesn't do everything you want but it will show you how to write a panel that animates its children when changing size or order.
New input to this old post in 09. Earlier this year (2012) someone has wrote a FluidWrapPanel and open sourced it. I tried it and it works like a charm - just like that on the iPhone menu.
You can also apply to other UI Elements or UserControl.