Double Click

[William Morgenweck]

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]

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); 

    } 

}); 

   

 

Documentation : https://ej2.syncfusion.com/vue/documentation/api/grid/#recorddoubleclick 

 

Sample               : https://plnkr.co/edit/4MlArVffv6dkLU8dlEec?p=preview 

 

Regards, 

Pavithra S. 

[William Morgenweck]

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]

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]

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]

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 

    } 

  } 

}; 

Sample link: https://codesandbox.io/s/vue-template-ligc2 

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

Regards, 

Balaji Sekar.