I have a GWT ListBox. My validation code inquires whether the ListBox's selected index is -1 (my ListBox's default state). If I do not touch the ListBox, the getSelectedIndex() returns -1, as expected. If I hover over the ListBox items but do not click on one (i.e. click outside), getSelectedIndex() returns a non-(-1) index. I want it to return -1 unless I click on a ListBox item and the ListBox updates itself to reflect that selection.
What should I do?
You won't be able to use the native <select> element for this in a nice way since the browsers determine what the selected element is, not GWT. In other words, this is just how <select> works.
You'll have to either create your own select widget (which might be preferred for styling reasons anyway) or get creative and kludge up something next to the existing widgets. You could add a click handler to the ListBox and "manually" set the selected index to -1, but you'll have to figure out if the user cancels his operation and restore the selection afterwards. You'll have to suppress selection events from your custom code because you probably don't want the rest of your app to react to your new -1 hack. Ugh! Probably easiest to handle this in a different way.
Related
I have a multi-page form, using a vertical tabs UI, in redux-form, and I'd like to track the current tab selection in the redux-form store.
What's the best way of doing this?
I would track the current tab selection outside of redux-form, but I've integrated redux-form with redux-undo, and I'd really like for undoing a form change to go back to the tab of the modified control.
I tried using a selected redux-form field, but this means that changing the selected tab marks the form as dirty.
From reading the docs, I could probably use reducer.plugin to add arbitrary properties to the redux-form store, but I don't see any documentation of which arbitrary property names are "safe," and I'd have to update the plugin for every form that should behave this way.
Any ideas?
My custom CQ5 component has a dialog which consists of 2 drop down menus. I would like to automatically set a default value to second menu depending on whatever is the value selected from the previous drop down.
How can I achieve this?
you can register handlers for different events triggered by the widgets. You can use the "selectionchanged" event to register a function that will read the new content from the dropdown and then use the setValue() method in the second dropdown to put whatever you want there.
To obtain the second dropdown from the first you can use the nextSibling() method.
The widget documentation will help you a lot. look for "selection"
I would like to reject the selection of a row in a datagrid based on the state of a form. If the form has fields with changed data, I would like the row selection to rejected.
Is there an event I could trap (before selection) and cancel or do I have to implement the logic myself?
You can either use a SelectionChangeHandler on your SelectionModel (it gives you an object which was selected, and you can unselect it), or you can use the CellPreviewHandler on your DataGrid (it gives you a row which was clicked - event.getContext().getIndex() - and you can unselect it in your SelectionModel).
The choice depends on what you want to do after the event: you have to do something obvious in your UI so that users are not confused why clicking on one row selects it, while clicking on another row does not. For example, you can change the background color of unselectable rows as soon as you render your DataGrid, and then show an error message when the wrong row is selected.
I want to know if there is any way to navigate Dialog components by pressing the Enter Key in the same manner natively implemented by the TAB key?
Though I haven't tried it by handling the keyDown and keyUp events certainly it seems doable. Though you may not be able to intercept the browser produced dialog boxes this way and other dialogs created using Window.alert(). How are you creating the dialogs ?
The tab key is the browser doing the work of changing focus - nothing special needs to be added, you'll find that tab works on any form on the internet (except where explicitly disabled for some reason...).
To move focus with the enter key, you must listen for the onkeydown event (focus change via tab also occurs onkeydown, so selecting this for consistency), check if it was the enter key, and if so, move focus to the next element in the list.
Typical tab focus behavior involves the browser checking the tabIndex of the elements on the page, and finding the next element on the page with a higher tabIndex, or the nearest subsequent sibling/cousin element. I don't have a method to implement this easily, so instead I'm going to focus on just going to the next widget.
GXT 3's FormPanelHelper has some handy methods to look for all Fields - this code could be used as a basis for non-GXT fields as well. Track all FocusEvent and BlurEvent from the fields found in the dialog, and use that to always track the currently focused field. Add a key handler to the dialog itself, to capture all key events, and check if one is the enter key. If so, figure out what the next field is from the currently focused field, and invoke .focus() on it - this will trigger the focus handler described above, so your bookkeeping will be updated correctly.
And as #eliran-m noted, consider leaving the tab key alone - don't get in the way of users navigating the way they are used to. Adding new functionality might be a good thing, but taking away expected behavior probably isn't.
I have an application, that uses the MultiSelectionModel, and it works great, but I need the site I'm developing to work on mobile devices, and so I can't use the keyboard to assist in selecting the elements (since it doesn't exist). EX: On the desktop I just hold ctrl and click on all the element that I want to select.
So on the mobile device, I would like to modify the default behavior of the MultiSelectionModel so that when you click on a CellList item, it toggles the selection state of that item.
I have looked through the source for it and cannot see anyway to implement the behavior that I need. (Mobile MultiSelection).
Whether you add a checkbox column or not, you'll have to add a cell preview handler. The easiest way to define one is to use DefaultSelectionEventManager, either using a checkbox manager in combination with a checkbox column, or creating a custom one (you'd map a click event into a toggle action).
You can see it used, the checkbox variant, in the GWT Showcase; it uses the setSelectionModel overload with two arguments to add the CellPreviewEvent.Handler at the same time.
Just adding an extra checkbox column would be a more user friendly solution.