KeyTable - Cancel Blur with Client Validation

KeyTable - Cancel Blur with Client Validation

bwallsbwalls Posts: 1Questions: 1Answers: 0

First off, great product love datatables & the editor..

I am working on a similar situation to this thread: https://datatables.net/forums/discussion/40248/cancel-key-blur-when-field-contains-errors

I am using inline editing, keytables, and submitting onblur, and am now attempting to add basic client validation using the preSubmit event.

If I edit a field with an invalid value and press enter, the error is shown. However, if I hit the tab key, the field reverts back to the original value and the next field has the focus w/o showing the original error. I tried using keys.disable(), but that does not seem to work.Seems like I need to cancel the keytables action somehow.

Here is the code I am using:

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

        var editor = new $.fn.dataTable.Editor({
            ajax: {
                url: "/ListView/ListViewAjaxUpdate",
                contentType: 'application/json',
                data: function(d) {
                    d.listId = '1';
                    return JSON.stringify(d);
                }
            },
            table: "#tblData",
            idSrc: 'RowId',
            fields: [
                        {
                            label: 'Test string field',
                            name: 'Id1'
                        },
                        {
                            label: 'Test int field',
                            name: 'Id2'
                        },
                        {
                            label: 'Another string field',
                            name: 'Id3'
                        }
            ]
        });

        // Activate an inline edit on click of a table cell and allow submit on blur.
        $('#tblData').on('click', 'tbody td:not(:first-child)',
            function () {
                editor.inline(this,
                    {
                        submitOnBlur: true
                    });
            }
        );

        var table = $('#tblData').DataTable({
            lengthChange: false,
            processing: false,
            filter: false,
            ordering: true,
            order: [[0, 'asc']],
            serverSide: true,
            dom: 'frtip',
            ajax: {
                url: "/ListView/ListViewAjaxGet",
                type: "POST",
                data: function(d) {
                    d.listId =
                        '1';
                }
            },
            columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                    {
                        title: 'Test string field',
                        data: 'Id1'
                    },
                    {
                        title: 'Test int field',
                        data: 'Id2'
                    },
                    {
                        title: 'Another string field',
                        data: 'Id3'
                    },
                {
                    title: "RowId",
                    data: "RowId",
                    visible: false
                }
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            keys: {
                columns: ':not(:first-child)',
                keys: [9],
                editor: editor,
                editOnFocus: true
            },
            buttons: [
                { extend: 'create', editor: editor, formTitle: 'New list item' },
                { extend: 'edit', editor: editor, formTitle: 'Edit list item' },
                { extend: 'remove', editor: editor, formTitle: 'Delete list item' }
            ],
            initComplete: function(settings, json) {
                $(this).DataTable().buttons().container().appendTo($('#tblDataButtons'));
            }
        });

        // Add basic client validation.
        editor.on('preSubmit',
            function(e, o, action) {
                if (action !== 'remove') {
                    if (!ClientValidationString(this
                            .field('Id1').val(), 256)) {
                            this.field('Id1')
                                .error('Must be less than 256 chars.');
                        }
                    
                    if (!ClientValidationInt(this
                            .field('Id2').val())) {
                            this.error('Id2')
                                .error('Must be an integer value.');
                        }
                    
                    if (!ClientValidationString(this
                            .field('Id3').val(), 256)) {
                            this.field('Id3')
                                .error('Must be less than 256 chars.');
                        }
                }
                // If any error, cancel.
                if (this.inError()) {
                    // This doesn't seem to work.
                    //table.keys.disable();
                    //table.keys.enable();
                    return false;
                }
                return true;
            }
        );
    });
</script>

Thanks!

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Thanks for posting this. Let me look into this and get back to you. I'll see if I can improve the handling in KeyTable for this sort of case.

    Allan

  • jayasbury@ferrellgas.comjayasbury@ferrellgas.com Posts: 12Questions: 3Answers: 0

     <!--Datatables links-->
         <link rel="stylesheet" type="text/css" href="~/Content/DataTables/datatables.css" />
         <script type="text/javascript" src="~/Content/DataTables/datatables.js"></script>
         <script src="~/Content/DataTables/Editor-1.8.1/js/dataTables.editor.js"></script>
         <link href="~/Content/DataTables/Editor-1.8.1/css/editor.dataTables.css" rel="stylesheet" />
         <link href="~/Content/DataTables/Buttons-1.5.1/css/buttons.dataTables.css" rel="stylesheet" />
         <script src="~/Content/DataTables/Buttons-1.5.1/js/dataTables.buttons.js"></script>
         <link href="~/Content/DataTables/KeyTable-2.5.0/css/keyTable.dataTables.css" rel="stylesheet" />
         <script src="~/Content/DataTables/KeyTable-2.5.0/js/dataTables.keyTable.js"></script>
         <script src="~/Content/DataTables/pdfmake-0.1.32/pdfmake.js"></script>
         <script src="~/Content/DataTables/pdfmake-0.1.32/vfs_fonts.js"></script>
         <link href="~/Content/DataTables/Responsive-2.2.1/css/responsive.dataTables.css" rel="stylesheet" />
         <script src="~/Content/DataTables/Responsive-2.2.1/js/dataTables.responsive.js"></script>
         <link href="~/Content/DataTables/RowGroup-1.0.2/css/rowGroup.dataTables.css" rel="stylesheet" />
         <script src="~/Content/DataTables/RowGroup-1.0.2/js/dataTables.rowGroup.js"></script>
         <link href="~/Content/DataTables/Select-1.2.5/css/select.dataTables.css" rel="stylesheet" />
         <script src="~/Content/DataTables/Select-1.2.5/js/dataTables.select.js"></script>
         <script src="~/Content/DataTables/Plugins/DateTime.js"></script>
    
    

    The text file is my javascript to init the table.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    What is your question?

  • jayasbury@ferrellgas.comjayasbury@ferrellgas.com Posts: 12Questions: 3Answers: 0
    edited February 2019

    Watch the gif. It would be nice to be able to show the error, let them fix the error, they press tab and it goes to the correct cell and lets them edit it.

This discussion has been closed.