Datatables inline select field doesn't select correct field

strachan.matthew

Hi all,

I have a datatables editor that is populated via ajax, as well as two select fields/dropdowns.

The fields show the correct value when out of inline edit mode... and the select boxes are being populated with the correct field.

My issue is when the user clicks on the field to edit, and the select box appears, the select box always selects the first option (or the placeholder if it is present). How can I make the field set to the value that was in the cell before editing?

$(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            ajax: "assets/helpers/inbox-media.php",
            table: "#inbox",
            idSrc: "mediaID",
            fields: [ {
                name: "description"
            }, {
                name: "type"
            }, {
                label: "Organisation",
                name: "orgName",
                type:  "select"
            }, {
                name: "statusID",
                type: "select"
            }, {
                name: "comment"
            }
            ]
        } );

        $('#inbox').on( 'click', 'tbody td.editable', function (e) {
            editor.inline( this, {
                buttons: { label: '<i class="fas fa-check"></i>', fn: function () { this.submit(); } }
            } );
        } );

        $('#inbox').DataTable( {
            dom: "Bfrtip",
            ajax: "assets/helpers/inbox-media.php",
            ordering: false,
            // order: [[ 1, 'asc' ]],
            columns: [
                { data: "description", className: 'editable' },
                { data: "type" },
                { data: "orgName", className: 'editable' },
                { data: "statusID", className: 'editable' },
                { data: "comment" }
            ]
        } );
    } );

And here is my json:

{"data":[{<<<data is all here>>>}],"options":{"orgName":[{"value":"2","label":"My Big Company"},{"value":"1","label":"Test Company"}]}}

Thanks

strachan.matthew

If I manually populate the list from the javascript, and remove the options array from the ajax, then it will automatically select the correct value from the dropdown when entering inline edit mode...

    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            ajax: "assets/helpers/inbox-media.php",
            table: "#inbox",
            idSrc: "mediaID",
            fields: [ {
                name: "description"
            }, {
                name: "type"
            }, {
                name: "orgName",
                type: "select",
                options: [
                    "My Big Company",
                    "Test Company",
                    "Yet another company"
                ]
            }, {
                name: "statusID"
            }, {
                name: "comment"
            }
            ]
        } );

So it seems there is an issue matching the data value of the cell with the list of options from ajax

EDIT:
If i add values to the javascript options, it also fails to automatically select the correct value from the drop down.

$(document).ready(function() {
        editor = new $.fn.dataTable.Editor( {
            ajax: "assets/helpers/inbox-media.php",
            table: "#inbox",
            idSrc: "mediaID",
            fields: [ {
                name: "description"
            }, {
                name: "type"
            }, {
                name: "orgName",
                type: "select",
                options: [
                    { label: "My Big Company", value: 2 },
                    { label: "Test Company",    value: 1 },
                    { label: "Yet another company",    value: 3 }
                ]
            }, {
                name: "statusID",
                type: "select",
                options: [
                    "Pending",
                    "Approved",
                    "Rejected"
                ]
            }, {
                name: "comment"
            }
            ]
        } );

colin

Hi @strachan.matthew ,

It would normally do that if the current value isn't in the set given at initialisation. I tried it here, and it seems to be behaving as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin