CODEWITHSUNDEEP
javascriptag-grid
newbo
newbo

Reputation: 97

How do I set the focus on the first editable cell in a row onRowClicked?

I have an ag-grid that I need to be able to edit via the keyboard. I have the editType set to fullRow and I'd like to be able to add javascript so that when I fire the onRowEditingStarted event, it goes to the first editable cell because occasionally, my grid is larger than the screen.

I can get the rowIndex, but I cannot get a hold of the collection of columns to look at the properties. I want to keep the rowIndex, but get the first editable column and set focus there. (Right now, it's whatever is incidentally selected to fire the event.)

Does anyone have an example that I can look at?

I've tried looking through the objects produced here:

onRowEditingStarted: function(params) {
   console.log("started row editing");
   console.log(params);
}

This gives me an event where I can get the rowIndex and the columnApi. I would expect somewhere in here is a collection to do a for loop, but I don't see it.

Upvotes: 3

Views: 16203

Answers (1)

Pratik Bhat
Pratik Bhat

Reputation: 7614

You could do something like in your onRowEditingStarted

// scrolls to the first column, or first editable column. you can pass in the correct index
var firstEditCol = params.columnApi.getAllDisplayedColumns()[0];
/////
params.api.ensureColumnVisible(firstEditCol );

// sets focus into the first grid cell
params.api.setFocusedCell(params.rowIndex, firstEditCol);

This example from docs is a good starting point

Upvotes: 8

Related Questions