Page 1 of 1
Datatable like excel behaviour
Posted: 21 May 2019, 11:16
by elio
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
Re: Datatable like excel behaviour
Posted: 30 May 2019, 06:18
by Stebbins14
No.Unfortunately it is not possible dear.I hope this feature will be added soon
Re: Datatable like excel behaviour
Posted: 30 May 2019, 11:36
by CylonOven
Been working on that myself, but using tab and enter when editing to navigate to next column / row.
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);
}
}
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.
Re: Datatable like excel behaviour
Posted: 19 Jun 2019, 09:42
by Fleming30
Well i was unaware of bodycell method.Thank you so much for the help..It really helped alot..Thanks
Re: Datatable like excel behaviour
Posted: 24 Jun 2019, 09:27
by mert.sincan
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,