FooterTemplate - Textbox

[Dave]

Hi,

when I use a textbox, e.g. TextBoxComponent, as the footer template, it does not render anything and it's not interactive therefore.

Inspecting the markup with devtools, I see the input is within the HTML but it's not showing up.

[Vignesh Srinivasan]

Hi Dave, 

 

We have customized the sample based on your requirement, textbox inside the dropdown list, footer template. Please find the code and definition below. 

 

Code snippet: 

 

 

<ejs-dropdownlist 

          id="multi-template" 

          :dataSource="data" 

          :fields="fields" 

          cssClass="ddl-template" 

          :placeholder="watermark" 

          :footerTemplate="footerTemplate" 

          :open="onOpen" 

          :close="onClose" 

          popupHeight="450px" 

></ejs-dropdownlist> 

 

template: `<ejs-textbox id="textbox" 

         v-on:blur.native="onBlur" floatLabelType="Auto" 

        placeholder="Enter a value" 

      ></ejs-textbox>`, 

 

 

 

We have added mousedown event to the popup element to get the argument when textbox component is clicked. 

 

onOpen: function (e) { 

    e.popup.element.addEventListener("mousedown", this.onClick); 

  }, 

 

 

After the mousedown event triggered, we have add a class ‘e-close-restrict’ to check this class with popop list element to prevent the popup from closing when the dropdown input element loss focus. 

 

onClick: function (e) { 

    if (e.target.tagName === "INPUT") { 

      document 

        .getElementsByClassName("e-dropdownlist")[0] 

        .ej2_instances[0].popupObj.element.classList.add("e-close-restrict"); 

      document 

        .getElementsByClassName("e-dropdownlist")[0] 

        .ej2_instances[0].focusOut(); 

    } 

  }, 

 

We have passed the e.cancel = true  in close event to prevent the popup from close when textbox element is clicked. 

 

onClose: function (e) { 

    if (e.popup.element.classList.contains("e-close-restrict")) { 

      e.cancel = true; 

    } else { 

      document 

        .getElementsByClassName("e-dropdownlist")[0] 

        .ej2_instances[0].hidePopup(); 

    } 

  }, 

 

Inside the textbox blur event, we called the public method  hidePopup()to close the popup. 

 

 

onBlur: function () { 

    var ddlObj = document.getElementsByClassName("e-dropdownlist")[0] 

      .ej2_instances[0]; 

    ddlObj.popupObj.element.classList.remove("e-close-restrict"); 

    ddlObj.beforePopupOpen = true; 

    ddlObj.hidePopup(); 

  }, 

 

 

Sample: https://codesandbox.io/s/date-time-picker-floatlabel-forked-9y3vb?file=/src/App.vue 

 

Screenshot: 

 

 

 

 

Kindly check with the above sample. Please let us know if you need any further assistance. 

 

Regards, 

 

Vignesh Srinivasan. 

[Dave]

Thanks for your answer.

Is it possible to have the default behavior for the dropdown menu, like clicking outside of it to close it?

I see the close event is not triggered when I set e.cancel = true and click outside the dropdown list.Closing the dropdown when losing the focus of the textbox is not what I want.

[Vignesh Srinivasan]

Hi Dave, 

 

We have customized the sample based on your requirement, popup close after click outside of the component. We have added mousedown event to the document to close the popup on click outside of the document. Please find the code below. 

 

Code snippet: 

 

 

mousedown: function (e) { 

    if (e.target.tagName === "HTML") { 

      var ddlObj = document.getElementsByClassName("e-dropdownlist")[0] 

        .ej2_instances[0]; 

      ddlObj.popupObj.element.classList.remove("e-close-restrict"); 

      ddlObj.beforePopupOpen = true; 

      ddlObj.hidePopup(); 

    } 

  }, 

 

 

 

Sample: https://codesandbox.io/s/date-time-picker-floatlabel-forked-fn1rk?file=/src/App.vue 

 

Kindly check with the above sample. Please let us know if you need any further assistance. 

 

Regards, 

 

Vignesh Srinivasan.