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
Related
Dears,
I have implemented a pop-up window to be shown by clicking a trigger-button of a textbox, and it has a radioGroup in it. in some cases I have to check the radio based on user input.
The problem is that if I try to invoke radioGroup.setValue() before opening the popup once, I face with two selected items in radioGroup. The issue doesn't occur if open-close the popup before trying to set the checked radio.
Is it a rendering issue or something like that?!
I've added ScaleImageLabel to swipe Tabs. I want to calculate amount of time each tab remains in focus. I added focus listener to Tabs/ScaleImageLabel but it's not getting fired. It's working when added to the form. Any suggestions on how to achieve it?
If I understand correctly what you need is a tab selection listener. Focus listener will only work for focusable components and labels are by default non-focusable. I would recommend avoiding it since focus is used for key based navigation. It might produce different results than you would expect.
I'm working with angularjs but i have a problem with my ng-grid.
First, the client didn't want the user to select a row just by clicking it.
They wanted a single checkbox at the beginning of the row.
To do that i had to disable the row selection by doing this :
"enableFullRowSelection: false". This prevented the row to be selected.
But now they want me to allow the highlight of the row by clicking it.
I tried to put a css focus but the event never triggered (i tried hover and mouseenter and the css worked).
How can i disable the row but still let the focus event enable ?
If someone can help me it will unstuck me !
I have some buttons in a bottom toolbar of a gridpanel that control adding, and removing records from the row-editing grid.
The handlers are pretty simple: "new" button creates an instance of the model, appends to the grid and then opens a row-editor on the new row; "edit" button just opens the selected row's row-editor; "remove" destroys the record from the store and refreshes the grid view.
For some reason these buttons don't lose the focus class that gives them a border when they have the focus. Here is a picture:
In the picture both the "New" button and the "Remove" button have the focus class, when I press the "Edit" button it also keeps the focus classes even after doing a complete row-edit operation and closing the row-editor.
I did find that when I mousedown on one of these permanently "focused" buttons and then mouseup away from it and then click something else the focus class goes away.
I know that I could put a blur handler for all button components in my respective controllers but I would have thought that this functionality was built in so I am asking to see if there is something I missed somewhere in the docs.
The classes that it won't let go of are these:
x-focus x-btn-focus x-btn-default-toolbar-small-focus
This is with ExtJS 4.1.0 in FF10 on Windows 7. But I did notice similar behavior in ExtJS 4.02 and 4.07, just haven't needed to handle it until now.
I found out what it was:
At some point in the handler chain for each of these buttons the button gets disabled. When a button is disabled in ExtJS it prevents the blur event from firing.
It was necessary to disable the buttons so the solution to simply add button.blur() in the handler was the correct way to do go about it.
I have a problem regarding combobox dropdown. Once a dropdown is opened, if I want to move focus to other control (say a textbox), I need to click twice because on first click, the combo dropdown is closed and then on second click, the textbox gets focus. How should I fix this? Please help.
You could listen to the DropDownList.SelectedIndexChanged event, and in the event handler set focus to the next control, either by setting TextBox.Focus(), or by calling System.Windows.Forms.Control.SelectNextControl()
I think this would be 'non standard' behaviour for what its worth. Its quite normal to expect the user to tab or select the next control after using a drop down.
Edit: Sorry, in a WPF ComboBox the equivalent event is SelectionChanged, but on reflection you'd be better using OnDropDownClosed. This would mean you only move the focus specifically after using the drop down rather than just whenever the value changes.