Additional fields

[Giovanni Michielin]

Good morning,

I need to add a datagrid or similar component as additional field into the schedule editor.

I am able to add texts, combo boxes but not data grid.

I am using schedule component to generate a simple Purchase Order.  I need something like an editable multi column component that allows me to select one or more(up to 5)  SKU CODES  and type QUANTITIES requested.

Thanks

Giovanni 

[Vijay Ravi]

Hi Glovanni,
 

Based on your requirements, We prepare the angular sample for adding additional field like DataGrid component can be added in to the default editor window as shown in the below shared code snippet. Refer the below shared sample for your reference. Kindly try it out.

[app.component.ts]

import { GridComponent, GridModule, GridAllModule, EditService, ToolbarService, } from '@syncfusion/ej2-angular-grids';

import { Grid, Page, Edit, Toolbar, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-grids';

 

@Component({

imports: [

        

        ScheduleModule,

        TimePickerModule,

        GridModule,

        GridAllModule

    ],

providers: [DayService, 

                WeekService, 

                WorkWeekService, 

                MonthService,

                AgendaService,

                MonthAgendaService, EditService],

standalone: true,

  selector: 'app-root',

  // specifies the template string for the Schedule component

  template: `<ejs-schedule (popupOpen)='onPopupOpen($event)'></ejs-schedule>`

})

 

export class AppComponent {

    @ViewChild('grid')

    public grid!: GridComponent;

       public data = [{ 

        OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, OrderDate: new Date(8364186e5) },

            { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, OrderDate: new Date(836505e6) },

            { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, OrderDate: new Date(8367642e5) }

        ];

    

onPopupOpen(args: PopupOpenEventArgs): void {

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

            let row: HTMLElement = createElement('div', { className: 'custom-field-row' });

                let formElement: HTMLElement = args.element.querySelector('.e-schedule-form') as HTMLElement;

                formElement.firstChild?.insertBefore(row, args.element.querySelector('.e-title-location-row'));

                let container: HTMLElement = createElement('div', { className: 'custom-field-container' });

                let inputEle: HTMLInputElement = createElement('div', {

                    className: 'e-field-input', attrs: { name: 'EventType' }

                }) as HTMLInputElement;

                container.appendChild(inputEle);

                row.appendChild(container);

                let dropDownList: Grid = new Grid({

                    dataSource: this.data,

                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                    columns: [

                        { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },

                        { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' },

                        { field: 'Freight', headerText: 'Freight', textAlign: 'Right', width: 120, format: 'C' },

                        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd' }

                    ],

                });

                dropDownList.appendTo(inputEle);

                inputEle.setAttribute('name', 'EventType');

            }

        }

    }

 

Sample link: grid component in default editor window (forked) - StackBlitz

Output screenshot:

please get back to us if you need any further assistance

Regards,

Vijay

[Giovanni Michielin]

Hi viJay,

thank you for your reply.

I was able to make it working.

Is there a way to resize default editor window at any desired length  in order to make more vertical space for the  grid component.

Best regards,

Giovanni

[Vijay Ravi]

Hi Glovanni,

Based on your requirements, you need to change the desired width of the editor window because the grid component column is hidden. We suggest you set the width of the editor window style in the popupOpen event as shown in the code snippet below. Please refer to the shared sample and try it out.

[index.js]

onPopupOpen(args: PopupOpenEventArgs): void {

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

        let editorElement = args.element as HTMLElement;

        // Set the width of the editor window

        editorElement.style.width = '600px';

 

        // rest of your code...

    }

}

Sample link: https://stackblitz.com/edit/grid-component-in-default-editor-window-flfqxa?file=src%2Fapp.component.ts,src%2Findex.css

Output Screenshot:

Regards,

Vijay