CODEWITHSUNDEEP
javascriptmouseeventdom-eventsdouble-clickdgrid
rink.attendant.6
rink.attendant.6

Reputation: 46287

dgrid rows and double click event

I have a dgrid table with a selection mode of toggle. One of my requirements is to implement a double click on a row to trigger a function.

Here is what I have:

grid.on('.dgrid-content .dgrid-row:dblclick', function () {
    window.alert('Hello world!');
});

The problem is that double-clicking also causes the selection events dgrid-select and dgrid-deselect to fire as it is also registering two single clicks to select.

I have tried adding this code but it does not work as intended:

var timer;

grid.on('.dgrid-content .dgrid-row:click', function (event) {
    var row = this;
    if (timer) {
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
        clearTimeout(timer);
    } else {
        timer = window.setTimeout(function() {
            // something to make the click go through?
            row.emit('something here');
            clearTimeout(timer);
        }, 250);
    }
});

Is there a way to achieve this?

I've consulted How to use both onclick and ondblclick on an element? but the answers there did not seem to work in my case.

I've also looked at the misc utilities and perhaps it is the debounce function that I need but I am not sure how to use it.

Upvotes: 4

Views: 2357

Answers (1)

Dunaevsky Maxim
Dunaevsky Maxim

Reputation: 3209

You can use functions row and cell from Dgrid class:

 define([
     "dojo/_base/declare",
     "dojo/_base/lang", // hitch
     "dgrid/OnDemandGrid"
 ], function (declare, lang, OnDemandGrid){
     return declare(OnDemandGrid, {

         _onSingleClickAction: function (event) {
             var row = this.row(event), // dgrid/Grid methods
                 cell = this.cell(event);

             /********************
             * WORKING WITH DATA *
             ********************/
         }, // _onSingleClickAction

         _onDblClickAction: function (event) {
             var row = this.row(event), // dgrid/Grid methods
                 cell = this.cell(event);

             /********************
             * WORKING WITH DATA *
             ********************/
         }, // _onDblClickAction

         postCreate: function () {
             this.inherited(arguments);

             this.on(".dgrid-content .dgrid-row:dblclick", lang.hitch(this, "_onDblClickAction"));
             this.on(".dgrid-content .dgrid-row:click", lang.hitch(this, "_onSingleClickAction"));
         } // postCreate
     }); // declare
 }); // define

Final class definition:

 define([
     "dojo/_base/declare",
     "dojo/_base/lang", // hitch
     "dgrid/OnDemandGrid"
 ], function (declare, lang, OnDemandGrid){
     return declare(OnDemandGrid, {

         onDblClick: function (row) {  // empty method for definition in childs
             console.log(row.id);      // record id from the store
             console.log(row.data);    // full object from the store
             console.log(row.element); // DOM element
         },

         _onDblClick: function (event) { // private method
             this.onDblClick(this.row(event)); // extract data from event
         }, // _onDblClick

         postCreate: function () {
             this.inherited(arguments);

             this.on(".dgrid-content .dgrid-row:dblclick", lang.hitch(this, "_onDblClick"));
         } // postCreate
     }); // declare
 }); // define

[1] https://github.com/SitePen/dgrid/blob/v1.2.1/doc/usage/Working-with-Events.md

Upvotes: 0

Related Questions