We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Editor template validation

Scheduler Editor Template Form validation.

For Example i have 10 fields the default validation is ok (save button).

1) my Query is Additionally i need to validate 3 fields by using custom button (Add Button) in the same form.

When i click save button the default validation should work (it is working) but in my case the add button validation is also working. Add button validation should work only when i click add button. How to fix this.


next

can i use the same validation function outside of scheduler form?



14 Replies

RM Ruksar Moosa Sait Syncfusion Team October 10, 2022 07:58 AM

Hi Vivek,


We have checked on your query and let you know that by default, when the Save button is clicked, the validation takes place to all the Validation fields in the editor window. Hence we suggest you to dynamically remove the validation rules applied for the Add button to achieve your requirement. Kindly refer the below documentation to remove the validation rules in the form validator.

https://ej2.syncfusion.com/documentation/form-validator/validation-rules/#adding-or-removing-rules


Can i use the same validation function outside of scheduler form?

We suspect you need to validate a form outside the Editor window. Hence, it is not possible to use the same validation function outside the scheduler. We suggest you to validate the fields separately. Kindly refer the below documentation and customize to validate the fields outside the scheduler.

https://ej2.syncfusion.com/documentation/form-validator/validation-rules/#html5-form-validation


Regards,

Ruksar Moosa Sait



VI Vivek replied to Ruksar Moosa Sait October 11, 2022 07:20 AM

Thankyou. 



RV Ravikumar Venkatesan Syncfusion Team October 12, 2022 12:18 AM

Hi Vivek,


Thanks for the update.


Kindly let us know if you need any further assistance on this.


Regards,

Ravikumar Venkatesan



VI Vivek October 13, 2022 01:41 PM

Hi Ravikumar Venkatesan,

1) How to get dynamic form fields values.

Currently, I am able to get the fields values which is presented when popup open.

but I need the fields values which is added dynamically(Array);

2) The scheduler grid is working fine when the data is in same page;

when I change by setstate the the data is not updating for scheduler(group name, list name), any suggestions,



RV Ravikumar Venkatesan Syncfusion Team October 14, 2022 09:53 AM

Hi Vivek,


Thanks for the update.


Sample: https://stackblitz.com/edit/ej2-react-schedule-dynamically-change-input-data?file=index.js


Q1: How to get dynamic form fields values

We have set the dynamic data array to the SubEventType field of the editor field based on the EventType chosen in the editor window as shown in the below code snippet.


[index.js]

  function editorTemplate(props) {

    return ((props !== undefined) ? <table className="custom-event-editor" style={width: '100%' }} cellPadding={5}><tbody>

      <tr><td className="e-textlabel">Summary</td><td colSpan={4}>

        <input id="Summary" className="e-field e-input" type="text" name="Subject" style={width: '100%' }} />

      </td></tr>

      <tr><td className="e-textlabel">Status</td><td colSpan={4}>

        <DropDownListComponent id="EventType" placeholder='Choose status' data-name='EventType' className="e-field" style={width: '100%' }} value={props.EventType} change={statusChange.bind(this)} dataSource={['New''Requested''Confirmed']}>

        </DropDownListComponent>

      </td></tr>

      <tr><td className="e-textlabel">Sub Status</td><td colSpan={4}>

        <DropDownListComponent id="SubEventType" placeholder='Choose sub status' data-name='SubEventType' className="e-field" value={props.SubEventType} style={width: '100%' }} dataSource={setData(props.EventType)}>

        </DropDownListComponent>

      </td></tr>

      <tr><td className="e-textlabel">From</td><td colSpan={4}>

        <DateTimePickerComponent id="StartTime" format='dd/MM/yy hh:mm a' data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent>

      </td></tr>

      <tr><td className="e-textlabel">To</td><td colSpan={4}>

        <DateTimePickerComponent id="EndTime" format='dd/MM/yy hh:mm a' data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent>

      </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>);

  }

 

  function statusChange(args) {

    let dialog = args.element.closest('.e-popup.e-schedule-dialog');

    if (dialog) {

      var subEventObj = dialog.querySelector('#SubEventType').ej2_instances[0];

      subEventObj.dataSource = setData(args.value);

    }

  }

 

  function setData(status) {

    let resultData = ['New one''New two'];

    if (status) {

      if (status === 'New') {

        resultData = ['New one''New two'];

      } else if (status === 'Requested') {

        resultData = ['Requested one''Requested two'];

      } else if (status === 'Confirmed') {

        resultData = ['Confirmed one''Confirmed two'];

      }

    }

    return resultData;

  }


Q2: when I change by setstate the the data is not updating for scheduler(group name, list name), any suggestions

We need additional details to validate your reported query at our end. Kindly share the below details it will help us to validate and provide the solution for your problem earlier.


  • Share a video demo of your reported issue.
  • Share issue reproducing code snippets or
  • Reproduce the problem in our shared sample or
  • Share a simple issue reproducing sample if possible.


Regards,

Ravikumar Venkatesan



VI Vivek October 16, 2022 11:46 PM

Hi Ravikumar Venkatesan,


Q2: when I change by setstate the the data is not updating for scheduler(group name, list name), any suggestions

Got the result;


Thank you for the update.



RV Ravikumar Venkatesan Syncfusion Team October 17, 2022 12:08 AM

Hi Vivek,


Thanks for the update.


We are happy that you have achieved your requirement.


Regards,

Ravikumar Venkatesan



VI Vivek November 1, 2022 12:40 AM

HI,

How to add additional controls  save and cancel button or

how to control save and cancel button function in react scheduler(Editor)



RV Ravikumar Venkatesan Syncfusion Team November 2, 2022 11:44 AM

You can add the Save and Cancel buttons and their functions to the React Schedule editor window on the popupOpen event of the Schedule, as shown in the shared snippet.


Sample: https://stackblitz.com/edit/ej2-react-schedule-add-custom-buttons-on-dialog?file=index.js


[index.js] 

function EditorTemplate() {

  let scheduleObj;

  let isDialogButtonsSet = false;

 

  function onEventSave(args) {

    // Yon can perform a save action here

  }

 

  function onDialogClose(args) {

    // Yon can perform close action here

  }

 

  function onPopupOpen(args) {

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

      if (!isDialogButtonsSet) {

        var dialogObj = args.element.ej2_instances[0];

        dialogObj.buttons = [

          { buttonModel: { content: 'Save'cssClass: 'e-primary e-event-save'isPrimary: true }, click: onEventSave.bind(this) },

          { buttonModel: { content: 'Cancel'cssClass: 'e-event-cancel' }, click: onDialogClose.bind(this) }

        ];

        isDialogButtonsSet = true;

      }

    }

  }

 

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

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

      <div className='control-wrapper'>

        <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2021115)} ref={schedule => scheduleObj = schedule} editorTemplate={editorTemplate.bind(this)} showQuickInfo={false} popupOpen={onPopupOpen.bind(this)}>

        </ScheduleComponent>

      </div>

    </div>

  </div>);

}

export default EditorTemplate;




VI Vivek November 7, 2022 05:31 AM

Yes, Thank you Ravikumar Venkatesan.


One more question,

1) I have used two timeline scheduler one is for booking and another one is for calculated data;

both working fine but problem is when is flip the second one (calculated data scheduler) the data shows only when is make any changes on that and save. when I refresh the data is not displaying


2) The above code removes all the buttons can i have the remove button back on default or the remove button functionality,

any suggestion to keep the default remove button(i have tried)



Attachment: one_945442ad.zip



RV Ravikumar Venkatesan Syncfusion Team November 7, 2022 03:16 PM

Q1: the data shows only when is make any changes on that and save

We require the below details to proceed further with your query and based on those, we will check and provide an appropriate solution.

  • Issue reproducing video demo.

  • Reproduce the problem in our shared sample or Issue reproducing sample.


Q2: The above code removes all the buttons can i have the remove button back on default or the remove button functionality,

You can achieve your requirement with the help of the created event in the schedule, as shown in the below snippet.


Sample: https://stackblitz.com/edit/ej2-react-schedule-editor-buttons-sample?file=index.js


[index.js]

  function onCreated() {

    if (scheduleObj) {

      var dialogObj = scheduleObj.eventWindow.dialogObject;

      var buttons = [

        { buttonModel: { content: 'Save'cssClass: 'e-primary e-event-save'isPrimary: true }, click: onEventSave.bind(this) },

        { buttonModel: { content: 'Cancel'cssClass: 'e-event-cancel' }, click: onDialogClose.bind(this) }

      ];

      dialogObj.buttons = dialogObj.buttons.splice(01).concat(buttons);

    }

  }



VI Vivek replied to Ravikumar Venkatesan November 8, 2022 01:41 AM

Thank you, Ravikumar Venkatesan


Q1: the data shows only when is make any changes on that and save

Issue reproducing video demo.


Attachment: dataload_issue_6bf538d1.zip


VI Vivek replied to Vivek November 9, 2022 12:14 AM

I have achieved the Q1 by manually assigning row id,

But now facing another problem that is

When i put scheduler height to < 750px or 70vh the data to grid table has nothing to show.

any sugg



RV Ravikumar Venkatesan Syncfusion Team November 10, 2022 05:19 AM

In your shared video demo, you have rendered the appointments, and while checking the Occupancy check box some numbers are displayed inside the Schedule work cells. We suspect that these number contents were hidden while changing the Schedule height. We need additional details to validate this further.


  • The entire issue of reproducing code snippets or
  • Reproduce the problem in our shared sample or
  • Sample demonstrating the issue

Loader.
Live Chat Icon For mobile
Up arrow icon