DateTimePicker in Editor Template

[Anais Miltenberger]

Hello,

I am having some trouble with a custom editor.

I have added a dateTimePicker component but it seems like the value isn't linked as expected... 

When I open the editor the time is correct for the selected celll. But when i change the value it doesn't save.

Here is my html template :

<ng-template #editorTemplate let-data>

                <table class="custom-event-editor" width="100%" cellpadding="5">

                    <tbody>

                        <tr>

                            <td class="e-textlabel" i18n>Conducteur</td>

                            <td colspan="4">

                                <ejs-autocomplete id='Subject' #Subject class="e-field" data-name='Subject'

                                    [dataSource]='driverSubject' [autofill]='true' [fields]='driverField' 

                                    value='{{data.Subject}}' [placeholder]='driverHolder' filterType='StartsWith' [allowCustom]='false'>

                                </ejs-autocomplete>

                            </td>

                        </tr>

                        <tr>

                            <td class="e-textlabel" i18n>Du</td>

                            <td colspan="4">

                                <ejs-datetimepicker id="StartTime" data-name="StartTime" class="e-field"  [value]='dateParser(data.startTime || data.StartTime)' format="M/dd/yy h:mm a"></ejs-datetimepicker>

                            </td>

                        </tr>

                        <tr>

                            <td class="e-textlabel" i18n>Au</td>

                            <td colspan="4">

                                <ejs-datetimepicker id="EndTime" data-name="EndTime" class="e-field"

                                    format="M/dd/yy h:mm a" [value]='dateParser(data.endTime || data.EndTime)'></ejs-datetimepicker>

                            </td>

                        </tr>

                        <tr>

                            <td class="e-textlabel">Service</td>

                            <td colspan="4">

                                <input id="ServiceId" type="text" value="" name='ServiceId'

                                    class="e-field  e-input" style="width: 100%"/>

                            </td>

                        </tr>

                        <tr>

                            <td class="e-textlabel">Véhicule</td>

                            <td colspan="4">

                                <input id="DeviceId" type="text" value="" name='DeviceId'

                                    class="e-field  e-input" style="width: 100%" />

                            </td>

                        </tr>

                    </tbody>

                </table>

            </ng-template>

and the typescript :

  public dateParser(data: string) {

    return new Date(data);

  }

onPopupOpen(args: PopupOpenEventArgs): void {

    if (args.type === "Editor") {

      let eventData: any = args.data;

      let serviceValue = isArray(eventData.ServiceId)

        ? eventData.ServiceId[0]

        : eventData.ServiceId;

      let deviceValue = isArray(eventData.DeviceId)

        ? eventData.DeviceId[0]

        : eventData.DeviceId;

      let serviceElement: HTMLInputElement = args.element.querySelector(

        "#ServiceId",

      ) as HTMLInputElement;

      if (!serviceElement.classList.contains("e-dropdownlist")) {

        let dropDownListObject: DropDownList = new DropDownList({

          placeholder: "Choisir un service",

          value: serviceValue,

          dataSource: this.servicesDataSource,

          fields: { text: "Name", value: "Id" },

        });

        dropDownListObject.appendTo(serviceElement);

      }

      let deviceElement: HTMLInputElement = args.element.querySelector(

        "#DeviceId",

      ) as HTMLInputElement;

      if (!deviceElement.classList.contains("e-dropdownlist")) {

        let dropDownListObject: DropDownList = new DropDownList({

          placeholder: "Choisir un vehicule",

          value: deviceValue,

          dataSource: this.devicesDataSource.filter(

            (device) => device.ServiceId === serviceValue,

          ),

          fields: { text: "Name", value: "Id" },

        });

        dropDownListObject.appendTo(deviceElement);

      }

    }

  }

Please, can you help me on this ?

[Anais Miltenberger]

Hi,

I found the answer in the documentation here:

https://ej2.syncfusion.com/angular/documentation/schedule/editor-template/?_ga=2.196868716.1711268495.1589376409-1478984002.1583226206#customizing-the-default-time-duration-in-editor-window

However, I have another question about this editor template.

I have 2 dropdowns linked to 2 different resources: Services and devices.

The available devices depend on the chosen services. 

When I open the editor, I have the correct values for both resources in the clicked cell. But I would like to be able to modify the service in the editor and the list of available devices would change as well.

Is this possible?

[Ravikumar Venkatesan]

Hi Anais, 

Greetings from Syncfusion. 

We have validated your reported query “I would like to be able to modify the service in the editor and the list of available devices would change as well. Is this possible?” at our end. We have achieved your requirement with the help of the below code. 

[app.component.ts] 

      let projectElement: HTMLInputElement = args.element.querySelector('#ServiceId'); 

      if (!projectElement.classList.contains('e-multiselect')) { 

        let projectObj: MultiSelect = new MultiSelect({ 

          placeholder: 'Choose a Service', 

          fields: { text: 'text', value: 'id' }, 

          dataSource: <any>this.projectDataSource, 

          value: <string[]>(((args.data as any).ServiceId instanceof Array) ? (args.data as any).ServiceId : [(args.data as any).ServiceId]), 

          change: (e) => { 

            let taskObj = (document.getElementById('DeviceId') as any).ej2_instances[0]; 

            let value = e.value; 

            let result = this.categoryDataSource.filter( 

              (task) => (value as number[]).indexOf((task as any).groupId) > -1 

            ) 

            taskObj.dataSource = result; 

            taskObj.value[0] = result.length > 0 ? (result[0] as any).id : []; 

          } 

        }); 

        projectObj.appendTo(projectElement); 

      } 

Sample: https://stackblitz.com/edit/angular-scheduler-editor-window-template-dkbhs3?file=app.component.ts 

Kindly try the above sample and get back to us If you would require further assistance. 

API (change event): https://ej2.syncfusion.com/angular/documentation/api/multi-select/#change 

Regards 

Ravikumar Venkatesan 

[Anais Miltenberger]

Your answer helped me a lot, and now i can make it work.

Thank you !

[Ravikumar Venkatesan]

Hi Anais, 

You are most welcome. 

We are happy that our solution has helped you. 

Please get in touch with us if you need any further assistance. 

Regards, 

Ravikumar Venkatesan