Inline Create Add Dynamic Data

Pierre-Louis

Hi, i'm trying to add dynamic data after the user clicks an inline create button, but i can't figure out how.
The only data i found in editor is def, but the data isn't dynamic. Is there a way to do it ?

      articlePrixRefsTable = $('#articlePrixRefsTable').DataTable({
          columns: [
              {
                  data: 'Annee',
                  name: 'Annee'
              },
              {
                  data: 'PrixReference',
                  name: 'PrixReference',
                  render: function (data, type, row) {
                      if (type == "display")
                          return `<div>${parseFloat(data).toFixed(2)}</<div>`;
                      return data;
                  }
              },
              {
                  data: 'TempsGameRetenuCalc',
                  name: 'TempsGameRetenuCalc',
                  render: function (data, type, row) {
                      if (type == "display")
                          return `<div>${parseFloat(data).toFixed(2)}</<div>`;
                      return data;
                  }
              },
              {
                  data: 'CoefTemps',
                  name: 'CoefTemps'
              },
              {
                  data: 'TempsGammeStdCalc',
                  name: 'TempsGammeStdCalc'
              },
              {
                  data: 'PctRebut',
                  name: 'PctRebut'
              },
              {
                  data: 'IsAchete',
                  name: 'IsAchete',
                  render: (data, type, row) => 
                      type === "display" ?
                          '<input type="checkbox" disabled class="editor-active">' : data,
                      className: 'dt-body-center'
              },
              {
                  data: 'CodeSourceListe2',
                  name: 'CodeSourceListe2',
                  render: (data, type, row) => {
                      if (type === "display") return listCodeSource.find(o => o.value == data)?.label
                      return data;
                  }
              },
              {
                  data: 'DateCreation',
                  name: 'DateCreation',
                  render: function (data, type, row) {
                      if (type === "display")
                          return new Date(data).toLocaleDateString() ?? data;
                      return data;
                  }
              },
              {
                  data: 'IdArticlePrixRef',
                  name: 'IdArticlePrixRef',
                  visible: false
              }
          ]
      });
  }


  articlePrixRefsTableEditor = new DataTable.Editor({
      table: $('#articlePrixRefsTable'),
      idSrc: 'IdArticlePrixRef',
      fields: [
          {
              name: 'Annee',
              def: new Date().getFullYear(),
              type: 'readonly'
          },
          {
              name: 'PrixReference',
              def: 0.00,
              type: 'readonly'
          },
          {
              name: 'IsAchete',
              type: 'readonly',
              /*type: 'checkbox',
              separator: "|",
              options: [
                  { label: '', value: 1 }
              ]*/
          },
          {
              name: 'CodeSourceListe2',
              type: 'select',
              options: listCodeSource
          },
          {
              name: 'DateCreation',
              type: 'readonly',
              def: new Date().toLocaleString()
          },
          {
              name: 'CoefTemps',
              def: ''
          }
      ]
  })


  articlePrixRefsTable.on('click', 'tbody td:first-child,td:nth-child(2),td:nth-child(8)', function (e) {
      articlePrixRefsTableEditor.inline(this);
  })

  articlePrixRefsTableEditor.on('submitSuccess', () => {
      enableSaveButton();
  })

  $('#btnAddRowPrixRefsTable').on('click', function () {

// ajax call here to add dynamic data to row

      articlePrixRefsTableEditor.inlineCreate(({
          onBlur: 'submit'
      }))
  })

rf1234

Hi, I am doing this too.

I use a simple editor and on "New" button click it inserts a preset row into the data table. (So it is not an inline button, but a "regular" data tables button. But apart from that it is the same use case.)

Here is the Editor:

ctrCategoryEditor = new $.fn.dataTable.Editor( {
    ajax: {
        url: 'actions.php?action=tblCtrCategory',
        data: function ( d ) {
            d.parent_id = parentId;
        }
    },
    table: "#tblCtrCategory",
    formOptions: {
        inline: {
            submit: 'allIfChanged',
            onBlur: 'submit'
        }
    },
    fields: [ 
        {
            label: lang === 'de' ? 'Name:' : 'Name:',
            name:  "ctr_category.category_name",
            attr: {
                placeholder: lang === 'de' ? 
                    "Bitte frei wählbaren Text eingeben und Enter drücken" :
                    "Please enter text of your choice and press Enter"
            }
        }, {
            name: "ctr_installation[].id",
            type: "hidden"
        }
    ]        
} );

And the custom button that inserts the new row:

buttons: [
    {   extend: "create", editor: ctrCategoryEditor,                  
            action: function ( e, dt, node, config ) {
                emptyCategory = true;
                var self = ctrCategoryEditor;
                self.create( false )
                    .set( { 'ctr_installation[].id': [parentId],
                            'ctr_category.category_name': ''} )
                    .submit();       
            }
    }
],

With the "set" method you can preset all of your fields as you like. In my use case I set the parentId of the record and leave the user editable field empty. So the user can inline edit the newly created record right afterwards.