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.
Related
We use textboxes on celltemplates instead using an editableCellTemplate.
http://plnkr.co/edit/M8Do1p?p=preview
<input class="grid_textbox text-center"
ng-blur="grid.appScope.quantityChanged(row.entity)"
ng-model="MODEL_COL_FIELD" style="width:80%"/>
We identify changes by catching ng-blur on the textboxes. However, we noticed that when the textbox is out of view when the user scrolls, it does not trigger the ng-blur on the correct textbox.
To reproduce in plnkr
Click on first textbox.
Click on the second textbox, this will display info on the Blur event. This is the expected behavior
To reproduce the error, click Clear and click on the first textbox again.
Scroll down until up to mid-bottom and click on a textbox. It won't output the same message as above.
Is there a way to fix this or a workaround to get the row that was edited?
Update:
I've tried Guranjan's solution and it worked, but another problem came up. I'm not sure if this should be another question but it's still related to scrolling and blur.
To replicate
Click on 1st textbox and input a number
Scroll until it's out of view.
Click on another textbox and edit.
This time just scroll. You can see the cursor focusing on other textboxes and not triggering blur.
Edit one. Then scroll again (mouse wheel or dragging scrollbar). Edit then scroll.
Click on one textbox to trigger blur. It will not display all of the edits.
This is the plunker of Guranjan to try it.
http://plnkr.co/edit/RWM2y7NLC7821c9vQDO6?p=preview
This is because ui-grid reuses the elements. One way to fix your issue is, store the value of current row on focus and use that on blur. For example, create variable in you app scope:
$scope.currentValue = {};
and then you can update this on input focus:
ng-focus="grid.appScope.currentValue = row.entity"
and you can then use $scope.currentValue to do whatever you need to do with it.
Updated Plnkr
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.
My WPF application uses the Telerik RadGridView control on a few of its screens. I have a requirement that says that whenever the user clicks on a row in the RadGridView, I'm supposed to switch to another screen and display detail information about that row. I hooked up a handler to the SelectionChanged event and this works, except that nothing happens if the user clicks on the selected row a second time. This makes sense, as the selected row isn't being changed.
How can I detect a second click on the same row and have the second screen displayed?
Tony
You could just attach a handler to the MouseUp event on the GridView. Check if there are any selected cells and respond from there. This will fire even if there is already a selection.
The MouseDown event will fire on the mouse click, but before the gridview updates the selction, mouse up should fire when the selection has already been adjusted
You can also attach a handler to each individual cell in code-behind as follows
(this.GridView as RadGridView).AddHandler(
GridViewCell.MouseUpEvent,
new EventHandler<Telerik.Windows.RadRoutedEventArgs>(this.OnMouseUp));
I think you may try to achieve this through the MouseLeftButtonDown event or PreviewMouseLeftButtonDown event.
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:
I want to be able to toggle selection when a row is clicked. So, first click should highlight it and second click (again on the row) should unhighlight it (and fire an event). Is it even possible? I'm using a OnSelectionChanged event but that gets fired only when I click on a different row than the selected one.
there a some useful answers here(searching the visual tree) or here(check in PreviewMouseLeftButtonDown).