When keyboard selecting a row in a GWT DataGrid, how do you deselect it?
When you select a row like this:
table.setKeyboardSelectedRow(rowInd, true);
You can unselect the row by clicking outside the grid. How do I make this same 'unselection' programmatically?
Selecting a row like this:
table.setKeyboardSelectedRow(rowInd, false);
Since the focus is not on this selection, it does not blur out like usual when you click outside the grid. I need to keep the focus on something else, but I wish to still deselect this row at a certain point. How do you deselect a keyboard selection programmatically?
Note: using the Selection Model's setSelection() with a false param does not deselect keyboard selection, only the selection made by the selection model. Using setKeyboardSelectedRow(-1) also does not work.
I find it baffling that GWT does not offer a way to unselect a keyboard selected row!
Related
I am searching for a solution to how I can start an ag-grid table with only cell editors. That means I do not want to click into the row or cell to edit the data.
I have found almost a solution for me with this example in the doc:
Full row editing
This is exactly what I am searching for. I can programmatically start editing immediately. The problem with that example is that onCellValueChanged is only fired after the keyboard click "enter" or click on the next row.
I would need a solution where onCellValueChanged is fired immediately after a cell changed.
I can think of two ideas to accomplish this:
Use "No Click Editing"
This is similar to having all cells contain an input box. It just takes 1 click to focus.
https://www.ag-grid.com/javascript-grid-cell-editing/#no-click-editing
Custom cell renderer
Use a custom cell renderer to have input boxes in each cell. Then, you are always in edit mode. And you can control when the value is saved.
https://www.ag-grid.com/javascript-grid-cell-rendering-components/
I have an ag-grid popup cellEditor which contains an angular mat-select control. Is there a way to prevent the popup cell editor default behavior of closing on a click outside the cell? When an item is selected the ag-grid popup cellEditor closes. I believe this is due to the click on the select drop down being interpreted as outside the cell. Is it possible to prevent popup cell closure for this case or even in all cases such that I can control it completely via code using gridApi.stopEditing()?
See https://material.angular.io/components/select/overview for information on the select control. I am not including full details here as it is likely not important.
Image of popup editor, You can see how cell is before editor is invoked as well. See where the blue number one appears
I have a simple vertical one-dimensional menu. Menu items are not fix, they change dynamically according to data received from the server. (So I cannot write fix code for them.)
In css I declared selected MenuItem to be bold.
My wish is simply to make the selected MenuItem remain bold after selection. But when I click it, it loses focus and the first MenuItem becomes bold.
How could that be fixed?
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.
How can I modify a GWT menu - grey out some entries, put a checkmark next to others, according to my application state?
My app has a menu bar across the top - File, Edit, View, Insert, Format, etc. I have a number of paragraphs, each of which could have a different format. When the user clicks on Format, I want the format menu to show a checkmark next to the menuItem that corresponds to the format of the currently selected paragraph. If some formats are inappropriate for the currently selected paragraph, I want to grey those menuItems out.
The main issue is when to do the update: (a) when the Format menu button is clicked, or (b) each time my user selects a new paragraph?
I find option (a) more appealing. But how can I detect this? A MenuItem doesn't have any facility for adding event listeners. It could be a mouseClick that I need, but it might be a mouseOver: if the user clicks on the Insert menuItem the Insert menu will appear, but then if the mouse is moved over Format, then the Format menu will appear.
Option (b) sounds simpler, but wastes more processor time.
For my contextMenu (right click on the paragraph), it's much easier, because the menu is only constructed when the right click happens.
I've resorted to using the square-root symbol (√) for a tick. Does anyone know a nicer way? Do I need to use HTML and use " Plain-Format" for my menu item?
Finally, is there a way to disable (grey-out) a menu item so that it can't be selected?
Option (a) sounds better from a conserving resources point of view.
Instead of using the square-root symbol, why don't you use an image (using the com.google.gwt.user.client.ui.Image class)?
I think a more elegant/simple solution might be to use the checkbox class for your menu items. That way you could have automatic ticks/checks instead of having to use an image or the square-root symbol. Also, you will be able to "grey-out" items with setEnabled(false). Otherwise, you will have to write your own widget or add your own functionality to your menu labels in order to "grey-out" items.