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

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

sofia_psofia_p Posts: 2Questions: 1Answers: 0
edited January 23 in Free community support

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.

Answers

  • colincolin Posts: 14,618Questions: 1Answers: 2,497

    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_psofia_p Posts: 2Questions: 1Answers: 0

    @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

  • colincolin Posts: 14,618Questions: 1Answers: 2,497

    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

Sign In or Register to comment.