I have a grid that requires ui.grid.cellNav, however the first time I click on any cell that allows focus (allowCellFocus -> default is true) an scroll event happens moving up the clicked cell out of the viewport, my grid has many rows so the user needs to scroll up to reveal the clicked cell again. It only happens the first time a cell is clicked.
I've found in ui-grid.js the code below trigering the behavior:
if (grid.cellNav.lastRowCol === null || grid.cellNav.lastRowCol.row !== newRowCol.row || grid.cellNav.lastRowCol.col !== newRowCol.col){
grid.api.cellNav.raise.navigate(newRowCol, grid.cellNav.lastRowCol);
grid.cellNav.lastRowCol = newRowCol;
}
Steps to replicate:
Go to http://ui-grid.info/docs/#/tutorial/202_cellnav
Scroll down to reveal the sample grid of the page (it doesn't happen with age since it has allowCellFocus to false.
Click on any cell of ID, Name or Address
A scroll will happen if you haven't already scrolled to the bottom of the page
Clicking again in any other cell doesn't trigger scroll behavior a second time. To replicate the behavior you need to reload the page.
Can I prevent this behavior, while still using cellNav?
Thanks in advance.
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 have very simple grid which contains a lot of data - so my scroll ball is quite narrow. I edit data in cells. Left to my grid there is picture with coordinates points. I wish this behavior: when I click on coordinate point I want to go to corresponding grid row. They are related by id(id row = id point div). How can it be made?
Also when I edit grid in the middle and bind coordinates of new point to row(by using store) - the grid gets automatically reloaded after store is updated - and scroll gets to the top. How can I track last edited row in the middle of the list so I can auotmatically focus on it? Thanx in advance.
use the focusRow method (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.view.Table-method-focusRow) to scroll where you want, for example :
yourGrid.getView().focusRow(10);
To disable the 'scroll to the top" effect when you reload the grid, set preserveScrollOnRefresh to true on the viewConfig of your grid (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.view.Table-cfg-preserveScrollOnRefresh).
I am facing an issue in listening to the click event for hyperlink in extjs grid. Actually I have a form whose display field’s value is a hyperlink. On click of this hyperlink, I show a window pop-up which a grid(single column) and has multiple values,one value for each row(which are again hyperlinks). On click of this I show a form. On the click of hyperlink on grid column, I have this listener:
cellclick:function(){
Ext.getBody().on(‘click’,function(event,target){
MyModel.getProxy().url = ‘…’;
MyModel.load({
scope:this;
callback:function(){
}
});
},null,{
delegate:’.className’
});
}
On click of the hyperlink on grid row, there is a call to the rest service. When I click on any value for the first time, it works fine. When I click on any other value, there are two service calls, one for the value that is clicked and one for the previously clicked value and this goes on increasing with the increase in the number of clicks.How can I avoid this?Is there any other way to listen to the hyperlink click event?Any help is highly appreciated.Thanks….
I'm programming an application that loads a list of rows in a grid using WPF, DevExpress with an MVVM approach.
I have a button that adds an new element to a ListRow, which is binded to GridControl's ItemSource. This list notifies the view when it's modified.
The problem is that when you click NewRow button the scroll bar grows bigger with each click but only when you click in the scroll bar the content of the list is repainted in the window.
Does anyone have any idea? Why is this happening?
PS: I didn't write here any code because I think is needless to show such a long code. But I can put it if you want.
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).