Removing editor buttons

[Carla Candiotti]

Hello,

I've a custom editor template which contains mat-chip elements, mat-select, ...

When I validate my form, I've noticed that my custom attributes are not bound in the eventCreated event data. According to the documentation, I should add name and class='e-field' attributes to my custom fields, but the data is bound only if the fields are simple inputs. I want to avoid encapsulating all my fields in input, so can I remove default editor buttons and use my own in the editor template?

I've seen that thread and I wanted to do the same:

onPopupOpen(args: PopupOpenEventArgs): void {
    if (args.type == 'Editor') {
        let dialogObj = (args.element as EJ2Instance).ej2_instances[0];
        dialogObj.buttons = [];
        dialogObj.dataBind();
    }
}

But i'm getting strange errors when editing existing event :

So do you have any solution to safely remove default editor buttons?

[Ruksar Moosa Sait]

Hi Carla,

We suspect that the error might have caused since there is no className in the input fields. Hence, try the sample and if the issue persists share the below details to proceed further.

• Replicate the issue in the below sample or
• Simple issue reproducing sample.

Sample: https://stackblitz.com/edit/angular-yccdth?file=app.component.ts,package.json

Output:

Regards,

Ruksar Moosa Sait

[Carla Candiotti]

Hello,

Thanks for your response.

Here is updated example with angular material form fields: https://stackblitz.com/edit/angular-yccdth-efzzqc?file=app.component.ts,package.json,app.component.html,app%2Fapp.module.ts,app.component.css  . Adding class:'e-field' to mat-form-field causes errors

Here is what i'm trying to do: removing default editor buttons  https://stackblitz.com/edit/angular-1d9yfo?file=app.component.ts,app.component.html  . Seems like all cases work well but editing existing event, I'm getting an error.

Thanks for your help

[Ruksar Moosa Sait]

Carla, you can get the value from the mat-select field with help of the value property of the mat-select as highlighted in the code snippet. So, you can use the value property of the mat-select to set the value of it in the popupOpen event of the Schedule and add the mat-select value to the edited appointment in the editEvent method from the mat-select value property like the below code.

Sample: https://stackblitz.com/edit/angular-yccdth-f3gnca?file=app.component.html,app.component.ts

[app.component.html]

<mat-form-field
appearance="outline">

                <mat-label>Status</mat-label>

                <mat-select [(value)]="matValue">

                  <mat-option *ngFor="let status of statusData" [value]="status">{{status}}</mat-option>    

                </mat-select>

              </mat-form-field>

[app.component.ts]

matValue = "";

onPopupOpen(args: PopupOpenEventArgs): void {

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

      this.matValue = args.data.EventType;

      let buttons;

      this.currentEvent = this.scheduleObj.getEventDetails(args.target);

      let dialogObj = (args.element as EJ2Instance).ej2_instances[0];

      buttons = [

        {

          buttonModel: { content: 'EDIT', isPrimary: true },

          click: this.editEvent.bind(this),

        },

        {

          buttonModel: { content: 'DELETE', cssClass: 'e-event-delete' },

          click: this.eventDelete.bind(this),

        },

      ];

      dialogObj.buttons = buttons;

      dialogObj.dataBind();

    }

  }

public editEvent(e) {

    const eventData: { [key: string]: Object } =

    this.scheduleObj.eventWindow.getObjectFromFormData('e-schedule-dialog');

    eventData.Id = this.currentEvent.Id;

    eventData.EventType = this.matValue;

    this.scheduleObj.saveEvent(eventData);

    this.dialogClose();

  }

[Carla Candiotti]

Hello,

Thanks for your response 

We can't use ngModel  because the form is managed in another component so the form state is not visible from the component which use the calendar.

[Ruksar Moosa Sait]

Carla, we have created a new component app-editor-window and used @Input and @Output to share data between the parent context and child directives or components like the below code.

Sample: https://stackblitz.com/edit/angular-yccdth-2arsdq?file=app.component.html,app.component.ts,editor-window.component.ts,editor-window.component.html

[app.component.html]

  <ejs-schedule
#scheduleObj
width="100%"
height="550px"
[selectedDate]="selectedDate"
[eventSettings]="eventSettings"

    (actionBegin)="onActionBegin($event)"
(popupOpen)="onPopupOpen($event)"
[showQuickInfo]="showQuickInfo">

    <e-views>

      <e-view option="Day"></e-view>

      <e-view option="Week"></e-view>

      <e-view option="WorkWeek"></e-view>

      <e-view option="Month"></e-view>

    </e-views>

    <ng-template #editorTemplate let-data>

      <app-editor-window [matValue]="matValue" [appData]="data"
[separatorKeysCodes]="separatorKeysCodes" (newItemEvent)="statusValue($event)"></app-editor-window>

    </ng-template>

  </ejs-schedule>

[editor-window.component.ts]

@Input() matValue = "";

  @Input() appData: Record<string, any>;

  @Input() separatorKeysCodes: number[];

  @Input() Status: string;

  @Output() newItemEvent = new EventEmitter<string>();

emitStatusValue(value: string) {

    this.newItemEvent.emit(value);

  }

[editor-window.component.html]

<mat-form-field appearance="outline">

            <mat-label>Status</mat-label>

            <mat-select [(value)]="matValue" (selectionChange)="emitStatusValue($event.value)">

              <mat-option *ngFor="let status of statusData" [value]="status">{{status}}</mat-option>

            </mat-select>

   </mat-form-field>

[app.component.ts]

statusValue(item: string) {

    this.matValue = item;

  }

onPopupOpen(args: PopupOpenEventArgs): void {

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

      this.matValue = args.data.EventType;

      let buttons;

      this.currentEvent = this.scheduleObj.getEventDetails(args.target);

      let dialogObj = (args.element as EJ2Instance).ej2_instances[0];

      buttons = [

        {

          buttonModel: { content: 'EDIT', isPrimary: true },

          click: this.editEvent.bind(this),

        },

        {

          buttonModel: { content: 'DELETE', cssClass: 'e-event-delete' },

          click: this.eventDelete.bind(this),

        },

      ];

      dialogObj.buttons = buttons;

      dialogObj.dataBind();

    }