Custom datepicker component in filter bar.

[Masoud Moghaddari]

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]

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> 

 

... 

 

 

Sample: https://codesandbox.io/s/vue-template-k8zvh  

Please get back to us if you need further assistance. 

Regards, 

Seeni Sakthi Kumar S 

[Masoud Moghaddari]

Hi Seeni,

My issue has been resolved. Thank you so much.

Best Regards

Masoud Moghaddari

[Seeni Sakthi Kumar Seeni Raj]

Hi Masoud,  

  

Thanks for the update.

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

Regards,  

Seeni Sakthi Kumar