How do I make a specific column in a data table inline editable

sofia_p

This is the column that 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));
      }
    }

This is the approach I tried, that identifies that I have clicked in the column data:

angular.element('.cls-task-list').on('click', 'tbody tr td.dt-body-right-time', function(){
    logger.success('Hi, you are clicking on a TD');
    editor = new $.fn.dataTable.Editor( {
        ajax:{
          'method':''
        },
        table: '.cls-task-list',
        fields: [ {
                label: $translate.instant('tsk.exp_hrs'),
                name: 'ExpectedHours'
            }
        ]
    } );
  });

The problem is I am not able to make it inline editable.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

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

@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

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