Automatically select the whole row when clicking to inline edit

CT General Assembly

I have a scenario where I am allowing inline editing. I'm using ajax to store data. When I get back from my store, I want to do something to the selected row. This works fine if the user first selects the row and then clicks in an editable field. However, if they click directly in an editable field, the row is not selected. How can I either force the row to be selected or determine the row of the field I just edited?

allan

determine the row of the field I just edited?

This would probably be the better option I think. Use postEdit to get the data for the row that was updated, which will include the primary key so you can use that to select it from the DataTables API.

That said, if you do want to allow selection for inline editing, you probably have something like this on your page at the moment - instead of using selector: 'td:first-child' just use td. However, multiple clicks inside the field can do odd things to the selection!

Allan

CT General Assembly

The problem is that it is not the data that I want, but the actual row. Basically, what I'm doing is allowing the user to add data to a dropdown on-the-fly and then I want to add the new data to my drop down, select that value and trigger a click on the field to open the editor with that value selected. I could just set the data, but I'd rather have the user sitting in the editor looking at the data they just added and basically consciously choosing it from the list. Bottom line is that I need to know what row they are on. If the row is selected, I can do this

$("#tblExpenditures tr.selected td:eq(6)").trigger('click');

Without the row selected, I don't know how to force the inline editing of cell 6 of the row they just performed an inline edit on.

allan

postEdit is probably still the best way to do that, combined with the draw event:

editor.on( 'postEdit', e, json, data ) {
  table.one( 'draw', function () { // note the use of `one` rather than `on`
    for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
      var node = table.row( '#'+json.data[i].DT_RowId ).node();
      ...
    }
  } );
} );

Allan

CT General Assembly

I'm still not sure how to programmatically initiate the inline editing of the cell once I have the node. I want it to behave as if the user clicked on the cell.

allan

editor.inline( cellNode ); should do it.

Do you want to automatically jump to the next cell in the row when editing? Would KeyTable work for you (although its a left arrow or tab to jump to the next field).

Allan

CT General Assembly

Thank you Allan. I am using KeyTable as well. Unfortunately, the logic behind what we are doing is complicated. We are strictly using inline editing (including for a new row). Then to complicate matters, we have a custom button that allows users to add items to the select lists that are being used for selection of the data being edited.

I think I'm OK for now because I was able to select the row on postEdit.