Issues using inline editor

timmynz

Hello and thanks to everyone evolved in this great project. However i do have one problem that I am not sure how to tackle.

I am using ajax to populate the datatable from the server. I am also using inline editing to edit the data. The inline editing opens up, my select appears. NOW if I select out of the datatable then onblur triggers, server receives the data and returns the updated record and all is great.

However if a user is editing a field and then clicks another editable field I have issues. Onblur still triggers it receives the new record back and then does a redraw of the datatable. While this is happening it also tries to create a new inline editor for the newly selected field which fails because the datatable is currently being re drawn.

This means that the processing popup that appears never goes away or if I disable that then some very weird stuff happens that messes with my data integrity.

It seems then are a couple of ways to handle this:

1. Do not trigger a new inline editor if a field is currently being edited or datatable being redrawn
2. Don't redraw the datatable but then I still have to redraw the edited row with the new data.

What is the recommended approach to handle this. Many thanks!

''''
$('#TableScore').on('click', 'tbody td:not(:first-child)', function (e) {
//need to not trigger inline if inline is already activated
editorScore.inline(this, { onBlur: 'submit' });
});

allan

Editor's inline editing method has code in it to check if there is an existing inline editing item or not. If there is, it will queue the new inline edit until the previous one has been processed (and the table redraw).

An example of that is available here.

If that isn't working for you, could you link to a page that is showing the issue please?

Thanks,
Allan

timmynz

Hi Allan,

Yeah it seems like it is not doing that check for some reason.

I have created a very simple example and it has the same issue, you can access it here: http://datatablesissue.azurewebsites.net/home/test

If you edit the last name and click away then everything is fine. However if you click to edit the last name below while already in edit mode then you will see the issue.

Appreciate your help!

Thanks,
Tim

timmynz

Hi Allan,

Any thoughts on this issue?

Cheers

allan

Hi Tim,

Apologies - I missed your follow up!

I think the issue relates to the fact that the server isn't responding with the data that Editor is expecting in response to the edit command.

Currently it is sending back:

{ data: { userId: 1, fName: "Bob", lName: "Dylan1"} }

Editor expects:

{ data: [ {userId: 1, fName: "Bob", lName: "Dylan1"} ] }

The array is to allow for the multi-row editing feature.

You also have server-side processing enabled - do you really need that? Only with tens of thousands or more records should you really need server-side processing. With less records it just introduces complexity and network latency.

Regards,
Allan

timmynz

Hi Allan,

Thanks for your response. Some tables have 100,000+ records so I think using ajax makes sense.

I have adjusted according to your recommendation and unfortunately I still experience the same issue. Could it be anything to do with the scripts I am referencing? They all seem to be the latest version?

I am now returning this json :

{data: [{userId: 1, fName: "Bob", lName: "Dylany"}]}

cheers

timmynz

Hi Allan,

With server-side processing turned off then I don't experience the issue however I require server-side processing.

I was able to stop the error from happening by doing something like this:

$('#Participants').on('click', 'tbody td:not(:first-child)', function (e) {
            if (editorParticipants.display() == 'inline' && editorParticipants.displayed() == 'mobilePhone' ) {
                return;
            }
             editorParticipants.inline(this, { onBlur: 'submit' });
        });

So im pretty happy about that and that solution is sufficient however it does seem like something that should be built into datatables?

Anyway thanks for your great product and your prompt support!

Kind Regards,

Tim

allan

It very much is something that should be built in, and it is, although oddly it appears not to be working in this case. I'm going to try and reproduce it here and will post back with what I find.

Allan

allan

I've realised what I was missing. You need to convert this (passed into the inline() method) into a cell index using the cell().index() method. The reason for this is that when server-side processing is enabled, each redraw will refresh the table, resulting in the original cell no longer being in the document (it has been discarded and replaced). Using the cell index allows the reference to the correct cell to be maintained over the redraw.

So:

editorParticipants.inline( table.cell(this).index(), { onBlur: 'submit' });

should do the business.

Allan

timmynz

That solved it, Thanks!