Unable to load editor on double click with tinymce field type

Unable to load editor on double click with tinymce field type

LimpEmuLimpEmu Posts: 65Questions: 18Answers: 1

I was asked to allow editing a record by double clicking on it. While I got the double click working and the form is opening, I am unable to get the textarea field that is using the tinymce plug-in to load when the form is opened. Opening the form works fine when I use the usual method, i.e., clicking on a record, then clicking on the Edit button above the form.

scheme_ed.on( 'open', function ( e, json, data ) {
    if (data == 'edit') { 
       console.log(scheme_tb.rows({selected:true})[0].length);
       var miceText = scheme_tb.rows( { selected: true } ).data()[0].notes;
       scheme_ed.field('notes').val(miceText);
    }
    else if (data == 'create') {
       scheme_ed.field('notes').val("Describe QI project. This description will be accessible on the control chart page through a link in the header bar.");
    }
});

In the code above, I am setting the value of the tinymce type notes field based on the selected table row's value.
The dblclick event is defined to open the existing record, the user double clicked on.

$('#schemetable').on('dblclick', 'tbody tr', function () {
    if ($(this).hasClass('selected') == false) $(this).toggleClass('selected');
    scheme_ed.edit( this, {
      title: "Edit Existing Custom QI Period Setup" ,
      buttons: ([
               'Update',
                {
                  text: 'Cancel',
                  action: function () {
                    this.close();
                  }
                }
              ])
     });
});

The form opens, however, the toggleClass('selected') (even though it highlights the selected row) does not actually select it the way it is selected when a user single clicks it (I can tell since the buttons above the table that should get enabled if a user clicks on a row stay disabled), and this explains the result below.

The console shows:

0
VM1800:249 Uncaught TypeError: Cannot read property 'notes' of undefined
[...]

The first value in the console log is the value of scheme_tb.rows({selected:true})[0].length, and the error is triggered as nothing is actually selected.

I have tried to move the field initialization into the initEdit event section (as I can then use the data object to access the notes field), this runs without error, but the tincymce field type textarea never gets a value.

I have to reach out for help on this one, have spent several hours to figure out how to do this right, but am at my wits' end.

Answers

  • LimpEmuLimpEmu Posts: 65Questions: 18Answers: 1

    In my description above, it should be console.log(scheme_tb.rows({selected:true}).data().length); rather than console.log(scheme_tb.rows({selected:true})[0].length);.

  • LimpEmuLimpEmu Posts: 65Questions: 18Answers: 1

    I put a work-around in place that is inefficient, but appears to work.

    scheme_ed.on( 'open', function ( e, json, data ) {
        if (data == 'edit') {
          if (scheme_tb.rows({selected:true}).data().length == 0) {
             /* user double clicked a row, have to find notes from jsondata */
             for (var i=0; i < trendschemes_json.length; i++) {
                if (trendschemes_json[i].DT_RowId == $('#tinymce_aux_rowid').html()) {
                   var miceText = trendschemes_json[i].notes;
                   i = trendschemes_json.length;
                }
             }
          }
          else {
            var miceText = scheme_tb.rows( { selected: true } ).data()[0].notes;
            $('#tinymce_aux_rowid').html(scheme_tb.rows( { selected: true } ).data()[0].DT_RowId);
          }
          scheme_ed.field('notes').val(miceText);
        }
        else if (data == 'create') {
           scheme_ed.field('notes').val("Describe QI project. This description will be accessible on the control chart page through a link in the header bar.");
        }
    });
    [...]
    $('#schemetable').on('dblclick', 'tbody tr', function () {
        if ($(this).hasClass('selected') == false) $(this).toggleClass('selected');
        $('#tinymce_aux_rowid').html(this.id);
        scheme_ed.edit( this, {
          title: "Edit Existing Custom QI Period Setup &mustspecify" ,
          buttons: ([
                   'Update',
                    {
                      text: 'Cancel',
                      action: function () {
                        this.close();
                      }
                    }
                  ])
        });
    });
    [...]
    </script>
    [...]
    <!-- edit section tinymce does not work for double click, need this for work-around -->
    <span id="tinymce_aux_rowid" class="d-none"></span>
    [...]
    
This discussion has been closed.