Insert custom data into custom field when using datamanager

[Elijah morgan]

Hello,

I am using the Schedule component. I am trying to insert custom data into an appointment for backend processing and I am using a dataManager.

The issue I am running into is that I am not sure how to insert this data in automagically with the data manager when I create an appointment.

I know the data when creating the component.

Thanks!

[Swathi Ravi]

Hi Elijah morgan,

You can add the custom field into the appointment by using the Scheduler's popupOpen event and add that respective filed into the database. Shared the code snippets below and attached the client and server side sample for your reference.

Sample: https://stackblitz.com/edit/ej2-react-schedule-additonal-fields?file=index.js

[index.js]

import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

import { DropDownList } from '@syncfusion/ej2-dropdowns';

 

const EditorCustomField = () => {

  const scheduleObj = useRef(null);

  let dataManger = new DataManager({

    url: 'http://localhost:54738/Home/LoadData',

    crudUrl: 'http://localhost:54738/Home/UpdateData',

    crossDomain: true,

    adaptor: new UrlAdaptor(),

  });

  const onPopupOpen = (args) => {

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

      // Create required custom elements in initial time

      if (!args.element.querySelector('.custom-field-row')) {

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

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

        formElement.firstChild.insertBefore(row, formElement.firstChild.firstChild);

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

        let inputEle = createElement('input', {

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

        });

        container.appendChild(inputEle);

        row.appendChild(container);

        let dropDownList = new DropDownList({

          dataSource: [

            { text: 'Public Event', value: 'public-event' },

            { text: 'Maintenance', value: 'maintenance' },

            { text: 'Commercial Event', value: 'commercial-event' },

            { text: 'Family Event', value: 'family-event' }

          ],

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

          value: args.data.EventType,

          floatLabelType: 'Always', placeholder: 'Event Type'

        });

        dropDownList.appendTo(inputEle);

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

      }

    }

  };

  return (<div className='schedule-control-section'>

    <div className='col-lg-12 control-section'>

      <div className='control-wrapper'>

        <ScheduleComponent  selectedDate={new Date(2021, 7, 23)} ref={scheduleObj} eventSettings={{ dataSource: dataManger }} popupOpen={onPopupOpen}>         

        </ScheduleComponent>

      </div>

    </div>

  </div>);

};

export default EditorCustomField;

Server side:

[HomeController.cs]

  public JsonResult UpdateData(EditParams param)

  {

      if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments

      {

          for (var i = 0; i < param.added.Count; i++)

          {

              var value = (param.action == "insert") ? param.value : param.added[i];

              int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1;

              DateTime startTime = Convert.ToDateTime(value.StartTime);

              DateTime endTime = Convert.ToDateTime(value.EndTime);

              ScheduleEventData appointment = new ScheduleEventData()

              {

                  Id = intMax + 1,

                  StartTime = startTime,

                  EndTime = endTime,

                  Subject = value.Subject,

                  Location = value.Location,

                  Description = value.Description,

                  IsAllDay = value.IsAllDay,

                  StartTimezone = value.StartTimezone,

                  EndTimezone = value.EndTimezone,

                  RecurrenceRule = value.RecurrenceRule,

                  RecurrenceID = value.RecurrenceID,

                  RecurrenceException = value.RecurrenceException,

                  GroupID = value.GroupID.ToString(),

                  EventType = value.EventType

              };

              db.ScheduleEventDatas.InsertOnSubmit(appointment);

              db.SubmitChanges();

          }

      }

      if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment

      {

          for (var i = 0; i < param.changed.Count; i++)

          {

              var value = (param.action == "update") ? param.value : param.changed[i];

              var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id));

              if (filterData.Count() > 0)

              {

                  DateTime startTime = Convert.ToDateTime(value.StartTime);

                  DateTime endTime = Convert.ToDateTime(value.EndTime);

                  ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id));

                  appointment.StartTime = startTime;

                  appointment.EndTime = endTime;

                  appointment.StartTimezone = value.StartTimezone;

                  appointment.EndTimezone = value.EndTimezone;

                  appointment.Subject = value.Subject;

                  appointment.Location = value.Location;

                  appointment.Description = value.Description;

                  appointment.IsAllDay = value.IsAllDay;

                  appointment.RecurrenceRule = value.RecurrenceRule;

                  appointment.RecurrenceID = value.RecurrenceID;

                  appointment.RecurrenceException = value.RecurrenceException;

                  appointment.GroupID = value.GroupID.ToString();

                  appointment.EventType = value.EventType;

              }

              db.SubmitChanges();

 

          }

      }

      var data = db.ScheduleEventDatas.ToList();

      return Json(data, JsonRequestBehavior.AllowGet);

  }

Regards,

Swathi Ravi

Attachment: ScheduleServerSample_f0eb8ffa.zip