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

Custom datepicker component in filter bar.

Thread ID:

Created:

Updated:

Platform:

Replies:

148265 Oct 12,2019 12:30 PM UTC Oct 21,2019 06:06 AM UTC Vue 3
loading
Tags: Data Grid
Masoud Moghaddari
Asked On October 12, 2019 12:30 PM UTC

Hi there,

I'm using data grid and query builder together. I've been able to implement a custom datepicker component in query builder (based on my project needs).
Then I tried to implement my custom datepicker component in the filter bar. I've read the documentation and used filter bar template to show my custom datepicker component and it shows ok. My problem is when I select a date, It keeps reopening, I suspect my custom component keeps triggring over and over. 
Could you please kindly review my code and help me with my problem?
I've called my custom component "filterBarJalaliDt" on line 165.
In case you want to install my custom datepicker, please use this command: "npm install vue-persian-datetime-picker --save".

Best Regards
Masoud

Attachment: app_6732479d.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 16, 2019 12:02 PM UTC

Hi Masoud, 
 
Greetings from Syncfusion. 
 
Query:  It keeps reopening, I suspect my custom component keeps triggring over and over. Could you please kindly review my code and help me with my problem? 
 
We can reproduce the reported problem while rendering vue-persian-datetime-picker in filterbar template.  The cause of the problem is the datepicker popup has been rendered within the header element. Whenever, we click the popup of the datepicker which has been reopened again by the focus handler of the Grid. We have prevented the reopening by using close event of vue persian datepicker. Filtering operation, we have used filterByColumn method of the grid. Refer the below code snippets and sample for your reference. 
 
[code snippets] 
 
<template> 
    <div id="app"> 
        <ejs-grid id="Grid":toolbar="toolbar" :dataSource="data" :allowPaging="true" :editSettings="editSettings" :allowFiltering="true" ref="grid"> 
            <e-columns> 
                ... 
               <e-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" type="date" width="120" :filterBarTemplate="templateOptions"></e-column> 
                ... 
           </e-columns> 
        </ejs-grid> 
    </div> 
</template> 
 
<script> 
... 
export default { 
  name: "App", 
  data() { 
    ... 
     templateOptions: { 
        create: args => { 
          ... 
       }, 
        write: args => { 
          var componentObj = Vue.extend(filterBarJalaliDt); 
          new componentObj({ 
            el: "#" + args.element.id, 
            template: `<filterBarJalaliDt id=` + args.element.id + ` />` 
          }).$mount(); 
        } 
      } 
    }; 
  }, 
  ... 
}; 
 
var filterBarJalaliDt = Vue.component("filterBarJalaliDt", { 
  template: ` 
  <div> 
    <date-picker @open="onOpen" @close="onClose" v-model="date"></date-picker> 
  </div>`, 
  data() { 
    ... 
 methods: { 
    onOpen(picker) { 
      console.log("The datepicker is open"); 
    }, 
    onClose(picker) { 
      console.log("The datepicker was closed"); 
      var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 
      grid.filterByColumn("OrderDate","equal", new Date(picker.value)) 
     var wrapper = document.querySelector('.vpd-wrapper.vpd-dir-rtl'); 
      if(wrapper.closest('.e-gridheader')) { 
        wrapper.remove();    //removing the datepicker 
        document.querySelector('body').appendChild(wrapper); 
      } 
    } 
  } 
}); 
</script> 
 
... 
 
 

Please get back to us if you need further assistance. 

Regards, 
Seeni Sakthi Kumar S 


Masoud Moghaddari
Replied On October 20, 2019 12:58 PM UTC

Hi Seeni,

My issue has been resolved. Thank you so much.

Best Regards
Masoud Moghaddari

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On October 21, 2019 06:06 AM UTC

Hi Masoud,  
  
Thanks for the update.

We are happy to hear that your requirement has been resolved.

Regards,  
Seeni Sakthi Kumar 


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