Need a working solution where parent child edtor and DT method is properly implemented.

shovon-choudhury · March 2023

We need a working solution where parent child method is properly implemented with datatables and datatables editor. We need inline editing working for both parent and child tables. We also need dependent fields implementation with parent and child at the same time. Any working example or demo will greatly help.

allan · March 2023

Hi,

Do you mean something like this example? It doesn't have inline editing, but that can readily be added with calls to inline() for each table like in the inline editing examples.

Allan

shovon-choudhury · March 2023

@allan Thank you very much for your quick response. I already have gone through the example you have provided. I couldn't find any proper guide to add the inline editor properly with both the tables. We have tried implementing but it is malfunctioning.
https://datatables.net/forums/discussion/75675/quirky-inline-editing-behavior-of-child-of-a-multi-level-form/p1?new=1
This is the actual issue. That's why I am requesting for a simple working example with our request if possible.
Regards,
Shovon Choudhury

colin · March 2023

I see you're using Editor in your example, but our accounts aren't showing that you have a license or a trial. Is the license registered to another email address? Please can let us know so we can update our records.

Thanks,

Colin

koniahin · March 2023

Shovon works with me as part of my account. For some reason he does not have the access/ability to add comments on my posts.

allan · March 2023

@koniahin Many thanks for your confirmation. I'm actually not seeing an Editor license on your account either. There is a trial from 2016, but not a licensed version. Did you use another account to purchase the software perhaps?

With a multi-developer license you would be able to assign Shovon an license using the account functions here.

Thanks,
Allan

allan · March 2023

@koniahin - Many thanks for your e-mails on this. I can see that we transferred the license to your other DataTables.net account now, which is where the confusion is steaming from (the account used in this thread doesn't have a license assigned to it).

I'll reply back to the inline editing question in just a few minutes.

Allan

allan · March 2023

@shovon-choudhury - Regarding how to add inline editing to the example I sent. The variables aren't global, so it can't just be added with a few commands in the console there, but this is how inline editing would be added to the cells in those two tables:

$('#sites').on('click', 'tbody td', function () {
  siteEditor.inline(this);
});

$('#users').on('click', 'tbody td', function () {
  usersEditor.inline(this);
});

That messes with the whole row selection a little, so you might want something a little more like this example (checkbox to select the row), but that should be all that is needed to add inline editing there.

If it isn't working for you, please link to a test case showing the issue.

Thanks,
Allan

rmeetin · March 2023

Shovon will add what he has already tried in a day or so. I think he texted me that he tried what you suggested above. In the mean time, to view an example we have implemented, you will need to create an account on www.smokeymo.xyz. After you create the account notify me and I will upgrade your auth level. Then you will be able to sign in and gain access to a sample multi-level that we have created under the DTE select menu in the Dashboard.

https://www.smokeymo.xyz/bin/dashboard
https://www.smokeymo.xyz/bin/multi-level2

The problem I am seeing in both is that after selecting a parent, then to edit a child you click in an inline edit field, make a change, then click to the next and it opens/closes instantaneously. Key here - if you don't make a change the second field opens fine. Clicking out before clicking into the second field helps but that is kind of weird.

I frequently see an error:

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

allan · March 2023

Ah yes, I actually have an account and access from an earlier support request.

The error being seen is explained in the linked tech note but basically it means that inline editing is being activated on a cell for which there is no direct mapping to an Editor field. For example, in the parent table click a cell in the id column you get that error. That's because there is no id field. Which sounds correct - it isn't a value you want to edit.

See this example for triggering inline editing only on specific columns.

Allan

shovon-choudhury · April 2023

@allan https://www.smokeymo.xyz/bin/multi-level2
The above link is something we tried according to your provided example and suggestion. Child inline editor is still misbehaving. Could you please instruct with a full example based on our case scenario or could you please point us what we are doing wrong?

rmeetin · April 2023

In the address column I added a comment marking three parents that have children. Sort by address to bring them to the top.

Last week looking through your examples I found the stateSave: true, function. Wow it makes a world of difference.

allan · April 2023

When I load the page, I immediately get a console error shown about table is not defined on this line:

new $.fn.dataTable.FixedHeader(table);

I suspect you want parentTable to be passed in there.

Child inline editor is still misbehaving

In what way? If I:

Click "ID: 1" cell in the parent table,
I get a child table with four rows shown
Click on a "Name" cell and it becomes editable.
Editing the value and pressing return submits the value and appears to save in the DB.

That all seems fine to me.

Perhaps you can give me specific instructions on how to reproduce the error you are seeing.

Allan

rmeetin · April 2023

I tried parentTable earlier but that causes the parent to not load any rows. I tried again, same problem. Both lines are now commented out.

As soon as I select the Andersen family I see the error:

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

The children load. What happens next:

I click in the Name field, then Favorite color then Gender then back to Name (there appears to be no issue if you make no edits).

However if you make a change then it starts to get finicky when you click into the next field. I have seen some inconsistency where it seems okay then I keep making changes then clicking to another field and it apparently works, then starts failing again. I cannot get a handle on consistency.

Here is a video I just created. The password is "datatables".

https://vimeo.com/815331685

Tx

allan · April 2023

Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

Yes, as that tech note explains, it means that the cell being clicked on doesn't have a corresponding Editor field. You almost certainly don't want inline editing on that column, so don't trigger inline() on it. See this example for a selector to avoid editing on the first column, or if you want to pick specific columns, see this example.

However if you make a change then it starts to get finicky when you click into the next field

You appear to be using server-side processing, so make sure you trigger inline editing with a cell index as shown in this example.

Moreover, are either of these tables going to have tens of thousands of rows? If so, fine, keep server-side processing enable. But if not, disable it, it will just make things more complicated.

Allan

shovon-choudhury · April 2023

@allan we have tried to follow your guideline and updated our implementation but the problem still persists. Could you please take a look here: https://www.smokeymo.xyz/bin/multi-level2 and guide us what we are doing wrong?
Regards,
Shovon Choudhury

allan · April 2023

Can you guide me again as to how to see the problem? I've just tried:

Click ID 1 in the parent table
Click "Name" for row id 1 in the child table.
Change the value
Click the "Favorite color" cell for that row
It submits, saves and then makes the colour column editable
Edit that and click back to name
It also works as expected.

Allan

rmeetin · April 2023

We (Shovon) solved the problem a little bit ago, not what you would think. These lines:

parentTable.on('deselect', function() { childTable.ajax.reload(); });
//childEditor.on('submitSuccess', function() { parentTable.ajax.reload(); });
//parentEditor.on('submitSuccess', function() { childTable.ajax.reload(); });

He commented out the childEditor and parentEditor lines and presto it is working.

allan · April 2023

Good to hear - thanks for the update.

Allan

Need a working solution where parent child edtor and DT method is properly implemented.

Need a working solution where parent child edtor and DT method is properly implemented.

Answers

Howdy, Stranger!

Categories

DataTables

Need a working solution where parent child edtor and DT method is properly implemented.

Need a working solution where parent child edtor and DT method is properly implemented.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables