dependent() method with inline editing

aachevalier

Hello! I'm using inline editing and I'm having trouble using the dependent() method on a select type field. The event should be triggered only when the value of the select is changed, but instead it gets triggered everytime I click on a table cell (which transforms into an inline editing field)

Here is my code :

editor = new $.fn.dataTable.Editor({
    ajax: {
        create: settings.createUrl,
        edit: settings.editUrl,
        remove: settings.removeUrl
    },
    table: settings.tableSelector,
    idSrc: "entree.id",
    fields: [
        {
            label: "Titre général",
            name: "entree.titreGeneral"
        },
        {
            label: "Type",
            name: "entree.type.value",
            type: "select",
            options: [
                {
                    label: "Public",
                    value: "public"
                },
                {
                    label: "Professionnel",
                    value: "pro"
                }
            ]
        },
        {
            label: "Format",
            name: "entree.format"
        },
        {
            label: "Catégorie",
            name: "entree.categoriePrincipale.value",
            type: "select"
        },
        {
            label: "Sous-catégories",
            name: "sousCategories[].id",
            type: "select2",
            attr: {
                'multiple': true
            }
        },
        {
            label: "Région(s)",
            name: "regions[].id",
            type: "checkbox"
        },
        {
            label: "Titre FR",
            name: "entreeTraduction.fr.titre"
        },
        {
            label: "Titre EN",
            name: "entreeTraduction.en.titre"
        }
    ]
});

editor.dependent('entree.categoriePrincipale.value', function (val, data, callback) {
    console.log(val);
});

datatable = $table.DataTable({
    dom: 'Tfrtip',
    processing: true,
    serverSide: true,
    ajax: settings.readUrl,
    columns: [
        {
            data: null,
            defaultContent: '<input type="checkbox" />',
            orderable: false
        },
        {
            data: "entree.id"
        },
        {
            data: "entree.titreGeneral",
            className: "editable"
        },
        {
            data: "entree.type",
            className: "editable",
            editField: "entree.type.value",
            render: {
                _: "value",
                display: "label"
            }
        },
        {
            data: "entree.format",
            className: "editable"
        },
        {
            data: "entree.categoriePrincipale",
            className: "editable",
            editField: "entree.categoriePrincipale.value",
            render: {
                _: "value",
                display: "label"
            }
        },
        {
            data: "sousCategories",
            className: "editable",
            editField: "sousCategories[].id",
            render: "[, ].name"
        },
        {
            data: "regions",
            className: "editable",
            editField: "regions[].id",
            render: "[, ].name"
        },
        {
            data: "entreeTraduction.fr.titre",
            className: "editable"
        },
        {
            data: "entreeTraduction.en.titre",
            className: "editable"
        },
        {
            data: null,
            orderable: false,
            defaultContent: '<button type="button" class="btn btn-default btn-xs btn_modifier"><span class="glyphicon glyphicon-pencil"></span> Modifier</button> &nbsp;' +
                            '<button type="button" class="btn btn-default btn-xs btn_supprimer"><span class="glyphicon glyphicon-trash"></span> Supprimer</button>'
        }
    ],
    columnDefs: [{
        targets: "_all",
        createdCell: onCreatedCell
    }],
    order: [1, 'asc'],
    tableTools: {
        sRowSelect: "multi",
        sRowSelector: 'td:first-child input[type="checkbox"]',
        aButtons: [],
        fnRowSelected: onRowSelected,
        fnRowDeselected: onRowDeselected
    }
});

$table.on('click', 'tbody td.editable', function(e) {
    editor.inline(this, {
        submitOnBlur: true
    });
});

allan

The event should be triggered only when the value of the select is changed, but instead it gets triggered everytime I click on a table cell

The select is having its value set when you click on the table cell to activate the editing (i.e. it is being set to the current value).

Normally that is a desirable action so that the dependent field is up-to-date with the value being edited - is that not the case here?

Allan

aachevalier

What I meant is that it gets triggered on every other cell/field too. I have an ajax request in the dependent() callback to get some data depending on the value of the select. But right now this ajax request is executed everytime I want to edit anything.

allan

Ah I see - the reason for that is that Editor is a row editor at the moment, so even when you edit a single cell, it is actually submitting the full row. That is something I plan to address in a future release, but unfortunately is the way it works at the moment. Sorry.

Allan

shaunarmbrust

I'm having a similar issue - The fields that are dependant, and are having their select values set by an ajax call, don't have the values when the update ajax call is done.

If I check the values of table.row(0).data() in the preSubmit event, they are correct. But the values of the fields (who had their option list updated) never make it to the server in the update ajax call.

Any ideas/work around?

Thanks

allan

Editor 1.5's inline editing mode will submit only the field value that has been edited, which should resolve this issue (if I'm understanding correctly). Editor 1.5 will be available next week. In the mean time, the only work around is to use preSubmit to remove the fields that you don't want to be updated.

Allan