Multiple Values selected message not appearing and initial value not appearing on editor form

Multiple Values selected message not appearing and initial value not appearing on editor form

Tango_aleeTango_alee Posts: 8Questions: 3Answers: 0

I've got several issues:

First and foremost important - I am not getting the "Multiple values Selected" message/functionality of the examples (here for example.

Ideally Division would be a select dropdown with the options populated, but currently I'll just take the "multiple values" warning.

I'm using the latest CDN and editor
Here is the datatables debugger code: idibic

here is my html:

<div class="container-fluid">
        <table id="example" class="display table" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>#</th>
                <th>Economic Operator Role</th>
                <th>Division</th>
                <th>Product name</th>
                <th>Product Category</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>

and 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>'); } ; } ); } ; }); } } ); });

Answers

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    Do you mean the "1 row selected" message shown just below the table?

    The debug trace shows:

    <div class="dataTables_info" id="example_info" role="status" aria-live="polite">
      Showing 1 to 10 of 660 entries
      <span class="select-info">
        <span class="select-item">1 row selected</span>
      </span>
      ...
    

    On your page, so it does appear to be there. Perhaps it is being hidden by some CSS? If you can give me a link to the page I can take a look.

    Thanks,
    Allan

  • Tango_aleeTango_alee Posts: 8Questions: 3Answers: 0

    Sorry for confusion - I mean on the editor form.
    When I select multiple rows which have different values in the division tab, and then click the edit button.

    The edit form pops up, and on the example shows "Multiple Values", along with the helper text of how to interact and the undo link.

    What my form shows is:

    So is there a configuration that I'm missing?

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @Tango_alee ,

    In the example here, it's setting the scope, like this:

            formOptions: {
                main: {
                    scope: 'cell' // Allow multi-row editing with cell selection
                }
            }
    

    I'm not sure if that's the key, but it's worth trying,

    Cheers,

    Colin

  • Tango_aleeTango_alee Posts: 8Questions: 3Answers: 0

    @colin Sadly - doesn't look like it worked.

    @allan Any thoughts? Bought Editor for the multi-row capabilities but I'm struggling HARD for some reason. Thanks for any help

  • allanallan Posts: 63,455Questions: 1Answers: 10,465 Site admin

    There isn't anything obvious in the code above that suggests why multi-row editing wouldn't be working. Could you give me a link to your page so I can check it out? You can PM me the address by clicking my name above and then Send message if you don't want to make it public.

    Thanks,
    Allan

  • Tango_aleeTango_alee Posts: 8Questions: 3Answers: 0

    @allan - its a private website, is there an place that I could mock it with dummy data?

  • Tango_aleeTango_alee Posts: 8Questions: 3Answers: 0

    Nevermind - I have figured it out but ran into a new problem which I'll start a new thread for

    The issue was this snippet

     editor.add({
                label: "Division:",
                name: 'division_id',
     
            });
    

    notice the name 'division_id' doesn't match the column definitions:

    "columns": [
                            {"data": "id"},
                            {"data": "eo_role", "defaultContent": "N/A"},
                            {"data": "division", "defaultContent": "N/A"},
                            {"data": "product_name"},
                            {"data": "category"},
                        ],
    
This discussion has been closed.