DevExtreme DataGrid onRowDblClick

Question

I want to implement an onRowDblClick event for the DevExtreme DataGrid. I need this Event for multiple grids so I would like to implement this for the DataGrid for general.

I was thinking about overriding the onClick action and check for a double click or extend the DataGrid with an onRowDblClick Action but i have no idea how to implement this.

Please advise a way to do this functionality.

OK, finally I implemented an addRowDblClick function which looks like this:

var clickTimer, lastRowClickedId;
function addRowDblClick(id, dblClickFunc) {
  $("#" + id).dxDataGrid({
    onRowClick: function (e) {
      //OBTAIN YOUR GRID DATA HERE
      var grid = $("#" + id).dxDataGrid('instance');
      var rows = grid.getSelectedRowsData();

      if (clickTimer && lastRowCLickedId === e.rowIndex) {
        clearTimeout(clickTimer);
        clickTimer = null;
        lastRowCLickedId = e.rowIndex;
        //YOUR DOUBLE CLICK EVENT HERE
        if (typeof dblClickFunc == 'function')
          dblClickFunc();
      } else {
        clickTimer = setTimeout(function () { }, 250);
      }
      lastRowCLickedId = e.rowIndex;
    }
  });
}

And at the DataGrid I called an function OnContentReady where I call this function with the Id and the function I want to call when I double click.

addRowDblClick('dxDataGrid', showDetail);

score 1 · Answer 1 · answered Oct 31 '18 at 12:44

I that work with this :

$("#grdMain").dxDataGrid({
   ....
   onRowPrepared:function(event){
      $(event.rowElement).on('dblclick', function(){
         console.log('row dblclicked');
      }).on('remove', function(){
          //on remove event in jquery ui libraries or 
          // https://stackoverflow.com/questions/29255801/jquery-on-remove-not-working-parent-node-fire-empty
          $(this).off('dblclick remove');
     })
  }            
})

score 0 · Accepted Answer · answered Oct 23 '17 at 14:48

I did this and worked pretty well (I followed this answer)

var clickTimer, lastRowCLickedId;

    $("#grdMain").dxDataGrid({            
        ...
        onRowClick: function (e) {               
            //OBTAIN YOUR GRID DATA HERE
              var grid = $("#grdMain").dxDataGrid('instance');
              var rows = grid.getSelectedRowsData();

            if (clickTimer && lastRowCLickedId === e.rowIndex) {
                clearTimeout(clickTimer);
                clickTimer = null;
                lastRowCLickedId = e.rowIndex;
                //YOUR DOUBLE CLICK EVENT HERE
                alert('double clicked!');
            } else {
                clickTimer = setTimeout(function () { }, 250);
            }

            lastRowCLickedId = e.rowIndex;
        }
    });

Have you did this for every grid? I need a global implementation because i need the onRowDblClick event for 15 grids. Thats why i want to extend the DataGrid. But I dont know how. — Ich, Oct 24 '17 at 09:26

DevExtreme DataGrid onRowDblClick

2 Answers2