I'm trying to build a website similar to kayak.com, at least with respect to how it displays and filters results. I'm using GWT and have built a Composite widget which uses a CellList to display the results.
I'm not happy with how the cells are selectable. I've tried setting the SelectionModel of the CellList to an instance of NoSelectionModel, but that doesn't seem to work. Really, I just want to display some text and a few hyperlinks in each cell and only give the user visual feedback (change the mouse pointer, etc.) when the mouse is over a hyperlink.
See if this works for you:
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/2327336e09ab29d1
Use
cellList.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.DISABLED);
to disable selection on a CellList.
Related
Is there a way to add a custom column menu tab with my own favourite icon which on click would render my custom react component?
something like
myColDef.menuTabs: ['generalMenuTab', 'filterMenuTab', 'myCustomMenuTab']
FYI I'm using v12.0.2
What you're after can't be done I'm afraid. The grid supports React components in all sorts of ways (renderers, editors, filters etc), but not via the column menu.
I've updated the docs page to remove the gibberish issue - it'll be fixed properly in the next release, thanks for highlighting this.
This would be helpful to have. In particular for us, we'd like to filter based off row properties, and not row values. Creating our own tab to filter by cell colors that we have assigned with our own set of labels would be useful.
I agree that it would be a nice feature to have. Apparently, there's no quick out-of-the-box solution to do it. The only workaround I see is to implement your own custom Header component which would display any buttons your want.
There you can put a button to open your own custom menu, which you can implement as any regular UI component. It also means you'll need to manually implement all standard menu options that Ag-Grid provides out of the box if you need them.
Our GWT based application needs a font size selector. Ussually people will want to pick the font size from a set of standard sizes. Sometimes however users will want to manually type in a specific font size like '12.6'. We obviously cannot put ever tenth of a point option inside our font size dropdown so a dropdown that can have any value entered manually would make the most sense.
I was told simple-gwt has a widget called ComboBox but it appears to be meant for an older version of gwt (we are on the latest - 2.4). Suggestbox would work except there is no "dropdown" arrow to popup the suggestions so users who do not want to type the size cannot use it.
Any suggestions? I was surprised this widget was not built into GWT.
The widget to use is the SuggestBox - you may or may not be able to extend it to use a click handler to show a set of default suggestions (there may be a property to allow it) and to use CSS to show a dropdown arrow.
javadoc here: http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/SuggestBox.html
Example here: http://examples.roughian.com/index.htm#Widgets~SuggestBox
I know that Smart GWT and ext-gwt have widgets that provide this kind of functionality, but neither of those libraries are free.
Of course you could always roll your own.
I found this library "Advanced GWT components". It is a free library that has drop in GWT widgets.
With a GWT CellTable its possible to add different columns that handle the click event in different ways.
For example lets say we have 3 columns:
an Avatar Image (ImageCell),
a name (TextCell),
checkbox (Checkbox
cell).
Then image adding these events:
When the ImageCell is clicked we can open a popup.
When the checkbox is clicked select the row.
When the name is clicked open the users profile.
With a CellTable it's straight forward to accomplish this.
However what if we wanted a view that doesn't look like a table. The CellTable is tied to a HTML Table for its implementation. Why not allow for a general HTML implementation of the CellTable (behavioral) API.
Using a CellList we can accomplish any view. But the API isn't as sophisticated as the CellTable. It would be cool if we could add something analogs to CellTable 'Columns' to a CellList.
Is there anyway to accomplish this with the current Cell Widgets? I might have over looked something.
Thanks!
I think there are two solutions:
Use a CellTable and style it so that it looks like a CellList. This should be quite straightforward and possible. However you would have to play with the CSS styles a little bit. Best approach would be to use Firebug to change the styles on the fly and see the results instantly
Use a CellList and create a custom cell which renders and handles events for your use case (Avatar, Name and Checkbox). This is more involved but there is a tutorial on the GWT page.
I would probably try to go with solution 2 because it also teaches you how to create custom Cells which might come in handy later on.
Update:
As Thomas suggested in the comments you can use a CompositeCell which wraps 3 different cells. That's probably the easiest way to implement it.
I have a CellTable with a bunch of cells that render to <input> tags. Tabbing between the inputs is broken because of CellTable's fancy event processing. It seems that tab inspires each cell to finishEditing, but that in turn hogs the focus and the focus never gets to the next <input>.
Setting tabIndex on each input does not seem to affect the behavior.
How can I restore the usual tabbing functionality?
I recently figured this out. Annoying, but simple once you find the magic.
Create a new Cell type to use in your table, as the stock TextInputCell specifies a tab index of -1. Basically do everything that TextInputCell does, but dont specify any tab index in your template.
Disable the default keyboard navigation on your CellTable. cellTable.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.DISABLED)
This should result in a normal tab navigation in your CellTable.
Disabling KeyboardSelectionPolicy may not work on all views, if you are using any MVP frameworks. GWT selects the cell instead of the input field within the cell.
Here is a solution which I used in my applications: Adding TAB control to GWT CellTable
the solution from Ben Imp works fine if you dont change the value of the cell, but if you change the value and try to navigate with tab to the next cell it lost focus and starts with the first element of the view. I have not found a solution for this inappropriate behaviour.
For those looking at this in the future trying to figure out how to have tabbing while changing values, do what the Ben Imp suggests then also in your custom components remove any reference to super.finishEditing. In some cases this means overriding finishEditing and having it do nothing.
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.