I'm pretty new to Ext Js 4.
My question is "is there a way to know (a method or something) if a row is selected or just one cell is selected in a Ext Js 4.2.2 grid?"
I need to run some code if there is only one cell selected and run totally different code if the entire row is selected.
Also I need to change the type of selection in that grid, I mean if I press click on a cell, the entire row gets selected, but if I press double click on a cell, only that cell is selected.
I have no idea how to do that, so I would appreciate any kind of help.
So what I really need to do is to copy to the clipboard the content of the cell (if there is only one cell selected) or the content of the row (if the entire row is selected) and permit to the user to switch the selection mode from cell selection to row selection by clicking or double clicking one cell. I already know I have to use CTRL C in a hidden 'textarea' where the text is already selected in order to achieve the copy to the clipboard.
Many thanks!
You can use celldblclick for double click on cell and itemclick for click on record. If you click on record that record will be selected automatically if disableSelection is false.
You can add listeners to these events to do your own logic.
celldblclick is available since version 4.1.0
itemclick is available since version 4.0.0
--Sridhar
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 am trying to follow class Rendereing_a_cell_as_a_button
https://github.com/eclipse/nebula.widgets.nattable/blob/master/org.eclipse.nebula.widgets.nattable.examples/src/org/eclipse/nebula/widgets/nattable/examples/examples/_102_Configuration/Rendering_cells_as_a_link_and_button.java
from Nattable example to create similar button , i have copied same example code.
Button is showing on the desired column, but on click the style is not getting change of button like clicked and also listener is not getting called, it is going to edit mode and showing the content of cell.
Before Click
After click
If your table also supports editing you need to ensure that cells in the column that shows buttons should be not editable. This can be done by registering an IEditableRule#NEVER_EDITABLE for that column.
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.