Using the Editor with Select2 and AJAX to return JSON data for complete row of data

Graynoble

Hi all!

I am fairly new to the Editor (around 2 months now) and really loving it! I have run into an issue however and wanted to see if anyone had any input.

Issue and steps I am trying to get working:

1. Using a modal Editor Select2 field
2. Populate the Select2 field from JSON data fetched as a complete record (not just a value pair such as id:value text:label to show as below)
3. When the item is selected from the search, auto-populates a 'description' field and an 'item #' field from the Select2 search 'fetched' JSON data.

So far, I can get the value pairs back from the server in the form of:
id: item.description,
text: item.itemname

Which will populate the Editors "itemname" Select2 field and the readonly description field upon selection (using a editor.dependent function)

The issue is that I need to expand the return to include 2+ more items from the row returned and not just a value pair.

Any suggestions would be VERY appreciated as I have been battling this for almost a week! OR if I am even doing this the correct way?! I am open to all constructive criticism.

The code:

        var editor = new $.fn.dataTable.Editor({
            ajax: "",
            table: "#tableEdit",
            formOptions: {
                main: {
                    focus: null
                }
            },
            fields: [
                {
                    label: "Row ID",
                    id: "rowid",
                    name: "rowid"
                },
                {
                    name: "report",
                    id: "report",
                    def: $("#report_suid").val(),
                    type: "hidden"
                },
            {
                label: "Item Type:",
                name: "itemtype",
                id: "itemtype",
                type: "select2",
                message: "Choose 'Parents' or 'Children' to Search",
                options: [
                    { label: "PARENTS", value: "PARENTS" },
                    { label: "CHILDREN", value: "CHILDREN" }
                ],
                def: "PARENTS"
                opts: {
                    minimumResultsForSearch: -1,
                    allowClear: true,
                    theme: "bootstrap4"
                }
            },
            {
                id: "itemname",
                label: "Item Name:",
                name: "itemname",
                type: "select2",
                allowClear: true,
                opts: {
                    theme: "bootstrap4",
                    ajax: {
                        url: "the call to my server...",
                        type: "POST",
                        dataType: "json",
                        delay: 250,
                        data: function (params) {
                            var SearchParamsSent = {
                                search: params.term,
                                tblname: editor.field('itemtype').inst('val')
                            }

                            return SearchParamsSent;
                        },
                        processResults: function (data) {
                            debugger
                            return {
                                // the data.XXXX MUST BE THE PARENT FOR THE DATA/DICTIONARY COLLECTION
                                // in this case, in the JSON data, its "items".
                                // The item.id and item.text are the Value Pairs for the data.
                                //
                                //Note for when using Select2's remote Ajax data source option: In order to have the label 
                                //correctly render for an item being edited, the server-side script that is responding to the 
                                //Select2 requests must be able to accept a request with the parameters: 
                                // initialValue:true and value:...(i.e. the value). 
                                //The server must respond with { "id": value, "text": "Label to show" }.
                                results: $.map(data.items, function (item) {
                                    return {
                                        id: item.description,
                                        text: item.itemname
                                    }
                                })
                            }
                        }
                    },
                    minimumInputLength: 2,
                    minimumResultsForSearch: 10,
                    placeholder: "Select Name",
                    allowClear: true,
                    multiple: false
                }
            },
            {
                label: "Description:",
                id: "description",
                name: "description",
                type: "readonly"
            }, {
                label: "Quantity:",
                id: "quantity",
                name: "quantity",
                message: "Must be a numeric value between 1 and 999,999"
            }
            ]
        });

And here is how I populate the 'description' field with the information returning from the 'itemname' field

        editor.dependent('itemname', function (val, data) {
            editor.field('description').val(val);
        });

allan

Hi,

What you'll need to do here is use the Select2 API directly, using Editor's own API only to get the Select2 instance (editor.field('mySelect2Field').inst() will give you the Select2 instance).

Then you can use the Select2 data method. Its documentation says:

Each object will contain all of the properties/values that were in the source data objects passed through processResults and templateResult callbacks.

Which sounds like it is exactly what you are looking for - the ability to add extra parameters in your processResults objects and then get that information back.

Regards,
Allan

Graynoble

You are tha MAN!!!!!

badmihai

Can you post an example? I have the same problem