disable focus fields

disable focus fields

Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

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

Replies

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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
                        } )
                    )
                } },
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    use the formOptions.main object in this case:

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

    Allan

  • Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Thanks,
    Allan

  • Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

    Send you a PM

  • Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

    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' );
            }
        } );
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4
    edited October 2018

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

    Andreas

This discussion has been closed.