KeyTable acting strange when attached to an Editor with an inline select

KeyTable acting strange when attached to an Editor with an inline select

FreundFreund Posts: 6Questions: 2Answers: 0
edited February 2023 in KeyTable

Not sure if this should go in KeyTable or Editor category.
I have a setup with editor, keytables and inline editing with a selectize.
If I enter hard edit, with a click or enter key, and then don't select anything but instead hit escape. The inline editing then close without submitting, as it default should. But when I then use the down arrow, it looks like inline editing is entered again and the first option from the select is added and editing is closed again, before moving to next row.

I am using latest KeyTable and Editor library.

I can replicate the issue with a regular select, see below. Anything I am misunderstanding here? Thanks

    <table id="example" class="table table-striped" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011-04-25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011-07-25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009-01-12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012-03-29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008-11-28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012-12-02</td>
                <td>$372,000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

    <script type="text/javascript">
        $(document).ready(function () {

            var editor, datatable

            editor = new $.fn.dataTable.Editor({
                table: $('#example'),
                fields: [
                    {
                        label: "Name",
                        name: "DT_RowId"
                    },
                    {
                        label: "Position",
                        name: "position"
                    },
                    {
                        label: "Office",
                        name: "office",
                        type: 'select',
                        options: [
                                {label: 1, value: 'Spectrometer'},
                                {label: 2, value: 'Star Chart'},
                                {label: 3, value: 'Electrical Tape'}
                        ],
                    }
                ],
            });

            datatable = $('#example').DataTable({
                pagingType: 'full_numbers',
                columns: [
                    { data: "DT_RowId" },
                    { data: "position" },
                    { data: "office" },
                    { data: "age" },
                    { data: "start_date" },
                    { data: "salary" }
                ],
                keys: {
                    editor: editor,
                    editorKeys: 'navigation-only',
                    columns: [ 2 ],
                },
            });
        });

    </script>

Answers

  • FreundFreund Posts: 6Questions: 2Answers: 0
  • FreundFreund Posts: 6Questions: 2Answers: 0

    Looks like editor stays in edit mode after hitting escape.
    So inline mode seems to be closed, but instead of mode being null, it shows to be in edit mode.
    That must be why - after ESC when using arrow down - editor adds first option from the select to the cell and then closes edit mode.

    I am only using inline mode, so my work around here is to have KeyTable to ignore everything else but inline mode. I hope that will work.

Sign In or Register to comment.