Editor form - Set initial value of select to row value (if consistent)

Tango_alee

I have a question very similar to: [This One] (https://datatables.net/forums/discussion/48510/select-field-type-how-to-set-default-value "https://datatables.net/forums/discussion/48510/select-field-type-how-to-set-default-value")

I have a table with a main edit form - that I want to control the inputs via a dropdown. I want to have the dropdown be pre-selected with the value in the row, not default to the initial value.

This is a screenshot of the issue:

here is my javascript

editor = new $.fn.dataTable.Editor({
            table: '#example',
            fields: [],
            idSrc: 'id',
            ajax: function (method, url, d, success, error) {
                var output = {data: []};
                if (d.action === 'edit') {
 
                    $.each(d.data, function (key, value) {
 
 
                        var url_str = "my_url/editor_endpoint/";
 
 
                        $.ajax({
                            type: 'PUT',
                            url: url_str,
                            data: value,
                            dataType: "json",
                            success: function (json) {
 
                                output.data.push(json);
 
                                success(output);
                            },
                            error: function (xhr, error, thrown) {
                                console.log(xhr.responseText);
                            }
                        });
                    });
                }
            }
        });
 
        editor.add({
            label: "Division:",
            name: 'division_id',
 
        });
 
        function unescape(string) {
            var newstr = string.substr(1).slice(0, -1);
            return newstr.replace(/\\(.)/g, function ($0, $1) {
                return $1;
            });
        }
 
 
        $(document).ready(function () {
            var table = $('#example').dataTable({
                    dom: '<"row"<"col-md-3"l><"col-md-3"B><"col-md-3"i><"col-md-3"f>><rt><"row"<"col-md-6"i><"col-md-6"p>>',
                    select: true,
                    buttons: [
                        {extend: 'edit', editor: editor}
                    ],
                    ajax: '/summary_data_info_super/?format=json',
                    "columns": [
                        {"data": "id"},
                        {"data": "eo_role", "defaultContent": "N/A"},
                        {"data": "division", "defaultContent": "N/A"},
                        {"data": "product_name"},
                        {"data": "category"},
                    ],
 
                    stateSave: true,
                    stateDuration: -1,
//the following is for dropdown column filtering
 
                    initComplete: function () {
                        var state = this.api().state.loaded();
                        this.api().columns([1, 2, 4]).every(function () {
                            var column = this;
                            var colID = column.selector.cols;
                            var select = $('<select><option value="">-------</option></select>')
                                .appendTo($(column.header()))
                                .on('change', function () {
                                    var val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );
                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });
                            if (state) {
                                var colSearch = state.columns[colID].search.search;
                                column.data().unique().sort().each(function (d, j) {
                                    if (d == null) {
                                        if (unescape(colSearch) == "N/A") {
                                            select.append('<option value="N/A" selected>N/A</option>');
                                        } else {
                                            select.append('<option value="N/A">N/A</option>')
                                        }
                                        ;
                                    } else {
                                        if (unescape(colSearch) == d) {
                                            select.append('<option value="' + d + '" selected>' + d + '</option>');
                                        } else {
                                            select.append('<option value="' + d + '">' + d + '</option>');
                                        }
                                        ;
                                    }
                                    ;
                                });
                            } else {
                                column.data().unique().sort().each(function (d, j) {
                                        if (d == null) {
                                            select.append('<option value="N/A">N/A</option>');
                                        }
                                        else {
                                            select.append('<option value="' + d + '">' + d + '</option>');
                                        }
                                        ;
                                    }
                                );
                            }
                            ;
                        });
 
                    }
                }
            );
        });

allan

That error suggests that the value of division_id that matches Endo isn't available in the list of options. Can you show me the data bring returned from /summary_data_info_super/?format=json please?

Thanks,
Allan

Tango_alee

Thanks for your help Allan, It was due to the "division_id" portion. It should have been 'division', as well as I needed to add a preOpen listener:

 editor.on('preOpen', function (e, mode, action) {
                //get the data of rows in editing
                var rowModifier = editor.modifier();
                var data = table.row(rowModifier).data();

                //division check
                if (editor.field('division').isMultiValue() === false){
                    editor.val('division', data.division_id);
                }
                //eo_role check
                if (editor.field('eo_role').isMultiValue() === false){
                    editor.val('eo_role', data.eo_role_id);
                }
                //category check
                if (editor.field('category').isMultiValue() === false){
                    editor.val('category', data.category_id);
                }
            });