I am trying to drag from a qx.ui.table.Table widget to some other widget.
I fail to get information about the table row I am trying to drag.
I would like to drag a row (respectively its content) without it being focused or selected, e.g.g just click into the row and immediately start dragging.
Thanks,
Fritz
What I'm doing in this situation is to first set the tables focusCellOnPointerMove property to true.
If you don't want to have the feedback of cells being highlighted on mouse move, you could additionally call table.highlightFocusedRow(false) to supress that.
This way the table is "aware" of the cell/row being currently under the mouse pointer.
Then you're able to detect the current row index in the table's dragstart event handler:
_onDragStartGetFocusedRow : function(e) {
var index = this.getFocusedRow();
if(qx.lang.Type.isNumber(index)) {
// do something usefull with this information
// and start dragging
e.addAction("move);
e.addType("myType");
}
},
After finishing drag and drop you could reset the focused row by calling table.resetCellFocus() eg. in the dragend handler.
This does, of course, only work with pointer devices.
Related
onCellMouseOut event not being fired always.
I want to display some text on hovering of cells in the row. I am using Ag grid event call backs onCellMouseOver and onCellMouseOut. I am maintaining a variable which stores current row Index where mouse is present.I am redrawing the row when mouse enters any of its cells. The former event (onCellMouseOver) is being fired appropriately and but the later one(onCellMouseOut) is not being fired always on exiting the cells.
A working demo of my problem is present below:-
https://next.plnkr.co/edit/4lS8euZclar4i7j5
The text in second column is supposed to appear only when you hover on that particular row, and disappear when you move the mouse away from that row. Although some of the times it is behaving as expected but some of the times the mouseExit event is not being fired.
Other issue because of this is checkbox selection is not working since i'm redrawing the cells again.
I have a grid with one column, which when the user selects, is used to display information in various textfields, checkboxes which are embedded in a panel on the right. I have implemented a delete feature at the row level in the grid. Now I wish either of these two things to happen.
1) Either the default selection is such that the first row is by default selected after deletion of any row.
OR
2)The information in the various components in the panel on the right is cleared.
Currently what happens is that the information which corresponds to the deleted row stays after deletion since nothing is selected in the grid so the previous selected option is used to display information on the right.
As removing the record from the grid implies deselecting it, you really just need to listen for changes to the selection in your grid and implement the desired behaviour when no selection exists.
I'd recommend the selectionchange event, as you can cover both selection and deselection by inspecting the new selection state:
grid.on({
'selectionchange': function(sm, selectedRecords) {
if (selectedRecords.length === 0) {
// no selection -> clear fields or select the first row
} else {
// selection exists -> load data into fields
}
}
});
(assuming you're using single selection, i.e. either one or no row can be selected)
I am designing an extjs application where I have couple of panels. and one of them of has a grid. I know I can either do selectionChange on the grid listener or itemClick.
Which one should I use? Or moreover which one is better. I obviously load data on the right panel once the grid item is clicked
The first one get fired only when the selection changes (as you might has guessed) and give you a array of selected record (which might be just one) while the second one get called for each click and give you only the one record you clicked on.
For your case I would tend to use the second event and save the last last clicked record internally. I would then only load the second grid if it was not already loaded for this record.
your grid is displayed as table on page at runtime so you can add onClick() event on grid or table cell during onrowdatabount event of grid.
I am using EditorGridPanel with cellEditor which acts nearly like Excel. We implemented Arrow Keys to move among rows and
columns. We do row validation when user moves from one row to another (specifically in rowdeselect event) and then save the
record. There is some issues are:
For the last row of the grid, rowdeselect event does not fire, as we do not have any other control after the grid.
rowdeselect event fires if we move from row to row using Tab, Enter & Arrow keys. But when user clicks on another row using mouse - events do not come in correct sequence, so focus moves to the new row, but earlier row not saved. Currently we solved this by calling stopEditing at the beginning of rowdeselect event.
We would like to know how we can solve these two issues and whether there are more robust ways to handle automatic grid saving.
You can fill free to check the problem in our site. -> http://www.softworksbd.com/swazilandlmis/yyyy_stockdata.php
1 ) First of all the event is not firing on the blur of the whole grid and not just the last row. try changing a row and clicking anywhere on the screen but the grid and you will see that no validation takes place (which means your rowdselect does not fire).
You should try and add a blue event to the whole grid that runs your validation scripts.
2) As far as I have checked the event is fired even on another row click so please explain exactly what you mean...
ps
I have viewed only this page in your application:
How to lock a specific row in extjs.
One way is to handle the click event (or other appropriate event), determine the row selected, and return immediately if the row is "locked."
The RowSelectionModel also fires the rowSelected event; as others have pointed out in this forum, this event is fired for either a keyboard row selection or a mouse row selection.
Try with this,
grid.getSelectionModel().lock();