Editor DropDowns Not Working

aatkins

Probably doing something wrong on a very basic level here, but I'm trying to just get the results of an API call to populate a DataTable and editor drop-downs populated. The data loads just fine but I can't get values in the drop-down.

JSON Snippet:

{
    "data":[]
    ,"draw":"1"
    ,"recordsFiltered":0
    ,"recordsTotal":0
    ,"options":[
        {"itemNo":[
            {"id":"123","name":"PC2011"}
            ,{"id":"234","name":"PC2012"}
            ,{"id":"345","name":"RA0170"}
            ,{"id":"456","name":"RG3042"}
            ,{"id":"567","name":"RV2050"}
        ]}
        ,{"loc":[
            {"id":"BRW","name":"Brodhead WH"}
            ,{"id":"FBP","name":"Bethlehem"}
            ,{"id":"FIC","name":"Innovation Ctr"}
            ,{"id":"GTP","name":"Godshalls"}
        ]}
    ]
}

Relevant Area of Editor:

...
fields: [{
                label: "Item Number:",
                name: "itemNo",
                type: "select",
                optionsPair: {
                    label: "itemNo.name",
                    value: "itemNo.id"
                }
            }, {
                label: "From Location:",
                name: "fromLoc"
            }, {
                label: "To Location:",
                name: "toLoc"
            }, {
                label: "Quantity:",
                name: "remaining"
            }]
...

This has got to be something very simple I'm missing, anybody spot it?

colin

Hi @aatkins ,

This thread should help, it's asking the same thing.

Cheers,

Colin

aatkins

I saw that thread, but my JSON looks almost exactly like Allan's answer and it still doesn't work. The thread also ends without displaying the final resolution (was taken offline). Still need help and don't understand why my code doesn't work.

allan

Change:

                optionsPair: {
                    label: "itemNo.name",
                    value: "itemNo.id"
                }

to be:

                optionsPair: {
                    label: "name",
                    value: "id"
                }

It already knows to use itemNo from the field name.

Allan

aatkins

Thanks Allan, that's what I thought at first as well, but it doesn't work, still an empty drop-down.Below is JSON stream with actual data if it helps at all. I seriously don;t get why this is not working...

{
    "data": [{
            "suggestionID": 0,
            "selected": 0,
            "dock": "A",
            "itemNo": "RA0170",
            "itemDesc": "Whole Dried Egg",
            "uoM": "lbs",
            "fromLoc": "DIS",
            "toLoc": "FBP"
        }, {
            "suggestionID": 1,
            "selected": 0,
            "dock": "A",
            "itemNo": "RV2050",
            "itemDesc": "Peas - Chopped",
            "uoM": "lbs",
            "fromLoc": "DIS",
            "toLoc": "FBP"
        }
    ],
    "draw": "1",
    "recordsFiltered": 2,
    "recordsTotal": 2,
    "options": [{
            "itemNo": [{
                    "id": "PC2011                        ",
                    "name": "PC2011"
                }, {
                    "id": "PC2012                        ",
                    "name": "PC2012"
                }, {
                    "id": "RA0170                        ",
                    "name": "RA0170"
                }, {
                    "id": "RG3042                        ",
                    "name": "RG3042"
                }, {
                    "id": "RV2050                        ",
                    "name": "RV2050"
                }
            ]
        }, {
            "loc": [{
                    "id": "BRW",
                    "name": "Brodhead WH"
                }, {
                    "id": "FBP",
                    "name": "Bethlehem"
                }, {
                    "id": "FIC",
                    "name": "Innovation Ctr"
                }, {
                    "id": "GTP",
                    "name": "Godshalls"
                }
            ]
        }
    ]
}

Changing the editor to this did not show anything in the dropdown when clicking the "Add Item" button:

editor = new $.fn.dataTable.Editor({
            ajax: 
                function (method, url, data, success, error) {
                    if (data.action == "create") {
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Content("~/Transit/AddTransitMain")',
                            dataType: "json",
                            data: {
                                ItemNumber: data.data[0].itemNo,
                                FromLocation: data.data[0].fromLoc,
                                ToLocation: data.data[0].toLoc,
                                TransferQty: data.data[0].remaining
                            },
                            success: function (json) {
                                success(json);
                            },
                            error: function (xhr, error, thrown) {
                                error(xhr, error, thrown);

                            }
                        });
                    }
                },
            table: "#gridTransitMain",
            fields: [{
                label: "Item Number:",
                name: "itemNo",
                type: "select",
                optionsPair: {
                    label: "name",
                    value: "id"
                }
            }, {
                label: "From Location:",
                name: "fromLoc"
            }, {
                label: "To Location:",
                name: "toLoc"
            }, {
                label: "Quantity:",
                name: "remaining"
            }]
        });
        $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn btn-outline-primary';

        $("#gridTransitMain").DataTable({
...
...
buttons: [
                {
                    text: "Add Item",
                    extend: "create",
                    style: "float: right;",
                    classList: "btn btn-outline-primary",
                    editor: editor
                }
            ],
...
...

aatkins

Still don't know why it won't work the way above, but I managed to break out the ajax call into an object and parse the options into two arrays, which then successfully worked with the update() function:

       editor.field('itemNo').update(
            optionsItemNo
        );
        editor.field('toLoc').update(
            optionsLoc
        );
        editor.field('fromLoc').update(
            optionsLoc
        );

I'm thinking maybe the JSON is nested too deep, as I needed two loops to get at the options for the dropdown:

dataSuggestions = function () {
            var tmp = null;
            $.ajax({
                async: false,
                url: '@Url.Content("~/Transit/LoadTransitMain")',
                type: "GET",
                "datatype": "json",
                'success': function (data) {
                    tmp = data;
                    // Create array for items drop down in editor
                    var option = {};
                    $.each(data.options[0], function (i, e) {
                        $.each(e, function (o, p) {
                            option.label = p.name;
                            option.value = p.id;
                            optionsItemNo.push(option);
                            option = {};
                        });
                    });
                    // Create array for to/from loc drop down in editor
                    option = {};
                    $.each(data.options[1], function (i, e) {
                        $.each(e, function (o, p) {
                            option.label = p.name;
                            option.value = p.id;
                            optionsLoc.push(option);
                            option = {};
                        });
                    });
                }
            });
            return tmp;
        }();

I'm calling a custom API to generate the object in the first place, must have not gotten something right on the back end to make it an extra layer deep. Regardless, it's working now, if not round-about (it so happens I need to maintain the data sources outside of the grids anyway, so win-win).