How to get double click event in angular-datatables

Question

I am using datatables and angular-datatables. How do I detect a double click event in the datatable and get the row data? I found the code below but I need it in angular.

$(document).on("dblclick", "#myTable tr", function () {
    //code here
});

html

<table datatable="tblRecipe" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" dt-instance="showCase.dtInstance" class="table table-bordered"></table>

controller.js

var app = angular.module('app', ['datatables'])
app.controller('MainController', function ($scope, $window, $http, $filter, $timeout, $compile, DTOptionsBuilder, DTColumnDefBuilder, DTColumnBuilder) {
    var vm = this;
    vm.dtInstance = {};
    vm.Recipes = {};
    vm.delete = deleteRow;
    vm.edit = editRow;
    vm.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('ajax', {
        url: "/Recipes/GetAllRecipes",
        type: "POST"
    })
    .withOption('createdRow', createdRow)
    .withOption('select', true);
    vm.dtColumns = [
                    //...
DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
        ];
        function actionsHtml(data, type, full, meta) {
            vm.Recipes[data.Id] = data;
            return '<a title="View"  href="javascript:void(0)" ng-click="showCase.view(showCase.Recipes[' + data.Id + '])">' +
                ' <i class="fa fa-eye" aria-hidden="true"></i>' + '</a>' + '<a title="Edit"  href="javascript:void(0)" ng-click="showCase.edit(showCase.Recipes[' + data.Id + '])">' +
                ' <i class="fa fa-pencil"></i>' + '</a>' + '<a title="Delete" href="javascript:void(0)" ng-click="showCase.delete(showCase.Recipes[' + data.Id + '])" )"="">' + ' <i class="fa fa-trash-o"></i>' + '</a>';
        };
        //...
});
});

@Sajeetharan I don't have angular code for the double click event that's what I'm asking. I'll edit my question title. — Len
– Len, Commented Jan 23, 2018 at 8:31

davidkonrad · Accepted Answer · 2018-01-23 10:06:17Z

1

I am using datatables and angular-datatables. How do I detect a double click event in the datatable and get the row data? I found the code below but I need it in angular.

DataTables is jQuery, Angular-DataTables is just directives that make them work in a AngularJS context. Unless you are rendering "the angular way", i.e datatable="ng" you will need to $compile the table, the rows or each cell in callbacks if you want any directive to work.

Simply use a delegated event handler as you would do with jQuery DataTables, and grab the data through dtInstance which among other things hold the API instance :

$('#tableId').on('dblclick', 'tbody tr', function() {
  console.log( $scope.dtInstance.DataTable.row(this).data() )
})

Update: http://plnkr.co/edit/PdrKxxxsDFdNSzgf8c07?p=preview

edited Jan 23, 2018 at 10:06

answered Jan 23, 2018 at 10:01

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sathiyaraj · Accepted Answer · 2018-01-23 08:57:34Z

0

We can write a custom directive logic and resolve the issue. can you please refer directive .

html code

<div ng-controller="MainController">
<div id="goodDiv" ngdblclick>Click Here</div>
<div id="goodDiv">Don't Click Here</div>
</div>

angular code

angular.module("myapp", []).
controller("MainController", ["$scope", function($scope){

}]).
directive("ngdblclick", ['$compile', function($compile){
    'use strict'
    return{
        compile : function(elements, attributes){
            return{
                restrict: 'C',
                post : function(scope, element, attribute){
                    var isSingleClick = true;
                    element.bind('click', function(){
                        setTimeout(function(){
                            if(isSingleClick){
                                console.log("It's a single click");
                                return;
                            }
                        }, 500);
                    });

                    element.bind('dblclick', function(){
                        console.log("It's a double click");
                        isSingleClick = false;
                        setTimeout(function(){
                            isSingleClick = true;
                            return;
                        }, 500);
                    });
                }
            };
        }
    };
}]);

css style:

#goodDiv{
    width : 100px;
    height : 100px;
    background-color : green;
}

You can find your element and render the event for specific element(#myTable li)

answered Jan 23, 2018 at 8:57

Sathiyaraj

3433 silver badges12 bronze badges

3 Comments

davidkonrad Over a year ago

1, Why inject $compile to the directive? 2. Why use setTimeout? 3. And why not use angularjs' own ng-dblclick instead?

Sathiyaraj Over a year ago

1. $compile is dynamic rebind the element and get the scope of the value, 2. we need to understand the interval of the next consecutive click event listen 3. we unable to bind ng-double click event in angular element inject.

davidkonrad Over a year ago

1. You are not using $compile at all, $compile is implicit in the directive method. 2. You should never use setTimeout with angularjs but $timeout 3. Your solution will never work with angular datatables since angular not is aware of whatever DOM elements DT is injecting. You just replace a standard directive that will not work without $compile with another directive that will not work without $compile ...

Collectives™ on Stack Overflow

How to get double click event in angular-datatables

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related