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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Double Click

Thread ID:

Created:

Updated:

Platform:

Replies:

144260 Apr 27,2019 01:10 AM UTC Aug 5,2019 12:29 PM UTC Vue 5
loading
Tags: Data Grid
William Morgenweck
Asked On April 27, 2019 01:10 AM UTC

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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


William Morgenweck
Replied On 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. 

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


William Morgenweck
Replied On 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"
>

Balaji Sekar [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon