Value Updates in TemplateColumn and custom "between"-operator

[Jonas Czeslik]

Hello Syncfusion Team,

I am currently working on a QueryBuilder that should also contain a dateTimePicker. I used the TemplateColumn to achieve this: 

let dateTimeTemplate: TemplateColumn = {

  create: () => {

    return createElement('input', { attrs: { type: 'Date' } });

  },

  destroy: (args: { elementId: string }) => {

    let datetime: DateTimePicker = getComponent(

      document.getElementById(args.elementId),

      'datetimepicker'

    ) as DateTimePicker;

    if (datetime) {

      datetime.destroy();

    }

  },

  write: (args: { elements: Element; values: Date }) => {

    let dateTimeInstance: DateTimePicker = new DateTimePicker({

      width: '230px', // Make a bit wider to ensure that the whole dateTime string is visible

    });

    dateTimeInstance.appendTo('#' + args.elements.id);

  },

};

This works, but I have two questions about the further use of the component:
1) If I load a DateTimePicker into the QueryBuilder and call the getRules() - method, it is not getting filled with the dateTimePicker value, but only with an empty string. How can I connect the DateTimePicker-value with the according value in the rules-property, so it is getting updated accordingly?

2) I would like to also make use of the "between" property that renders two dateTimePickers, which does not seem to work with my custom template. Is that possible to achieve, too? 

Thanks in regard
Jonas

[YuvanShankar Arunagiri]

Hi Jonas,

We have validated your reported query and prepared the sample based on your requirement.

Query: If I load a DateTimePicker into the QueryBuilder and call the getRules() - method, it is not getting filled with the dateTimePicker value, but only with an empty string. How can I connect the DateTimePicker-value with the according value in the rules-property, so it is getting updated accordingly?

You need to convert the dataTime format to string type for value and called the notifyChange method of the querybuilder. Then only it will come in the value of the getRules method.

[app.component.ts]:

let format = { type: "dateTime", skeleton: "hm" };

            if (args.operator === "equal") {

                let dateTimeInstance = new DateTimePicker({

                    change: (e) => {

                        var val = this.intl.formatDate(e.value, format);

                        this.qryBldrObj.notifyChange(val, e.element);

                    }

                });

                dateTimeInstance.appendTo('#' + args.elements.id);

Query: I would like to also make use of the "between" property that renders two dateTimePickers, which does not seem to work with my custom template. Is that possible to achieve, too? 

Yes, it possible to achieve your requirement. Please refer the below code snippet.

var dateArr = args.values ? args.values : [];

                let dateTimeInstance1 = new DateTimePicker({

                    change: (e) => {

                        dateArr[0] = this.intl.formatDate(e.value, format);

                        this.qryBldrObj.notifyChange(dateArr, e.element);

                    }

                });

                dateTimeInstance1.appendTo('#' + args.elements[0].id);

                let dateTimeInstance2 = new DateTimePicker({

                    change: (e) => {

                        dateArr[1] = this.intl.formatDate(e.value, format);

                        this.qryBldrObj.notifyChange(dateArr, e.element);

                    }

                });

                dateTimeInstance2.appendTo('#' + args.elements[1].id);

For your convenience, we have attached the sample link.

Sample link: https://stackblitz.com/edit/angular-557u8r-8jrhqh?file=app.component.ts

Please get back to us if you need further assistance on this.

Regards,

Yuvan Shankar A

[Jonas Czeslik]

Thank you so much. I had to do an adaptions to the stackblitz, since it was not working initially. 

I replaced 

document.getElementById(args.elementId)

with

document.getElementById(args.elements[i].id)

because otherwise only the first dateTimePicker is removed (twice), so switching to Between and back to equal would have always left a duplicate dateTimePicker. 

Apart from that, it is working perfectly fine!

[YuvanShankar Arunagiri]

Hi Jonas,

Thanks for update. Please get back to us if you need further assistance on this.

Regards,

Yuvan Shankar A