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.
Related
I am facing an issue inside a React App.
On clicking a button, a new Table row gets generated which contains a Checkbox as well. I have three such rows present on my Screen.
When I am trying to select the Checkbox present on Third or Second row, the Checkbox present on the First Row gets Focused and also gets checked.
Can anyone point me in the right direction, what does this issue mean and what can be the potential cause for this.
PS: I am New to Frontend!!
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 am using ui-grid. The use-case is such that on clicking a button, a new row is added. I want to make this newly added row editable. i.e. as soon as the row is added, the edit mode is on for at-least the first cell in the row. Any suggestions on how to do it ?
Tried so far:
var newobj = {"id": "","name":"" };
$scope.gridOptions1.data.unshift(newobj);
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW); //set focus to the new row
$scope.gridApi.selection.selectRow($scope.gridOptions1.data[0]);
here's a plunker for the same
http://plnkr.co/edit/6zyZ5q?p=preview
I'm displaying an ng-grid and I would like to change a particular cell's content based on an update. I don't want to make the cell editable. I'm instead popping up a dialog when they click on a Row. When they submit the data, I update the db using ajax, but I don't want to refresh the page. I'd like to update the cell to say something like "Updated". I haven't found anything in documentation or examples that would allow me to modify a particular cell on the fly. Anybody wanna point me in a right direction?
I do something similar with my data. Use a row or cell template to show your dialog using ng-click and pass a reference to the row.entity to your dialog. Then you can just update the data on the row.
I created an example below where I have a cell template that has an event to capture the row, column, and cell data. Then I allow for the user to update the value, and on the button click I update the row with the new value.
Plunkr here:
http://plnkr.co/edit/JQ7mtD?p=preview
Folks,
I am trying to display EXT JS with Row Expander plugin in a Visual Force page.
Check this link http://mikhailstadnik.com/ext/examples/nested-grid.htm
As per the link, I am successful in displaying Accounts in first grid and respective Contacts in child grid.
Problem is: When I click on first row, it is expanded and shows the respective contacts.
When I click on second row and first row is not closed, the data which I can see for second row (Contacts) are visible at first row contacts also.
So, I think when second row is clicked, I need to close the first row.
Please suggest me how to do this..
The plugin you are talking about features collapseRow(row) method.
Each time you are trying to expand a row (use beforeexpand event for that) you need to loop through all the rows and collapse expanded ones.
Here is how you check if the row is expanded:
Ext.fly(row).hasClass(this.rowCollapsedClass) // this is referring to plugin instance