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

Override click event

HI,

is it possible to override the click event for opening the dropdown? Imagine having a value template which has an interactive element on it. Whenever I hit that element, the dropdown opens first. I tried overriding 
"dropDownClick", "onMouseClick", "onDocumentClick" but none of them reacts when I actually hit text input element of the dropdown.


1 Reply 1 reply marked as answer

PM Ponmani Murugaiyan Syncfusion Team February 18, 2021 12:38 PM UTC

Hi Dave, 

Greetings  from Syncfusion support. 

We have studied your query, you can  prevent the event propagation in interactive element’s event handler to resolve this issue. please check the code snippet. 

<template> 
    <div> 
        <div class="control-section"> 
            <div id="content" 
                 style="margin: 0px auto; width: 300px; padding-top: 40px"> 
                <ejs-dropdownlist ref="dropobj" 
                                  id="multi-template" 
                                  :dataSource="data" 
                                  :fields="fields" 
                                  :placeholder="watermark" 
                                  :valueTemplate="vTemplate" 
                                  popupHeight="450px"></ejs-dropdownlist> 
            </div> 
        </div> 
    </div> 
</template> 
<style> 
</style> 
<script> 
import Vue from "vue"; 
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 
 
import { data } from "./datasource.js"; 
import { actionButton } from "./main"; 
 
Vue.use(DropDownListPlugin); 
 
var valueVue = Vue.component("valueTemplate", { 
  template: '<div><button @mousedown="fun($event)">buttton</button></div>', 
  data() { 
    return { 
      data: {}, 
    }; 
  }, 
  methods: { 
    fun: function (e) { 
      e.stopPropagation(); 
    }, 
  }, 
}); 
 
export default Vue.extend({ 
  data: function () { 
    return { 
      data: data, 
      fields: { textField: "ShipName", value: "ShipName" }, 
      watermark: "Select Employees", 
      actionButton: actionButton, 
      vTemplate: function (e) { 
        return { 
          template: valueVue, 
        }; 
      }, 
    }; 
 }, 
  methods: {}, 
}); 
</script> 
<style> 
</style> 


We have also attached the sample for the same. If you have more queries please revert to us. 

Regards, 
Ponmani M 


Marked as answer
Loader.
Up arrow icon