Answers

• colin Posts: 15,142Questions: 1Answers: 2,586

  January 2023

  With that approach, you're instantiating an Editor instance on each click. This would become inefficient with many clicks.

  I suspect it would be easier to do something like this,

  Colin
• sofia_p Posts: 2Questions: 1Answers: 0

  January 2023

  @colin
  This is a data table, which does not have predefined td or tr.

  here is the data table:

  <section>
    <wb-datatable table-id="{{::currentWidgetId}}" config="dtConfig" columns="dtColumns" class="cls-task-list" id="datatable" api="dtApi">
    </wb-datatable>
  </section>
  

  The column I want to make editable:

  {
        data: 'ExpectedHours',
        headerTitle: $translate.instant('tsk.exp_hrs'),
        title: '<span title="' + $translate.instant('tsk.exp_hrs_title') + '">' + $translate.instant('tsk.exp_hrs') + '</span>',
        width: 55,
        className: 'dt-body-right',
        render: function (data, type, row) {
          return DateHelperService.convertToTime(DateHelperService.convertMinutesToHours(data));
        }
      }
  

  The js file code, I tried:

  angular.element('.cls-task-list').on('click', 'tbody tr td.dt-body-right-time', function(){
      logger.success('Hi, you are clicking on a TD');
      var editor = new $.fn.dataTable.Editor( {
        ajax:'src\app\task\directives\task-list\taskListDirective.js',
        table:'.cls-task-list'
  
      } );
  
      $('.cls-task-list').on('click','.dt-body-right-time', function(){
        editor.inline(this);
  
      });
    });
  

  With the above mentioned approach, I am able to trigger the click event on the desired column but it's not getting editable.
  This line " logger.success('Hi, you are clicking on a TD');" in the above code is a marker to show that am able to trigger click event.

  And I also keep on getting an error which says:
  taskListController.js:191 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
• colin Posts: 15,142Questions: 1Answers: 2,586

  January 2023

  With that code you posted, you'll be creating a new event handler on line 9 whenever the table is clicked. It wouldn't trigger the inline(), it just creates an event handler, so that's probably not what you want.

  Try removing lines 9 and 12, so it just calls inline() instead.

  Colin