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 !
Related
I use AgGrid Enterprise, and allow users to edit an entire row so all cells switch to edit mode.
I also have an event listener to save the row in database when the user put the focus on a new line or outside the grid.
In the first column of my grid, i have a custom cell displaying a combo.
When the user select a value, it should update the cell AND 3 other cells in the row.
So i use the API to refresh the 3 cells.
Doing so put the cell in view mode, i loose the edit mode and the save event is triggered.
Is there a way in edit mode, to update cell content without loosing the edit mode ??
Thanks a lot.
You said your are try to entire row and and also have custom cell with combo
but ag-grid does not work any popup editor with full row edit.
You have to remove ag-grid property editType: 'fullRow' and it will work.
https://www.ag-grid.com/javascript-grid-cell-editing/#gsc.tab=0
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
Currently I have a grid that has a option to click and show the grid options on the far right side. The issue I'm having and I am wondering if there is a setting I can add for the grid options dropdown to automatically close when a user clicks off anywhere else or opens one of the column drop down options. Any ideas?
There does not appear to be a setting for this in the API. I assume you are using CellNav, which is the cause of this. The reason clicking on the grid cells or header cells doesn't close the grid menu is that cellnav is eating the click event.
If you are using CellNav, you may notice that the column menus do not close when clicking within cells, either.
You need to add a different event listener (let's go with mouseup) and programmatically close the menus.
Here is an example of how to achieve this using the gridApi and onRegisterApi grid option.
While clicking "Add Row" button, it added a new row in the top of ui-grid with focus of first column. After pressing Tab button its not going to Next Column of same row instead its going to next row column.
http://plnkr.co/edit/VYhhIpdUAUzoXr2RiYKG?p=preview Here is my code in [plnkr]
Pls Advice.
You are trying to focus too fast. If you are using a timeout, everything works as expected.
setTimeout(function(){
$scope.gridApi.cellNav.scrollToFocus($scope.gridOptions.data[0], $scope.gridOptions.columnDefs[0]);
}, 100)
Also you need to focus data[0] instead of the first index.
Here is your updated Plunkr.
Basicly, I have a window contains two tabs, the second tab is a GridPanel and is initially inactive.
I want to programly select two rows of this GridPanel(via CheckboxSelectionModel) by clicking a "show window" button , but found it not working. There will be a javascript error thrown and no rows selected. After I manually clicked the second tab to make the grid visible, everything works well.
what's the most possible mistake I made?
I'll paste the code soon if it's not a common mistake for extjs beginner.
This is because your tabpanel will not render any components that are not visible (i.e., any components in your second tab in this case).
If you add the following config option to your Ext.TabPanel it should fix your problem:
deferredRender: false