ejGrid single and double click events?

Question

The 'rowSelected' event provides a nice way to hook into the row selection event, but is there anyway to hook into 1) a single click and 2) a double click event for the ejGrid rows? I want my user to click (or double click) a row to pop up with a modal dialog/window.

I cannot seem to find this in the documentation.

Thanks in advance

Madhu Sudhanan P · Answer

Hi Xander,

 

Query: “is there anyway to hook into 1) a single
click and 2) a double click event for the ejGrid rows?  I want my user to
click (or double click) a row to pop up with a modal dialog/window.”

 

Yes, the ejGrid have recordClick and recordDoubleClick
events which will trigger at single click and double click of the grid rows
respectively.

 

The recordClick and recordDoubleClick events will be
initialized in the grid as follow.

 


 
  
   
  $("#Grid").ejGrid({
                 
  dataSource: data,
                 
  recordClick: "selected",
                 
  columns:
                 
  . . . . 
  });
   
  $("#Grid").ejGrid({
                 
  dataSource: data,
                 
  recordDoubleClick: "selected",
                 
  columns:
                 
  . . . . . 
  });
   
  
 


 

Please refer the following table for arguments passed to the
args of the callback by the recordClick and recordDoubleClick events.

 


 
  
  Name
  
  
  Description
  
 
 
  
  recordDoubleClick
  
  
  Trigger when double click on grid record. 
  
 
 
  
   
  $("#Grid").ejGrid({recordDoubleClick: function (args) {
   
  // args.cancel   - Returns the
  cancel option value.
  // args.model    - Returns the grid model.
  // args.type     - Returns the name of the
  event.
  //args.currentRowIndex  -Return the index of the row
  clicked.
  //args.currentRow  -Return the target row.
  //args.currentData  -Return the data of the row.
  }});
   
  
 
 
  
  recordClick
  
  
  Trigger when single click on grid record.
  
 
 
  
   
  $("#Grid").ejGrid({recordClick: function (args) {
   
  // args.cancel   - Returns the
  cancel option value.
  // args.model    - Returns the grid model.
  // args.type     - Returns the name of the
  event.
  //args.currentRowIndex  -Return the index of the row
  clicked.
  //args.currentRow  -Return the target row.
  //args.currentData  -Return the data of the row.
  }});
   
  
 


 

The recordClick and recordDoubleClick events
are included in our last service pack release and so we suggest you to upgrade
your Essential Javascript package with the service pack available in the
following link.

 

Service Pack:  http://www.syncfusion.com/downloads/jsservicepacks .

 

For your convenience we have created a simple sample and
please find the attached sample.

 

Please let us know if you require further assistance.

 

Regards,

Madhu Sudhanan. P

Attachment: RecordClick_8a8b28b9.zip

Xander van der Merwe · Answer

Thank you for the example, that worked.

But when I tried it in my LightSwitch application it did not work until I realised that this functionality only works in your version 11.2 and *not* in your version 11.4 (latest version).

Does that mean there was a regression issue that crept into version 11.4 or why does it not work in the very latest version?

Thank you.

Madhu Sudhanan P · Answer

Hi Xander,

 

We have provided the recordClick and recordDoubleClick
events support only in Essential Javascript version 11.4.0.26 and not in
11.2.

 

Please
let us know if we misunderstood your requirement and provide some more
information about the issue that you have faced after upgraded to the new
version, so that it will be helpful for us to analyze about the issue and
update the response as early as possible.

 

Regards,

Madhu Sudhanan. P

Xander van der Merwe · Answer

Hi Madju,I'm confused... in the  RecordClick_8a8b28b9.zip example that you included above (to show recordClick and recordDoubleClick working) you included version 11.2 of ej.widgets.all.min.js and that works.If I use your same example and I downloaded the latest version 11.4 and replace version 11.2 of ej.widgets.all.min.js then it does NOT work.So I have to assume that your example uses version 11.2 and not the latest version 11.4 as it only works with version 11.2 which is consistent with my own testing.Please clarify.Regards

Maithiliy K · Answer

Hi Xander,

 

We regret for the inconvenience caused.

 

Mistakenly the recordClick and recordDoubleClick
events feature was not included in the last service pack release. The previously
provided ej.widgets.all.min.js file has been taken from our Current development location and also
the header version is mentioned as 11.2
instead of 11.4. Please upgrade to
the 11.4 version and use the file ej.widgets.all.min.js
that has been already provided in the attached sample.

 

The recordClick and recordDoubleClick are
working properly while using the provided
ej.widgets.all.min.js file. We will include this feature in our upcoming  Volume 1, 2014 release on the month of April.

 

Please let us know if you have any queries.

 

Regards,

Maithiliy K

Pedro Rosa · Answer

Hi,Is this still working on ejs 2? im using it on a project mvc c# and in razor I cannot find it...Do you have some info or sample of this working?ThanksPedro

Pavithra Subramaniyam · Answer

Hi Xander, 

In Essential JavaScript 2 Grid component, You can achieve your requirement by using ‘grid.recordDoubleClick’ event and ‘click’ event of Grid element. We have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 

[index.js] 




var grid= new ej.grids.Grid({ 
    dataSource: orderData.slice(0,5), 
   columns: [ 
               .     .    . 
    ], 
    height: 210, 
     
}); 
grid.appendTo('#Grid'); 

grid.recordDoubleClick = (args) => { 
var a = e.rowIndex; 
alert(‘Double Clicked rowIndex: ’+a); 
} 

grid.element.addEventListener('click',(e)=>{ 
        var cell = ej.base.closest(e.target, 'td');  
        if (cell && ej.base.closest(cell, '.e-row')) {  
              var data = grid.getRowInfo(e.target); 
            alert(data.rowIndex);        }  

}); 


Documentation : https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#recorddoubleclick  

Sample               : https://plnkr.co/edit/xP94FKKxD3e6I9pfJklj?p=preview  

Regards, 
Pavithra S.

Miguel Varela Rodriguez · Answer

Hi syncfusion team,i implemented this code above to record double click, but it works just on click.are im doing something wrong?i attached my code below.thank you in advanceAttachment: codeExample_fa8542d8.zip

Venkatesh Ayothi Raman · Answer

Hi Miguel , 

Thanks for contacting Syncfusion support. 

Query: i implemented this code above to record double click, but it works just on click. 

We went through your code example which you have shared for us and found that you are tried to bind the record double click event in the addEventListener. But you have used  the dblclick event incorrectly and that is cause of the issue. So we suggest to use ‘dblclick’ instead of ‘doubleClick’. Also we have used rowSelected event for singleClick and recordDoubleClick event for doubleClick. Please find the below code example and sample for your reference. 

[.js] 




var grid= new ej.grids.Grid({ 
    dataSource: data.slice(0,5), 
               columns: [ 
        ... 
    ], 
    height: 210, 
    rowSelected: singleClick 
}); 
grid.appendTo('#Grid'); 
... 
function singleClick(args){            //for Single click 
  alert(args.rowIndex); 
} 

grid.element.addEventListener('dblclick',(e)=>{     //for double click 
        var cell = ej.base.closest(e.target, 'td');  
        if (cell && ej.base.closest(cell, '.e-row')) {  
            // get your required values  
            var data = grid.getRowInfo(e.target); 
            alert(data.rowIndex); 
        }  

}); 

Sample: https://plnkr.co/edit/jemzUggE73Mwxal1452S?p=preview  

Help documentation: https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#rowselected 
https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=typescript#recorddoubleclick 
 
If we misunderstood your requirement then could you please provide more details of your requirement and scenario? It would be helpful for us to find the problem and provide the better solution as earliest. 
 
Regards, 
Venkatesh Ayothiraman.

Miguel Varela Rodriguez · Answer

thank you for the fast answer.I changed my code to match your example, and still i got fired the single click but not the doubleclick.i must say y load the data of the grid after init the grid, and then refresh the grid to show the data. could this be the problem?i obtain the data from a ajax call, and do this to assign the data.gridIdeasListData = data;gridIdeasList.dataSource = gridIdeasListData;gridIdeasList.refresh;

Venkatesh Ayothi Raman · Answer

Hi Miguel , 


Query: i must say y load the data of the grid after init the grid, and then refresh the grid to show the data. 

 
We went through your code example which you have shared for us and found that you are dynamically update the data source. Based on this, we have tried to reproduce the reported issue at our end, but it’s unsuccessful. Please refer to the below sample for your refernce. 

[.js] 




var grid= new ej.grids.Grid({ 
               columns: [ 
... 
    ], 
    height: 210, 
    recordDoubleClick: doubleClick 
     
}); 
grid.appendTo('#Grid'); 

grid.element.addEventListener('click',(e)=>{                       //Single click event 
        var cell = ej.base.closest(e.target, 'td');  
        if (cell && ej.base.closest(cell, '.e-row')) {  
            // get your required values  
            var data = grid.getRowInfo(e.target); 
            console.log("Single "+ data.rowIndex); 
        }  
}); 

function doubleClick(args){                                              //recordDoubleClick event 
  console.log("double "+ args.rowIndex);  
} 

function loadData(args){ 
  var grid=document.getElementById("Grid").ej2_instances[0]; 
  var gridIdeasListData = data; 
  grid.dataSource = gridIdeasListData;                                                    //load datasource dynamically to the grid 
  grid.refresh(); 
} 

Sample: https://plnkr.co/edit/ROOzoT4iW6XWzLnMA3ru?p=preview  

If we have misunderstood your query, please share the below details. It will help us provide better solution as soon as possible. 


Is there any error thrown while double clicking the records in the console window? If Yes, please share the details.
Share the full grid code sample.
Try to reproduce the reported issue in the given sample, if possible.

Regards, Venkatesh Ayothiraman

Name	Description
recordDoubleClick	Trigger when double click on grid record.
$("#Grid").ejGrid({recordDoubleClick: function (args) { // args.cancel - Returns the cancel option value. // args.model - Returns the grid model. // args.type - Returns the name of the event. //args.currentRowIndex -Return the index of the row clicked. //args.currentRow -Return the target row. //args.currentData -Return the data of the row. }});
recordClick	Trigger when single click on grid record.
$("#Grid").ejGrid({recordClick: function (args) { // args.cancel - Returns the cancel option value. // args.model - Returns the grid model. // args.type - Returns the name of the event. //args.currentRowIndex -Return the index of the row clicked. //args.currentRow -Return the target row. //args.currentData -Return the data of the row. }});