Best way to use GridComponent with Scheduler custom event editor

[Drew]

Hello,

I am trying to use a GridComponent with a custom event editor to manage an array that is a property of an event - example:

{
Start: "2022-08-01 12:00",
End:  "2022-08-01 12:30",
Location: "Some location",
EventItems: [
{
StudentId: 1,
Amount: 50
},
{
StudentId: 2,
Amount: 35
}
]
}​

Is it possible to use e-field or something similar along with a GridComponent ? If not, what is the best way to work with the GridComponent (or similar) in a custom event editor?

Thanks

[Satheesh Kumar Balasubramanian]

Hi Drew,

 

Greetings from Syncfusion support.

We have prepared sample to use a GridComponent with a custom event editor.

 

index.js:

  onActionBegin(args) {

    if (args.data && args.data.EventItems) {

      args.data.EventItems[0].StudentId = this.editData.StudentId;

      args.data.EventItems[0].Amount = this.editData.Amount;

    }

    if (

      args.requestType === 'eventCreate' ||

      args.requestType === 'eventChange'

    ) {

      let data = args.data instanceof Array ? args.data[0] : args.data;

      args.cancel = !this.scheduleObj.isSlotAvailable(

        data.StartTime,

        data.EndTime

      );

    }

  }

  actionBegin(args) {

    if (args.requestType === 'save' && args.form) {

      this.editData = args.data;

    }

  }  

 

editorTemplate(props) {

    return props !== undefined ? (

      <table

        className="custom-event-editor"

        style={{ width: '100%' }}

        cellPadding={5}

      >

        <tbody>

          <tr>

            <td className="e-textlabel">Grid</td>

            <td colSpan={4}>

              <GridComponent

                dataSource={props.EventItems}

                editSettings={this.editOptions}

                toolbar={this.toolbarOptions}

                actionBegin={this.actionBegin.bind(this)}

              >

                <ColumnsDirective>

                  <ColumnDirective

                    uid="StudentId"

                    field="StudentId"

                    width="100"

                  />

                  <ColumnDirective uid="Amount" field="Amount" width="100" />

                </ColumnsDirective>

                <Inject services={[Edit, Toolbar]} />

              </GridComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Reason</td>

            <td colSpan={4}>

              <textarea

                id="Description"

                className="e-field e-input"

                name="Description"

                rows={3}

                cols={50}

                style={{

                  width: '100%',

                  height: '60px !important',

                  resize: 'vertical',

                }}

              ></textarea>

            </td>

          </tr>

        </tbody>

      </table>

    ) : (

      <div></div>

    );

  }

 

            <ScheduleComponent

              width="100%"

              height="650px"

              selectedDate={new Date(2021, 1, 15)}

              ref={(schedule) => (this.scheduleObj = schedule)}

              eventSettings={{ dataSource: this.data }}

              editorTemplate={this.editorTemplate.bind(this)}

              actionBegin={this.onActionBegin.bind(this)}

              showQuickInfo={false}

              eventRendered={this.onEventRendered.bind(this)}

              actionComplete={this.onActionComplete.bind(this)}

              popupClose={this.onPopupClose.bind(this)}

            >

              <Inject

                services={[Day, Week, WorkWeek, Month, Resize, DragAndDrop]}

              />

            </ScheduleComponent>

 

https://stackblitz.com/edit/react-grid-integrate-inside-schedule-editor?file=index.js,datasource.json

 

Kindly try the above sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B