Inline editing not working

jonr

Hi all,

I am struggling to get DataTables to load data via FataTables own embedded ajax call however, I am quite happy with the way the tables are working when I simly prepare a json data stream myself and pass it to the table.

However, I am struggling with inline editing and I wonder whether this should be in a different question.

It starts here:

https://datatables.net/forums/discussion/comment/109552/#Comment_109552

and goes down a couple of replies.

If I can get inline editing working I am almost ready to start using DataTabes.

any thoughts anyone?

thanks

jON

allan

The inline editing makes use of Ajax, so we probably need to resolve the Ajax load issue first.

Allan

jonr

I have implemented Allans fix for my ajax data load now and have the function to launch my dataTable in a Modal box like this:

    function getActuals(job) {

        var Criteria = { Rno: job.Rno };

        editor = new $.fn.dataTable.Editor({
            table: "#actuals",
            idSrc: 'ID',
            fields: [{
                label: "Hole No:",
                name: "HoleNo"
            }, {
                label: "Task:",
                name: "Task"
            }, {
                label: "Length:",
                name: "Length"
            }, {
                label: "Number:",
                name: "Number"
            }, {
                label: "Width:",
                name: "Width"
            }, {
                label: "Depth:",
                name: "Depth"
            }
        ]
        })

        var table = $('#actuals').DataTable({
            // gives unknown button type - dom: "Bfrtip",
            destroy: true,
            ajax: {
                url: "PlanF.aspx/GetMeasures",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                data: function (data) {
                    data.Criteria = Criteria;
                    return JSON.stringify(data);
                },
                dataSrc: "d"
            },
            ordering: false,
            searching: false,
            columns: [
                { "data": "HoleNo" },
                { "data": "Task" },
                { "data": "Length" },
                { "data": "Number" },
                { "data": "Width" },
                { "data": "Depth" }
            ]
            ,
            keys: {
                columns: ':not(:first-child)',
                keys: [9],
                editor: editor
            },
            select: {
                style: 'os',
                selector: 'td:first-child',
                blurable: true
            },
            formOptions: {
                inline: { onBlur: 'submit' }
            }
        });

        $(".modal-title").text("Job: " + job.Rno + " - Actual Measures");
        $(".modal").modal("show");

        // Inline editing on click
        $('#actuals').on('click', 'tbody .even td:not(:first-child)', function (e) { editor.inline(this); });

        // Inline editing on tab focus
        $('#actuals').on('key-focus', function (e, datatable, cell) { debugger; editor.inline(cell.index()) });

        // Disable KeyTable while the main editing form is open
        editor
            .on( 'open', function ( e, mode, action ) {
                if ( mode === 'main' ) {
                    table.keys.disable();
                }
            } )
            .on( 'close', function () {
                table.keys.enable();
        } );

        return false;

    }

I have taken the onclick function calls from articles on this site and also the last section that disables/enables keys functioanlity mainly from two articles that talk about inline editing.

I want to use a tab between fields like a spreadsheet.

If I exclude everything below the

modal("Show")

line then no field editing at all seems to be possible.

If I include the two on() assigments then the click function appears to work, checked with a debugger statement. However, the tab functionality does not work at all and never gets called as far as I can see.

If I include all the above options then all that works in the click and a tab out of that box continues standard window processing and tab takes me to the next button on my page.

however when I close my form I get an error in the on('close') call "cannot read property enable of undefined"

and still no tabbing works.

jON

jonr

and does anyone know how to stop the inline field "title" from appearing, I can find no mention of this but I would really rather it didn't take up space as my datatable is rarely going to be longer than 10 rows.

thanks

jON

allan

and does anyone know how to stop the inline field "title" from appearing

Have you included the Editor CSS files? The field label should be hidden by the Editor CSS when in inline mode.

If I exclude everything below the [...]

Since this is inside a function, could you add var in front of the editor = stuff please? Otherwise it is going up to the global scope. That is useful in the demo scripts, since it allows my demo support code access to the variable, but it might just cause conflicts here.

Remove these lines:

    // Inline editing on click
    $('#actuals').on('click', 'tbody .even td:not(:first-child)', function (e) { editor.inline(this); });
 
    // Inline editing on tab focus
    $('#actuals').on('key-focus', function (e, datatable, cell) { debugger; editor.inline(cell.index()) });

You want to use this example as the basis. Triggering inline() on click or tab is not required as you'll see in that example. KeyTable will do it for you.

however when I close my form I get an error in the on('close') call "cannot read property enable of undefined"

Can you give me the full backtrace if this is still an issue with the above changes please.

Allan

jonr

Good morning Allan.

I have changed editor scope so editor and table variables are local.

Removed the inline editing lines.

and also removed the extraneous keys: [9] from the code.

Now no editing is enabled.

I can't see anything else from the suggested example that I am missing.

TAB will move between elements on the page but no editing is enabled.

jON

allan

Just in case: you need to start typing on the focused cell to edit it, like in the example.

Failing that, I would really need a link to a page showing the issue so it could be debugged I'm afraid. I'm not sure why it would work correctly in the demo, but not locally for you if the code is basically the same.

Allan

jonr

I can't focus on any of the fields ...

All I can do is select the row.

In the example, I can click on a cell and it is highlighted in blue and I can then edit text.

Nothing on my page can be clicked apart from the save/close buttons.

The text boxes are not tabstops.

can I email you a link as its in progress but a private system which I don't want to expose before I have locked it down with a username/password?

thanks

jON

allan

Absolutely - you can drop me an email at allan @ this.domain.net or send me a PM by clicking my name above and then "Send message".

Thanks,
Allan