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

Jalali Calendar Datepicker In Query Builder

Thread ID:

Created:

Updated:

Platform:

Replies:

147955 Sep 29,2019 01:33 PM UTC Oct 14,2019 07:20 AM UTC Vue 11
loading
Tags: Query Builder
Masoud Moghaddari
Asked On September 29, 2019 01:33 PM UTC

Hi there,

I'm using Data Grid + Query Builder (Server side) to view and filter data in Farsi (Persian) locale. Some columns are in Date format and I need to show a Jalali datepicker in Query Builder.
I already have seen some other threads regarding this issue and I know that it is under development.
My question is: Can I set the date picker button in Query Builder to show a third-party date picker?

Best Regards
Masoud Moghaddari

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On October 1, 2019 01:13 PM UTC

Hi Masoud, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your requirement and integrated Vue-Material DatePicker (third party control) in QueryBuilder by using template property. Please find the below code snippets, 
 
Code Snippet 
var comp = Vue.component("datepicker", { 
    el: "#_group0_rule0_valuekey0", 
    template: '<md-datepicker />', 
    data() { 
        return { 
            data: {} 
        }; 
    } 
}); 
 
export default { 
    data: function() { 
        return { 
            dataSource: dataSource.expenseData, 
            textAreaContent: '', 
            paymentOperators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }], 
            transOperators: [{key:'Equal',value:'equal'},{key:'Not Equal',value:'notequal'}], 
            amountOperators: [{ key: 'Equal', value: 'equal' },{ key: 'Not equal', value: 'notequal' },{ key: 'Greater than', value: 'greaterthan' }, 
                        { key: 'Less than', value: 'lessthan' },{ key: 'Less than or equal', value: 'lessthanorequal' }, 
                        { key: 'Greater than or equal', value: 'greaterthanorequal' }], 
            paymentTemplate: { 
                create: () => { 
                    return document.createElement("div"); 
                }, 
                destroy: (args) => {}, 
                write: () => { 
                    var componentObj = Vue.extend(comp); 
                    new componentObj().$mount(); 
                } 
            }, 
 
            importRules: { 
                'condition': 'and', 
                'rules': [{ 
                    'label': 'Payment Mode', 
                    'field': 'PaymentMode', 
                    'type': 'date', 
                    'operator': 'equal' 
                }] 
            } 
        }; 
    } 
} 
 
For your convenience we have prepared a sample. Please find the sample link in below 
 
Please use the below commands to run the sample,  
npm install @syncfusion/ej2-vue-querybuilder --save 
npm install vue-material –save 
npm run dev 
 
Could you please check the above details and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


Masoud Moghaddari
Replied On October 2, 2019 01:37 PM UTC

Hi Vinoth,
Thanks for your efforts

Firstly, your sample logs this error in console:
" [Vue warn]: option "el" can only be used during instance creation with the `new` keyword. "

Secondly, I modified your sample to be closer to my own application, so I changed query builder's template like this:
<ejs-querybuilder ref="querybuilder" :dataSource="dataSource" width="100%" :ruleChange="updateRule"> <e-columns> <e-column field='PaymentMode' label='Payment Mode' type='date' :operators="paymentOperators" :template='paymentTemplate' /> <e-column field='test2' label='test2' type='string' :operators="paymentOperators" /> </e-columns> </ejs-querybuilder>

Changes I made was: 1- removed "rule" attribute because I don't have any default rule in my app. 2- Changed type of first <e-column> to date because I need to show datepicker icon on the columns with the date type. 3- Added another column with type of string because I get different columns dynamically in my application.

Now, when I run the sample and select the second the first column it works ok, but when I switch to second column it gives below error and breaks up:
"Uncaught TypeError: Cannot read property 'parentNode' of null "

Hope I explained well enough, Please kindly help me with my problem if it's possible.

Thank you
Masoud Moghaddari

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On October 3, 2019 11:04 AM UTC

Hi Masoud, 
 
Good day to you. 
 
We have checked your reported issue and cleared it in the paymentTemplate. Please find the below code snippets, 
 
Code Snippet 
var comp = Vue.component("datepicker", { 
    data(args) { 
        return { 
            data: {} 
        }; 
    } 
}); 
 
paymentOperators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }], 
    paymentTemplate: { 
    create: () => { 
        var DateElement = document.createElement("div"); 
        return DateElement; 
    }, 
    destroy: (args) => {}, 
    write: (args) => { 
        var componentObj = Vue.extend(comp); 
        new componentObj({el: "#" + args.elements.id, template: '<md-datepicker id='+ args.elements.id +' />'}).$mount(); 
    } 
} 
 
Modified Sample Link: 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


Masoud Moghaddari
Replied On October 5, 2019 12:56 PM UTC

Hi Vinoth,

Thank you for all your efforts.
The sample you provided works great, however in my own application I use a "v-for" loop to dynamically create e-columns. When I use custom template in a v-for loop, it doesn't work, but it works when I just type plain template manually. Should I do anything else?

Thank You
Masoud

Narayanasamy Panneer Selvam [Syncfusion]
Replied On October 7, 2019 05:14 PM UTC

Hi Masoud, 
Thanks for your information. 
We have analyzed further on your requirement and have created the querybuilder columns in dynamically by using v-for loop and custom template. 
Please find the below code snippet: 
<template> 
    <div class="template-querybuilder-section"> 
    <div class="col-lg-8 control-section"> 
    <ejs-querybuilder id="querybuilder" ref="querybuilder" : dataSource="dataSource" :rule="importRules" width="100%" > 
    <e-columns> 
    <e-column v-for="item in columns" : field= "item.field" :label="item.label" :type= "item.type" :operators="item.operators" :template="item.template" /> 
    </e-columns> 
    </ejs-querybuilder> 
    </div> 
    </div> 
    </template > 
    columns: [ 
    { 
    field: "PaymentMode", label: "Payment Mode", type: "string", operators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }], template: { 
    create: () => { 
    var DateElement = document.createElement("div"); 
    return DateElement; 
    }, 
    destroy: (args) => { 
    }, 
    write: (args) => { 
    var componentObj = Vue.extend(comp); 
    new componentObj({ el: "#" + args.elements.id, template: '<md-datepicker id=' + args.elements.id + ' />' }).$mount(); 
    } 
    } 
    }, 
    { field: "test2", label: "test2", type: "string", operators: [{ value: 'equal', key: 'Equal' }, { value: 'notequal', key: 'Not Equal' }] } 
    ] 
Kindly let us know the above sample meets your requirement? If the provided sample is not helpful, get back to us with exact use case scenario to reproduce your issue. 
 
Regards, 
Narayanasamy P. 


Masoud Moghaddari
Replied On October 8, 2019 02:34 PM UTC

Hi Narayanasamy,

Thank you very much, It's showing datepicker and working great.
The next problem is that when I try to get Query Builder's rules on a button click, it does not retrieve datepicker's rule (text), but other field's value is returning.
Please guide me with my issue.

Thanks
Masoud.

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On October 9, 2019 08:20 AM UTC

Hi Masoud, 
 
Thank you for the update. 
 
We have checked your reported issue, if you want to get the third-party component value in query builder rules, you need to call notifyChange method in your third-party component events. Please find the below code snippet: 
  
Code Snippet 
write: (args) => { 
    let ds = ['Cash', 'Debit Card', 'Credit Card', 'Net Banking', 'Wallet']; 
    let dropDownObj = new DropDownList({ 
        dataSource: ds, 
        value: args.values, 
        change: (e) => { 
            this.$refs.querybuilder.ej2Instances.notifyChange(e.itemData.value, e.element); 
        } 
    }); 
    dropDownObj.appendTo('#' + args.elements.id); 
} 
 
In the above code snippet, we have created the DropDownList through the template property. We have called the notifyChange method in DropDownList change events. 
 
Please find the QueryBuilder template demo sample link: 
 
Could you please check the above details and get back to us if you need any further assistance on this? 
 
Regards 
Vinoth Kumar S 


Masoud Moghaddari
Replied On October 9, 2019 02:32 PM UTC

Hi Vinoth,

Thank you very much.
I've attached my code. Please take a look at it and kindly tell me how to access Query Builder instance in "dateMoment" method (on line 147). I've tried different solutions, but unfortunately weren't able to solve my issue.

Best Regards
Masoud

Attachment: code_ce9eacc8.zip

Saranya Dhayalan [Syncfusion]
Replied On October 11, 2019 12:58 PM UTC

Hi Masoud, 
 
We have checked your provided code snippet and get the querybuilder instance by using getComponent. Please find the below code snippet: 
 
methods: { 
        dateMoment() { 
            this.$el.classList.add('e-template'); 
            let querybuilder = getComponent(this.$el.closest('.e-query-builder.e-control'), 'query-builder'); 
            querybuilder.notifyChange(this.date, this.$el); 
        } 
    } 
 
 
Please find the modified sample link in below: 
 
 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
 
Regards, 
Saranya D 


Masoud Moghaddari
Replied On October 12, 2019 11:03 AM UTC

Hi Saranya,

The code you sent works great and my issue has been solved! Thank you so much for all your efforts!

Best Regards
Masoud

Saranya Dhayalan [Syncfusion]
Replied On October 14, 2019 07:20 AM UTC

Hi Masoud, 
 
Most Welcome.  
Please let us know, if you need any further assistance on this.  
 
Regards, 
Saranya D 


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