disable focus fields

Andreas S.

I did not want, that the focus will set automatically on the first input field, if I open a create or edit windows. I tried it with the following code, but this did not work:

$( '#eventtable' ).on( 'click', 'tbody tr', function() {
        editor.create( this, {
            focus: null
        } );
        editor.edit( this, {
            focus: null
        } );
    } );

Has anyone some ideas what is wrong with my code?

Andreas

rf1234

I have just tried this and it worked fine:

$('#yourTable').on( 'click', 'tbody tr', function () {
    yourEditor.edit( this, {
        focus: null
    } );
} );

Your code doesn't really make sense to me.

You can't edit the row you click on and create a new one at the same time. You would probably need different events. Unless you want to open an Editor instance upon click on a single table row I would use the event on click of the Edit button. For create I don't see any other option than clicking on the Create button.

These buttons do the job. If you use these two buttons you don't need the code above at all:

buttons: [
    {   extend: "create",        editor: yourEditor,
                                 className: "createNoFocus",
            action: function ( e, dt, button, config ) {
                $('.createNoFocus').click(
                    yourEditor.create( {
                        focus: null
                    } )
                )
            } },
    {   extend: "edit",         editor: yourEditor, 
                                className: "editNoFocus",
            action: function ( e, dt, button, config ) {
                $('.editNoFocus').click(
                    yourEditor.edit( dt.rows({ selected: true }), {
                        focus: null
                    } )
                )
            } },

allan

use the formOptions.main object in this case:

var editor = new $.fn.dataTable.Editor( {
  ...,
  formOptions: {
    main: {
      focus: null
    }
  }
} );

Allan

Andreas S.

I try this, but the focus is always set to the first field (curser is in this field) of the editor windows.

allan

Can you give me a link to a page showing the issue please?

Thanks,
Allan

Andreas S.

Send you a PM

Andreas S.

I have implement the workaround from rf1234. That solve my focus problem, but I have a new Problem. If I enter a char in a inbox field I get following error:

Unable to get property 'isPersonal' of undefined or null reference

I think I have forgot something in my code, but I did not know what. This error is only in the create form. Have anyone a hint for me?

Andreas

Here my editor Code:

    editor = new $.fn.dataTable.Editor( {
        ajax: 'assets/php/pa-server-process.php?a=4',
        table: '#eventtable',
        display: 'bootstrap',
        idSrc: 'DT_RowId',
        template: '#customFormEvents',
        fields: [
            {
                label: 'Event name:',
                name: 'event_name'
            },{
                label: 'Begin:',
                name: 'bdate',
                type: 'datetime',
                format: 'YYYY-MM-DD',
                def: function() { return new Date(); }
            },{
                label: 'End:',
                name: 'edate',
                type: 'datetime',
                format: 'YYYY-MM-DD'
            },{
                label: 'City:',
                name: 'city',
            },{
                label: 'Cup:',
                name: 'cup',
                type: 'radio',
                options: [
                    { label: 'Yes', value: 'Y' },
                    { label: 'No', value: 'N' }
                ],
                def: 'N'
            },{
                label: 'Round:',
                name: 'cup-round',
                type: 'select',
                options: [
                    { label: '0', value: 0 },
                    { label: '1', value: 1 },
                    { label: '2', value: 2 },
                    { label: '3', value: 3 },
                    { label: '4', value: 4 },
                    { label: '5', value: 5 },
                    { label: '6', value: 6 },
                    { label: '7', value: 7 }
                ],
                def: 0
            },{
                label: 'Result saved:',
                name: 'results',
                type: 'radio',
                options: [
                    { label: 'Yes', value: 'Y' },
                    { label: 'No', value: 'N' }
                ],
                def: 'N'
            },{
                label: 'Event ID:',
                name: 'DT_RowId',
                type: 'readonly'
            },{
                label: 'ranking.csv:',
                name: 'fileId',
                type: 'upload',
                dragDrop: true,
                clearText: 'Remove file',
                dsiplay: function( id ) {
                    console.log( id );
                    return editor.file( 'file', id ).fileName;
                }
            }
        ]
    } );

And my Datatable:

    var paevent = $( '#eventtable' ).DataTable( {
        ajax: {
            url: 'assets/php/pa-server-process.php?a=3',
            type: 'POST'
        },
        autoWidth: false,
        select: true,
        serverSide: true,
        processing: true,
        ordering: false,
        pagingType: 'numbers',
        dom: "<'row'<'col-sm-4 DT_Buttons_Style'B><'col-sm-4'><'col-sm-4'>>rt<'row'<'col-sm-6'i><'col-sm-6'p>>",
        columnDefs: [
            { targets: 0, visible: true, className: 'text-right' },
            { targets: 1, visible: true, className: 'text-center' },
            { targets: 2, visible: true, className: 'text-center' },
            { targets: 3, visible: true, className: 'text-left' },
            { targets: 4, visible: true, className: 'text-left' },
            { targets: 5, visible: true, className: 'text-center' },
            { targets: 6, visible: true, className: 'text-center' },
            { targets: 7, visible: true, className: 'text-center' },
            { targets: 8, visible: true, className: 'text-center' },
            { targets: '_all', visible: false, searchable: false, orderable: false }
        ],
        columns: [
            {
                data: 'DT_RowId', width: '3%'
            },{
                data: 'bdate', width: '10%'
            },{
                data: 'edate', width: '10%'
            },{
                data: 'event_name'
            },{
                data: 'city'
            },{
                data: 'cup', width: '4%', render: function( data ) {
                    return ( 'Y' == data ) ? '<i class="far fa-check-circle text-green"></i>' : '';
                }
            },{
                data: 'cup-round', width: '4%'
            },{
                data: 'results', width: '4%', render: function( data ) {
                    return ( 'N' == data ) ? '<i class="far fa-times-circle text-red"></i>' : '<i class="far fa-check-circle text-green"></i>';
                }
            },{
                data: 'updated', width: '16%'
            }
        ],
        buttons: [
            {
                extend: 'create',
                editor: editor,
                text: '<i class="far fa-plus-hexagon"></i>',
                className: 'text-green bold createNoFocus',
                titleAttr: 'Add new event',
                action: function( e, dt, button, config ) {
                    $( '.createNoFocus' ).click(
                        editor.create( 
                            {
                                focus: null,
                                title: '<i class="far fa-plus-octagon"></i> Add new Event',
                                buttons: [
                                    'Add',
                                    { text: 'Cancel', action: function() { this.close(); } }
                                ]
                            }
                        )
                    )
                }
            },{
                extend: 'edit',
                editor: editor,
                text: '<i class="far fa-pencil"></i>',
                titleAttr: 'Edit Event',
                className: 'text-blue bold editNoFocus',
                action: function( e, dt, button, config ) {
                    $( '.editNoFocus' ).click(
                        editor.edit(
                            dt.rows( { selected: true } ),
                            {
                                focus: null,
                                title: 'Edit Event',
                                buttons: [
                                    'Edit',
                                    { text: 'Cancel', action: function() { this.close(); } }
                                ]
                            }
                        )
                    )
                }
            },{
                extend: 'remove',
                editor: editor,
                text: '<i class="far fa-trash"></i>',
                titleAttr: 'Delete Event',
                className: 'text-red bold',
                formButtons: [
                    'Delete',
                    { text: 'Cancel', action: function() { this.close(); } }
                ]
            }
        ],
        initComplete: function( data ) {
            $( '#eventtable' ).removeClass( 'd-none' );
        }
    } );

allan

I'm not sure where that error is coming from. I don't see isPersonal in your code anywhere above.

Allan

Andreas S.

oh, I see now where the problem comes. I is a extension in the edge browser ( Bing Translator)

Andreas