Why Inline editing taking more space and flickering?

sparkstersajjad

I have created datatable with inline editing.
I have few question and issue.

1. while clicking the column of inline edit it's taking extra space from top and flickering.
2. How to get the data after mouse move out from the inline edit mode. Actually i want on onmousemove inine edit mode should close and the same it has to call one method with editable data.
3. How to delete the entire row data and get the deleted data details.
4. how to fecth the data immediatel after saving.

colin

while clicking the column of inline edit it's taking extra space from top and flickering.

That doesn't happen here - can you link to your page please so we can take a look.

Actually i want on onmousemove inine edit mode should close

You can create an onmousemove event, then call close() to close any opened edit.

How to delete the entire row data and get the deleted data details.

You can call remove(). postRemove can give you details about that record.

how to fecth the data immediatel after saving.

Changed data will be in postSubmit. The table will update automatically.

Colin

sparkstersajjad

Thanks Colin

sparkstersajjad

1. Inline Editing when click enter only it's updating the data in table. otherwise empty is printing. Actually I want on click of another column(for inline edit) and onclose (mouse out) it should update.

2. How do I get the updated data with column name on mouseout. Now i'm getting only updated data not column name.
   if you see my code i'm using on blur but i want in moustout event (please provide examples)

                      this.dtEditor = new $.fn.dataTable.Editor({  
                       table: '#dtGrid',
                       idSrc: this.uniqueField,
                       fields: this.dataTableFields,
                       formOptions: {
                         inline: {
                           onBlur:        'close',
                           onComplete:    'close',
   
                         }
                         }
                  });
   
                  $('#dtGrid').on( 'click', 'tbody td:not(:first-child)', function(e) {
                    self.dtEditor.inline(this, {
                     onBlur: self.getColumnData(this) // i'm am binding method here on blur but i want on mouseout of column(inline editing column)
                    });
                 });
   
                 getColumnData(val) {
                   console.log('DataTable', val);
                   console.log(JSON.stringify(this.dataObj));   
                  // this.saveData(val);
               }
   

colin

1. that's submit on blur - see example here

2. that's my second comment on my first reply above, but instead of close(), call submit() to submit the data.

Colin