Issue with keys option

bbrindza

I can't seem to get the keys option to work in my DataTable. I'm using the latest version of dataTables.keyTable.min.js and set the initializing the keys option .

 table = $('#approvalTable').DataTable( {
    keys: true
} );

I'm only allowing 2 columns to be edited in line so my keys.keys is as follows...

keys: {
           columns: [6, 7 ],
            keys: [ 9 ],
           editor: editor,
           editOnFocus: true
 },

When I TAB out of the initial inline cell (column 6), the cursor does not move to the next inline cell (column 7).

Are there any know issue with this ?

allan

You say you are using keys: true and then show a keys option with an object. Which one is correct? You can only be using one of them (since keys can't take both values).

Allan

bbrindza

So if I need to tab between only 2 inline columns then I should just use the keys option

keys: {
           columns: [6, 7 ],
            keys: [ 9 ],
           editor: editor,
           editOnFocus: true
 }

And remove the keys:true?

If this is the case then would I still need the need the dataTables.keyTable.min.js?

bbrindza

Found the problem. I copied the wrong script to my dataTables.keyTable.min.js .

Sorry for wasting everyone's time.

bbrindza

So now that I have tabbing working between columns 6, 7, my server side script is failing in preEdit function when enter is press for submission on either of the 2 columns .

Undefined index: HRWCOM.

Values are not set in statement: if(trim($values['HRWCOM']) != '' )

allan

You'll probably need to use formOptions.inline and set the submit property to be allIfChanged since KeyTable uses whatever the Editor default is.

ALlan

bbrindza

Allan,
This works, however it is overriding my conditional activation an inline edit on click of a table cell.

// Activate an inline edit on click of a table cell
  $('#approvalTable').on( 'click', 'tbody td:not(:first-child):not(\'.live\')', function (e) {
           if ( userDepartment == '1214' || userDepartment == '1213' || userElementAccess =='Y') {
                editor.inline( this , {onBlur: 'submit',
                                       submit: 'allIfChanged'} );
              }
  });

I was wondering if I can and should use the same condition for the formOption if possible?

     formOptions: {
         inline: {
             onBlur: 'submit',
             submit: 'allIfChanged'
         }
     },

allan

That is correct - KeyTable calls the inline() method itself. It can't know that you've put your own event listener on the table.

If you want to use that instead of KeyTables' own, you'd need to drop the keys.editor option and instead use key to know when a key has been pressed, and then activate the inline editing from that event handler.

Allan

bbrindza

Allan,
I am a little lost on your suggestion, maybe I did not give you the proper explanation regarding the result I am trying to achieve

The keys.editor option is working as designed. It tabs between my 2 columns and also will trigger the inline method when enter is pressed.

My issue is with trying to suppress the ability of a user to edit the data inline. (Increase Percent & Review Score)

Only users that are in departments 1214 and 1213 can edit data inline .

This worked as expected up until I added...

formOptions: {
    inline: {
        onBlur: 'submit',
        submit: 'allIfChanged'
    }
},

Prior to adding the formOptions, I achieved this by using a conditional activation an inline edit on click of a table cell.

// Activate an inline edit on click of a table cell
  $('#approvalTable').on( 'click', 'tbody td:not(:first-child):not(\'.live\')', function (e) {
           if ( userDepartment == '1214' || userDepartment == '1213') {
                editor.inline( this , {onBlur: 'submit',
                                       submit: 'allIfChanged'} );
              }
  });

A user in department 1213 will see this...

After adding formOptions a user that should not have the ability to edit inline now has that ability.

I wanted to know if I can also condition formOptions as I did with the $('#approvalTable') onClick event ?

allan

The problem is that you are using KeyTables' ability to activate inline editing (as I understand your description). There is no option in KeyTables to optionally disable editing for a single cell based on a logic condition. You can disable it for a whole column, but not individual cells in that column (which I think is what you want?).

If that is the case, then you would need to not use KeyTables Editor integration, but rather have KeyTables activate your own event listener which does have the conditional logic.

Allan

bbrindza

Yes, I do want to disable for the whole column. With that said is there any examples of this you can refer me to.

allan

I'm afraid I don't have any specific examples for that. The jQuery trigger and KeyTables' key documentation would be where to start.

Allan

bbrindza

OK, I will take a bite at that apple.

bbrindza

Allan,

I took a look at the key event and it appears to me that it is used as a listening event for which key is press and not necessarily for enabling keys to perform as expected under certain conditions. ( I may be wrong)

I am a little surprised that by default a TAB key does not navigate the focus to the next available inline cell of a table.

Perhaps this is a result of the fixColum and conditional activation of an inline editing I am using and my lack of a full understanding regarding the detail functionality of DataTable Editor.

At this point I have spend a considerable amount of my time trying to get this to work and have hit a wall.

If there is any more insight or assistance you can offer, it would be warmly welcomed.

allan

I am a little surprised that by default a TAB key does not navigate the focus to the next available inline cell of a table.

It would do - but you have additional logic for triggering your inline edit, which KeyTable can't know anything about. You can limit by column without any problem, but as I say, you would need some custom code if you want to make that conditional.

I'm afraid I've got a backlog this week, but if I get a chance I'll try to take a look into it next week.

Allan

bbrindza

As always, I will make myself available whenever you have time.

Next week will work fine.

CT General Assembly

I have this exact scenario and have not had any luck getting the tab key to work with the custom event listener. Did you ever resolve it?

allan

Can you show me the code you are using please?

Bob - sorry I've not had a chance to get back to you yet. If you could create a test case on JSfiddle or http://live.datatables.net showing the problem I can dig into it.

Allan

bbrindza

Allan,
I went into a different direction on this application. Instead of using the fixed left and right columns, I use the Child Row option to show the data that was in the middle scrolling columns. This was well received by our users. I am convinced that keys option was in conflict with the fixed column option as well as the custom event listener. It appears I was really pushing the enveloped with DataTable Editor.

CT General Assembly

I ended up going in a different direction as well. I need the tab key, so I implemented my custom code in .node()).on('focus',

I am still having one strange problem though where the tab key works fine for existing records in a datatable, but after I add a new row using "create" (storing ajax) the tab key does not work. Once I save that record then the tab key works. This is my last stumbling block with allow users to create a record using inline editing by actually adding a row to the table rather than using a form.