Inline editing and tag fields
Inline editing and tag fields
Hi Allan,
I'll continue here (from https://datatables.net/forums/discussion/81422/date-picker-with-jquery-ui
).
When I use inline editing for tag fields and clicking on 'Add' expands the selection list. As soon as I select an entry from the list, the tag editor disappears without saving the new value.
I extended the tags-multiple example with added "keytable".
Here is the code:
var editor = new DataTable.Editor({
ajax: '../../controllers/joinArray.php',
fields: [
{
label: 'First name:',
name: 'users.first_name'
},
{
label: 'Last name:',
name: 'users.last_name'
},
{
label: 'Site:',
name: 'users.site',
type: 'select'
},
{
label: 'Permissions:',
name: 'permission[].id',
type: 'tags',
limit: 4
}
],
table: '#example'
});
$('#example').DataTable({
ajax: {
url: '../../controllers/joinArray.php',
type: 'POST'
},
columns: [
{ data: 'users.first_name' },
{ data: 'users.last_name' },
{ data: 'sites.name' },
{ data: 'permission', render: '[, ].name', editField: 'permission[].id'}
],
keys: {
columns: [0,1,3],
editor: editor
},
layout: {
topStart: {
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
}
},
select: true
});
best regards
Ilja
Replies
Hi Ilja,
You can continue in the old thread if you want - I'd see it just the same.
I'm seeing some similar issues in this example if I pop open the console and run:
I'll need to look into that - it will need a change in Editor.
Thanks,
Allan
Hi Allan,
when I enter your lines of code, I can at least select entries from the list, which are then also transferred into the field. Only saving is not possible afterwards.
Without your lines, the list closes without the selected value being applied. It feels as if the field simply loses focus.
Thank you very much for your work on Datatables and your truly commendable support!
best regards,
Ilja
Hi Iija,
I've just committed a fix for this error which will be in Editor 2.5.2. If you'd like to apply a patch immediately, add the following code to replace the
ownsfunction for thetagstype:That will fix the issue with a click on the
Ximmediately closing the field.You'll also want to do one of:
By default clicking away from an inline editing field will cause the edit to cancel. You need to either change that behaviour to have it submit (the first example above), or provide a way for the end user to submit the change (the second example).
Regards,
Allan
Hi Allan, thank you very much for your reply. I added the lines, but they do not solve my actual problem.
When I click directly into the field in the table, the “Add” button appears.
I click on “Add”, and the list with the options appears.
When I then click on one of the options, the entire editor closes. The “Add” button disappears, and the selected tag is not applied.
If I select the option from the list using the keyboard, the editor behaves as expected. The entry is applied, and the “Add” button remains visible.
It seems as if the editor is losing its focus, because the items in the list are outside the table cell.
However, with the “datetime” field type, this is not a problem — I can also click outside the table cell to select a date in the calendar without losing focus.
Quite a lot of text… should I create a video?
The effect occurs in both Firefox and Chrome.
If you could give me a link to the page showing the issue that would be really useful. If you can't make the link public, you can PM me by clicking my forum user name and then "Send message".
Thanks,
Allan