Inline Edit on select dropdown doesn't populate options

Matthew Czajka

Debugger code (debug.datatables.net): okayis
Error messages shown: There is no error message shown
Description of problem: I am trying to have inline editing with a dropdown select. The value of the field shows correctly but if I try to edit it the dropdown is empty. I'm not sure where I am missing a link to populate the dropdown with the available options.

rf1234

I'm not sure where I am missing a link to populate the dropdown with the available options.

Hard to tell without seeing any of your code ... This is one way to do this.

}, {
    label: "Your Dropdown"
    name:  "whatever",
    type:  "select",
    options: [                
        { label: "one", value: 1 },
        { label: "two", value 2 }
        { label: "three", value: 3 }
    ]
}, {               

Matthew Czajka

I am trying to populate the select dropdowns for StepType and Destination with the array coming back

This is my editor code:

    stepsEditor = new $.fn.dataTable.Editor({
        ajax: '/Admin/ManageSteps',
        idSrc: 'id',
        table: "#stepsTable",
        fields: [{
            label: "Step #",
            name: "stepNumber"
        }, {
            label: "Step Type:",
            name: "stepType",
            type: "select"
        }, {
            label: "Material:",
            name: "material"
        }, {
            label: "Destination:",
            name: "destinationId",
            type: "select"
        },  {
            label: "Set Point:",
            name: "setPoint"
        }, {
            label: "Time:",
            name: "time"
        }, {
            label: "Comments:",
            name: "comments"
        }
        ]
    });

This is my table code:

    $('#stepsTable').DataTable({
        dom: "Brt",
        ajax: {
            "type": "GET",
            "url": "/Admin/GetSteps",
            "contentType": "application/json; charset=utf-8",
            "data": { "requestId": formulaId },
            "dataType": "json",
            "dataSrc": function (json) {
                return json.data.data;
            }
        },
        columns: [
            {
                "data": 'stepNumber',
                "orderable": false,
                "editable": false
            },
            { "data": 'stepType.description', editField: 'stepTypeId' },
            { "data": 'material' },
            { "data": 'destination.destination', editField: 'destinationId' },
            { "data": 'setPoint' },
            { "data": 'time' },
            { "data": 'comments' },
            {
                data: null,
                defaultContent: '<i class="fa fa-trash" style="color:darkred"/>',
                className: 'row-remove dt-center',
                orderable: false
            },
        ],
        select: true,
        paging: false,
        buttons: {
            buttons: [{
                extend: "createInline",
                text: "+ Add New Step",
                editor: stepsEditor,
                position: 'end',
                formOptions: {
                    submitTrigger: -1,
                    submitHtml: '<i class="fa fa-check" style="color:green"/>'
                }
            }
            ],
            dom: {
                button: {
                    className: 'btn btn-primary'
                },
                buttonLiner: {
                    tag: null
                }
            }
        }
    });

Matthew Czajka

I was able to find out a solution. Rather than trying to use the data return for the table. I query the backend options separate and populate the select field directly away from the table.

Heres the code:

var destinationOptions = [];

$.getJSON("/Admin/GetDestinations", function (data) {
        var option = {};
        $.each(data, function (i, e) {
            option.label = e.destination;
            option.value = e.id;
            destinationOptions.push(option);
            option = {};
        });
    }
    ).done(function () {
        stepsEditor.field('destinationId').update(destinationOptions);
    });

allan

Thanks for the update - good to hear you've got it working.

Allan