We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Double Click

Is there a Double Click Event for the DataGrid?  I would like the end user to double click and have a dialog popup. 

5 Replies

PS Pavithra Subramaniyam Syncfusion Team April 29, 2019 05:11 AM UTC

Hi William,  
 
Thanks for contacting Syncfusion support.  
 
The Essential JavaScript 2 Grid  has “recordDoubleClick” event which will trigger when record is double clicked. Please refer to the below documentation link for more information. 
 
[Vue] 
new Vue({   
              el: '#app', 
              template: ` 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid" :allowPaging='true' :recordDoubleClick="recordDoubleClick" :dataSource="data" height='315px'> 
          <e-columns> 
            .  .  . 
          </e-columns> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
    return { 
      data: data.slice(0,20),      
    }; 
  }, 
   methods: { 
    recordDoubleClick: function(e) { 
     // you can show Dialog component here 
      alert("dblclick"); 
        console.log(e); 
    } 
}); 
   
 
 
Sample               : https://plnkr.co/edit/4MlArVffv6dkLU8dlEec?p=preview 
 
Regards, 
Pavithra S. 



WM William Morgenweck April 29, 2019 10:49 AM UTC

Thank you for your answer it is very helpful.  In your answer you mention Essential JavaScript 2 Grid does that have the same properties, events and methods as the vue Data Grid? Just FYI from a new person to Syncfusion it is very difficult to find documentation when you don't know what the event is called and Google search or your own forum searching does not find anything. 


PS Pavithra Subramaniyam Syncfusion Team April 30, 2019 04:30 AM UTC

Hi William, 

We are happy to hear that the provided information helped you. And yes, Our Data Grid in all platform has the same properties, methods and Events. We regret for the inconvenience caused. Currently We are improving our documentation and adding new sections to the documentation. And these changes will be refreshed in any of our upcoming release.  
 
Regards, 
Pavithra S. 



WM William Morgenweck August 2, 2019 07:43 PM UTC

Is there a way to by pass the onRowSelectedPubs event when I need to double click?  I like to preload data on the click event so if the end user needs to doubleclick and populate a popup form the data is available but it seems that the row selected property is fired again 
:dataSource="ProgramPubs"
:rowSelected="onRowSelectedPubs"
:toolbar="toolbarOptions"
:allowGrouping="true"
:allowSorting="true"
:allowTextWrap="true"
:allowExcelExport="true"
:allowPdfExport="true"
:recordDoubleClick="pubDoubleClick"
:selectionSettings="selectOptions"
:toolbarClick="toolbarClick"
>


BS Balaji Sekar Syncfusion Team August 5, 2019 12:29 PM UTC

Hi William Morgenweck, 

By default, rowSelected event also trigger when we perform the doubleClick action on Grid element and we can’t prevent the when double click action. We have achieved workaround sample with your requirement. In the below code example, we have called a function(prevDataFn) from rowSelected event when we do single click action alone. Please refer the below code example, sample for more information. 
[App.Vue] 

  <template> 
  <div id="app"> 
    <ejs-grid 
      id="Grid" 
      ref="grid" 
      :recordDoubleClick="recordDoubleClick" 
      :rowSelected="singleClick" 
      :dataSource="data" 
      :allowPaging="true" 
    > 
    .    .     .     . 
    </ejs-grid> 
  </div> 
</template> 
<script> 
.   .    .   . 
Vue.use(GridPlugin); 
window["timer"] =0; 
window["isDoubleClick"] = false; 
 
export default { 
  data() { 
    return { 
      data: data 
    }; 
  }, 
  provide: { 
    grid: [Page] 
  }, 
  methods: { 
    recordDoubleClick: function(args) { 
      isDoubleClick = true; 
    }, 
    singleClick: function(args) { 
      window.clearTimeout(timer); 
      var timer = setTimeout( 
        function() { 
          if (isDoubleClick) { 
  // you code here while double click action 
          } else { 
            this.prevDataFn.call(); // Call the prevDataFn function while we do a single click 
          } 
          isDoubleClick = false; 
        }.bind(this),1000); 
 
      selectedRecords.push(args.data); 
    }, 
    prevDataFn: function() { 
      // you code here while single click action 
    } 
  } 
}; 


Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar. 


Loader.
Live Chat Icon For mobile
Up arrow icon