Inline Create Add Dynamic Data

Inline Create Add Dynamic Data

Pierre-LouisPierre-Louis Posts: 10Questions: 3Answers: 0

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'
      }))
  })

Replies

  • rf1234rf1234 Posts: 2,991Questions: 87Answers: 421

    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.

Sign In or Register to comment.