Hello everyone,
is there any chance to use cursors (up,down,right,left) or tab to move the focus or directly get activity among inline editing Datatable cells?
Thanks.
Elio
Datatable like excel behaviour
-
- Posts: 1
- Joined: 30 May 2019, 06:14
No.Unfortunately it is not possible dear.I hope this feature will be added soon
Been working on that myself, but using tab and enter when editing to navigate to next column / row.
Got it working nicely.
That's a method for BodyCell inside PrimeReact. Basically what it does it uses native JS to find the next editor elem and focus on it.
I have a feeling it won't be accepted as a PR as it is too large a change for PR's behavior. If you can find a way to override the BodyCell method with this method without a fork of PR let me know.
I tried to just do an import and BodyCell.mumble = this method and that didn't work.
Got it working nicely.
Code: Select all
key: "onKeyDown",
value: function onKeyDown(event) {
var el = event.target,
tr = el.closest("tr");
if (event.which === 13 || event.which === 9) {
// enter || tab
event.preventDefault();
this.switchCellToViewMode(true);
}
if (event.which === 13) {
tr = event.shiftKey ? tr.previousSibling : tr.nextSibling;
if (tr) {
//might be end of table
tr.children[this.props.cellIndex].getElementsByClassName("p-cell-editor-key-helper")[0].focus(); // if (helper.length) {
// helper[0].focus()
}
}
if (event.which === 9) {
var tbl = el.closest("table"); // bad logic, should just find all of that class, find the one containing self, and + / - 1 and focus.
var cols = Array.apply(void 0, _toConsumableArray(tbl.getElementsByClassName("p-cell-editor-key-helper"))),
i = cols.findIndex(function (n) {
return n.parentElement.contains(el);
});
i = event.shiftKey ? i - 1 : i + 1; // if (i === cols.length || i < 0) { // if out of index range of cols
cols[i].focus(); // Open next / prev editor
}
if (event.which === 27) // escape
{
this.switchCellToViewMode(false);
}
}
I have a feeling it won't be accepted as a PR as it is too large a change for PR's behavior. If you can find a way to override the BodyCell method with this method without a fork of PR let me know.
I tried to just do an import and BodyCell.mumble = this method and that didn't work.
Well i was unaware of bodycell method.Thank you so much for the help..It really helped alot..Thanks
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Why don't you use editable datatable feature for it? It has keyboard navigation. Please see; https://www.primefaces.org/primereact/#/datatable/edit
Best Regards,
Why don't you use editable datatable feature for it? It has keyboard navigation. Please see; https://www.primefaces.org/primereact/#/datatable/edit
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 11 guests