Edit event in self-created template - not binding all data as default

[mateusz.kubis]

Hello!

I have created a scheduler with my own editor template.

Adding new events works really good, but I have a problem while trying to update any of them.

I have created an event in that way:

And its showing good on scheduler:

But when I try to edit it, I have only dates as default:

How can I achieve my goal to have all data as default?

My code: https://codeshare.io/Od1ldA

Sample added data:

[
    {
        "Description": "Sample_subject",
        "Car": "Skoda Fabia [SERWIS]",
        "StartTime": "2023-05-23T07:00:00.000Z",
        "EndTime": "2023-05-23T08:00:00.000Z",
        "IsAllDay": false,
        "Notes": "Sample_note",
        "StartTimezone": null,
        "EndTimezone": null,
        "Id": 2
    }
]

Regards,

Mateuysz

[Vijay Ravi]

Hi Mateusz,

Sample: https://stackblitz.com/edit/editor-template?file=index.js

You can resolve the issue you reported by binding the value property as shown below. We have shared the sample above with your code. Please try it and let us know if you require any further assistance.

[index.js]

function editorTemplate(props) {

      return props !== undefined ? (

        <>

          <table className="custom-event-editor" style={{ width: "100%" }}>

            <tbody>

              <tr>

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

                <td colSpan={4}>

                  <input

                    id="Description"

                    className="e-field e-input"

                    type="text"

                    name="Description"

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

                    value={(props).Description || null}

                  />

                </td>

              </tr>

              <tr>

                <td className="e-textlabel">Samochód</td>

                <td colSpan={4}>

                  <DropDownListComponent

                    id="Car"

                    placeholder="Wybierz samochód"

                    data-name="Car"

                    className="e-field"

                    dataSource={[

                      "Skoda Fabia [SERWIS]",

                      "Skoda Fabia [RAFAŁ]",

                      "Citroen C3 [MACIEJ]",

                    ]}

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

                    value={(props).Car || null}

                  ></DropDownListComponent>

                </td>

              </tr>

              <tr>

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

                <td colSpan={4}>

                  <DateTimePickerComponent

                    format="dd.MM.yyyy hh:mm a"

                    id="StartTime"

                    data-name="StartTime"

                    value={

                      new Date((props).startTime || (props).StartTime)

                    }

                    className="e-field"

                  ></DateTimePickerComponent>

                </td>

              </tr>

              <tr>

                <td className="e-textlabel">Powrót</td>

                <td colSpan={4}>

                  <DateTimePickerComponent

                    format="dd.MM.yyyy hh:mm a"

                    id="EndTime"

                    data-name="EndTime"

                    value={

                      new Date((props).endTime || (props).EndTime)

                    }

                    className="e-field"

                  ></DateTimePickerComponent>

                </td>

              </tr>

              <tr>

                <td className="e-textlabel">Cały dzień</td>

                <td colSpan={4}>

                  <input

                    id="EndTime"

                    data-name="IsAllDay"

                    className="e-field"

                    type="checkbox"

                  />

                </td>

              </tr>

              <tr>

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

                <td colSpan={4}>

                  <textarea

                    id="Notes"

                    className="e-field e-input"

                    value={(props).Notes || null}

                    name="Notes"

                    rows={3}

                    cols={50}

                  ></textarea>

                </td>

              </tr>

            </tbody>

          </table>

        </>

      ) : (

        <div></div>

      );

    }

Output Screenshot:

Regards,

Vijay Ravi

[mateusz.kubis]

Hi Vijay,

It is exactly as I wanted.

Thank you, I'm really thankful for that!

Regards,
Mateusz Kubis

[mateusz.kubis]

Hi Vijay,

I found just one more problem.

When I create an event, I cannot edit Description and Notes (even in your example):

Can you help me with that?

Regards,
Mateusz Kubis

[Vijay Ravi]

Hi Mateusz,

Sample: https://stackblitz.com/edit/editor-template-gtjsvu?file=index.js

You can resolve your reported problem by adding the onchange in your sample as shown in the below code snippet.

Please try the sample and let us know if you require any further assistance.

[index.js]

  function handleNotesChange(event) {

    //change the notes field value

    const newNotesValue = event.target.value;

  }

 

  function handleDescriptionChange(event) {

    //change the description field value

    const newDescriptionValue = event.target.value;

  }

 

  function editorTemplate(props) {

    return props !== undefined ? (

      <>

        <table className="custom-event-editor" style={{ width: '100%' }}>

          <tbody>

            <tr>

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

              <td colSpan={4}>

                <input

                  id="Description"

                  className="e-field e-input"

                  type="text"

                  name="Description"

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

                  defaultValue={props.Description || null}

                  onChange={handleDescriptionChange}

                />

              </td>

            </tr>        

            <tr>

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

              <td colSpan={4}>

                <textarea

                  id="Notes"

                  className="e-field e-input"

                  defaultValue={props.Notes || null}

                  name="Notes"

                  rows={3}

                  cols={50}

                  onChange={handleNotesChange}

                ></textarea>

              </td>

            </tr>

          </tbody>

        </table>

      </>

    ) : (

      <div></div>

    );

  }

Regards,

Vijay Ravi