Cannot edit fixed columns
Cannot edit fixed columns
We are using DataTable with Fixed Columns, Scroller, Editor and KeyTable with inline editing and using server-side rendering.
We are having an issue with being unable to edit any of the fixed columns (there are 6). When clicking into a fixed column cell, the orange editor outline appears but there is no cursor and cannot be typed into. If I click on the same cell again, it seems that sometimes I am editing the table underneath. We also have validation rules on these cells, and error message will sometimes cause the fixed columns and the table underneath to be misaligned.
Please let me know what is the best way to engage support for this issue. I tried re-creating our scenario on http://live.datatables.net/seweyepe/1/edit (this is in-work).
Answers
Parts of the issue is replicated now in: http://live.datatables.net/seweyepe/3/.
Reduce browser width until horizontal scrollbar appears.
Currently, only first column is set as fixed and only the first two columns are set as editable for simplicity.
The symptom is it looks like first column cannot be clicked into for editing (no input box). However, if I type some characters anyways and then click or tab out of the cell, it somehow took my input but how it works seems buggy.
According to the Compatibility Matrix FixedColumns and KeyTable are "Partly Compatible". It states the the columns that are fixed cannot gain key focus while the non-fixed columns can.
Sounds like you won't be able to use FixedColumns with the KeyTable and inline editing.
Kevin
Hi Kevin,
Thank you for the clarification. I tried removing the KeyTable component. It looks like I can mostly trigger inline editing on the fixed column if I click into it (trigger focus) but editing values is still buggy. To confirm, inline editing is incompatible in fixed columns entirely, with or without KeyTable. Is this correct?
I noticed I'm also running into the same issue of not being able to focus on fixed column when using row selection (we are also using this feature but didn't think it mattered at the time). Is this also an incompatibility? I've updated the example to reflect this.
http://live.datatables.net/seweyepe/5/
Thanks! - P
Here is an example of FixedColumns with inline editing:
https://editor.datatables.net/examples/inline-editing/fixedcolumns
Not sure why it doesn't work in your test case. I'm not sure which version of Editor is loaded into the http://live.datatables.net environment. Do you have problems in your code with KeyTable disabled?
Maybe @allan or @colin can say why the test case doesn't work.
Kevin
There are a few things going on here - let me address each in turn:
1) The live.datatables.net environment uses the current Editor release (1.8.1 at the time of writing).
2) Kevin is spot on when he notes that KeyTable and FixedColumns are not fully compatible. You can use KeyTable on the columns that are not fixed, but not on the fixed column. The weird behaviour you are seeing is caused by the fact that KeyTable is still operating - just behind the fixed columns (which are floated on top of the host table).
3) The demo you have isn't working because the row selection is enabled on the FixedColumn that is also editable, and that is causing a conflict. If you disable row selection you can see it working here: http://live.datatables.net/seweyepe/7/edit .
What I would suggest is you use a checkbox column like in the example Kevin linked to which will also solve the UX issue of clicking inside a selected row's input box deselecting the row which is rather confusing.
Allan
Hello Allan and Kevin,
Thank you for your explanations thus far.
Regarding #2, yes, I've noticed the focus goes into the host table. When I hid the fixed column layer, I can see the editing works fine in the host table. I even saw a call in KeyTable that updates the fixed column. It almost seems like if I can do the reverse, have fixed column update the host table, this could totally work.
I guess, I want to try to understand if it's feasible to try to make tabbing work in fixed columns. This is a key functionality for our users as they do heavy editing and mousing creates other types of usability issues for them.
It seems that it is possible to edit in a fixed column by clicking into it, just not with tabbing. If I can detect tabbing between the fixed/non-fixed column boundaries, would that solve the issue? (+ figuring out how to update the host table)
One more thing I am noticing when I've disabled tabbing on the fixed columns (tabbing still enabled in the rest of the non-fixed columns). The horizontal scrolling position is not returning to the right spot when I tab out from the last cell in the row and moving to the next row's first inline editable column.
I tried updating the example to illustrate this: http://live.datatables.net/seweyepe/9/ Note: window needs to be narrow enough for horizontal scrollbar to appear.
After making the suggested changes to row selection and excluding KeyTable from fixed columns, I found one more conflict in our table setup with fixed column inline editing.
When editing a fixed column value, the value disappears after clicking out of the cell. It seems to be a conflict with the
drawTypebeing set to'none'. We have server side processing and do not submit the data until users have completed all of their changes (saving additional server requests + redraws).It seems the issue goes away if I add a fixed column update call in Editor's commit function. Is this an acceptable way to address this issue?
Yes - that would be a valid thing to do.
Good to hear you have a workaround for this limitation of KeyTables at the moment. I'll have a think about how KeyTable and FixedColumns can play nicely together - probably involving listening for events on the original columns and propagating that to the fixed cells.
Allan
Hey Allan, have you found a solution to make KeyTable and FixedColumns play nicely together?
No, that's still outstanding, see compatibility chart.
Colin