Answers

• allan Posts: 63,522Questions: 1Answers: 10,473 Site admin

  January 15

  I suspect it might be that the owns method for the plugin might not be picking up the input element (description of the methods for plugins here). Can you give me a link to your page so I can check it out?

  Allan
• Infolabs Posts: 19Questions: 5Answers: 0

  January 16

  Thanks Allan, my configuration was wrong, now it's working.
  In any case, I'm not very satisfied with how autocomplete works...
  In the "opts" parameter of my editor field I specified the parameters I normally use for "stand alone" autocomplete, including "select" and "change".
  The problem, however, is that the "change" is not triggered when the user enters the field and writes a random text, which does not correspond to any entry; this way I can't "clean up" the row of my datatable.
  Do you have any suggestions or complete examples that we can use as inspiration?
  I read in various discussions that you advise against the use of autocomplete, in favor of select2.
  Is there any complete example on how to integrate a select2 (with dynamic list, populated via ajax, based on the text entered by the user)?
  Thank you very much
• allan Posts: 63,522Questions: 1Answers: 10,473 Site admin

  January 16

  A complete example of use of the plug-ins is something I need to introduce. I haven't thus far because the plug-ins aren't available to non-license holders, but that is really secondary to getting them working for license holders. Apologies. It will be some weeks before I can get to that due to other development commitments at this time though.

  jQuery UI auto complete is fine as long as your label and value are the same. If you want to show a different label to the end user from the value (i.e. a left joined primary key number), then it becomes tricky - possible, but tricky.

  Do you have different label / values? If so, consider using Select2. If not, stick with jQuery UI.

  The problem, however, is that the "change" is not triggered when the user enters the field and writes a random text, which does not correspond to any entry; this way I can't "clean up" the row of my datatable.

  I'm not sure Select2 would trigger a change on that either, since it isn't selecting a value from a list. Are you looking to add a new value to the remote source in such a case?

  Allan
• Infolabs Posts: 19Questions: 5Answers: 0

  January 17

  Thanks Allan,
  no, my users must select only one value from the list.
• allan Posts: 63,522Questions: 1Answers: 10,473 Site admin

  January 17 edited January 17 Answer ✓

  Right, but are the label that is shown to the end user different from the value?

  For example consider this page - there is a "Site" drop down, where the end user will see "Edinburgh" but the actual value submitted for the field is 1 (or for "London", 2, etc).

  Allan
• Infolabs Posts: 19Questions: 5Answers: 0

  January 19

  Thank you very much, Allan!
• Infolabs Posts: 19Questions: 5Answers: 0

  January 19 edited January 19

  I cleaned up and fixed my code; now the "change" event is triggered when the user empties or does not select any autocomplete entries (and I proceed to empty the fields).
  My editable table has 3 columns: item description, item code (read only) and quantity.
  I save the information (via ajax) at a later time (executing the post of the form).

  My "latest" problem now is the following.
  In the autocomplete I have the description which is composed of description + code (e.g. "SCREW 17 - SCW17"), while the code is simple (e.g. "SCW17"), also because the search is based on the text entered by the user of autocomplete occurs both in the code and in the description of the items.

  When the user selects an autocomplete element, I would like the description to be simple in the "description" column of the datatable, and not composed of description + code.

  Everything works correctly when the user selects an element by clicking in the autocomplete dropdown (the "select" event is triggered).
  However, it does not work correctly when the user types a text that corresponds to one or more entries and moves with the TAB key. Also in this case the "select" event is triggered, but in the "description" column of the datatable the string is composed of description + code (exactly as reported by my autocomplete list).

  This is my editor code:

      let editor = new $.fn.dataTable.Editor({
          table: '#tblRighe',
          idSrc: 'id',  //se non specificato pare che cerchi un campo chiamato DT_RowId
          fields: [
              {
                  label: 'Descrizione art.',
                  name: 'desArticolo', 
                  type: "autoComplete",   
                  opts: {
                      autoFocus: true,
                      delay: 100,
                      minLength: 1,
                      source: function (request, response) {
                          InfoUtils.callWepApi.doGet('/api/magazzino/articoli',
                              { codAz: self.codAz, filtroCodOrDescr: request.term },  
                              response
                          );
                      },
                      select: function( event, ui ) {
                          editor.field('desArticolo').val(ui.item.descrizione);    //item description
  
                          let rowNr = editor.modifier().row;
                          self._dtTableElencoArt.cell(rowNr, idxColDesArt).data(ui.item.descrizione);     //item description
                          self._dtTableElencoArt.cell(rowNr, idxColCodArt).data(ui.item.codice);      //item code
                      },
                      change: function (event, ui) { 
                          if (!ui.item) {
                              editor.field('desArticolo').val('');    //empty the "item description" field
  
                              let rowNr = editor.modifier().row;
                              self._dtTableElencoArt.cell(rowNr, idxColCodArt).data('');  //empty the "item code" field
  
                              let rowData = self._dtTableElencoArt.row(rowNr).data();
                              rowData.desArticolo = "";       //empty the "item description" field
                              rowData.codArticolo = "";       //empty the "item code" field
                          }
                      }
                  }
              },
              {
                  label: 'Q.tà',
                  name: 'qta',
                  type: "numericValutaPos" // Using the custom field type
              }
          ]
      });
  

  Thank you in advance!
• allan Posts: 63,522Questions: 1Answers: 10,473 Site admin

  January 19

  I'm not sure that an Editor field should be calling the DataTable update methods for cells at all to be honest. Only when the form is submitted would I expect the DataTable to be updated. For example imagine a user is filling in the form, and then decides to cancel it for whatever reason. The table shouldn't have been updated at that point. Only when the form is submitted should it be updated.

  So I'm afraid I'm not convinced that cell().data() is the right thing to do there.

  When you submit the form, the data returned by the server should contain the same structure for the row's data that was used to initially populate the table. Is that not happening in this case?

  Allan
• Infolabs Posts: 19Questions: 5Answers: 0

  January 19 edited January 19

  In my case, the user works in a modal window.
  I would like the user changes, insertions and deletions will be mantained "in memory" (in the datatable).
  Then, when the user confirm the modal window, I pupulate the object that will be send via ajax.

  This is my code (datatable is "self._dtTableElencoArt").

  function getDataToSave() {
  let self = this;
  let dibaDtoInEdit = this.entityDtoInEdit ? this.entityDtoInEdit : {};

      let dibaDtoToSave = dibaDtoInEdit;
      dibaDtoToSave.codice = $('#txtCodice', this.modalObject).val();
      dibaDtoToSave.descrizione = $('#txtDescrizione', this.modalObject).val();
  
      //here I populate the rows 
      let fromTlbDataRow = [];
      self._dtTableElencoArt.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
          var data = this.data();
          fromTlbDataRow.push(data);
      } );
  
      dibaDtoToSave.righe = fromTlbDataRow;
  
      return dibaDtoToSave;
  

  }