Custom Editor Template shows [object Object] instead of elements

[Shukri Khilfeh]

Hi,

The template custom Editor template is working on development and staging but not on production environment.

here is the template I'm using:

<script id="EventEditorTemplate" type="text/x-template">

          <table

            className="custom-event-editor mt-5"

            width="100%"

            cellPadding="5"

          >

            <tbody>

              <tr>

                <td className="e-textlabel">Guest Email</td>

                <td colSpan="3">

                  <input

                    id="guestEmail"

                    key="guestEmail"

                    className="e-field e-input"

                    type="text"

                    name="guestEmail"

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

                  />

                </td>

              </tr>

              <tr>

                <td className="e-textlabel">Number Of Guests</td>

                <td>

                  <input

                    min={0}

                    step={1}

                    key="numberOfGuests"

                    type="number"

                    id="numberOfGuests"

                    name="numberOfGuests"

                    className="e-field e-input text-center"

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

                  />

                </td>

              </tr>

              <tr>

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

                <td>

                  <input

                    type="date"

                    className="e-field e-input"

                    id="from"

                    key="fromDate"

                    name="from"

                    placeholder="yyyy-mm-dd"

                  />

                </td>

                <td className="e-textlabel e-input">To</td>

                <td>

                  <input

                    type="date"

                    className="e-field e-input"

                    id="to"

                    key="toDate"

                    name="to"

                    placeholder="yyyy-mm-dd"

                  />

                </td>

              </tr>

              <tr id="dateerrormsgrow" className="d-none">

                <td></td>

                <td colSpan="3">

                  <p id="dateerrormsgtext" className="text-danger text-center">

                    Start date must be before end date

                  </p>

                </td>

              </tr>

              <tr>

                <td className="e-textlabel">Total Price</td>

                <td>

                  <input

                    min={0}

                    step={1}

                    type="number"

                    className="e-field e-input text-center"

                    id="totalPrice"

                    name="totalPrice"

                  />

                </td>

              </tr>

              <tr hidden>

                <td className="e-textlabel">Pitch Name</td>

                <td>

                  <input

                    type="text"

                    min="0"

                    step="1"

                    id="pitchId"

                    className="e-field e-input text-center"

                    name="pitchId"

                    key="pitchId"

                  />

                </td>

              </tr>

              <tr>

                <td></td>

                <td>

                  <input

                    type="text"

                    className="e-field"

                    name="id"

                    id="id"

                    key="bookingid"

                    hidden

                  />

                </td>

              </tr>

            </tbody>

          </table>

          <p

            id="blockhint"

            className="text-dark text-center font-weight-bold mt-5"

          ></p>

        </script>

Here is my popUpOpen event handler:

 function popupOpen({ type, element, data }) {

    {

      if (type === "Editor" && element && data) {

        const startElement = document.getElementById("from");

        const endElement = document.getElementById("to");

        const totalPriceElement = document.getElementById("totalPrice");

        const numberOfGuestsElement = document.getElementById("numberOfGuests");

        const blockhintElement = document.getElementById("blockhint");

        if (

          startElement &&

          endElement &&

          totalPriceElement &&

          numberOfGuestsElement &&

          blockhintElement

        ) {

          startElement.value = formatDate(data.from);

          endElement.value = formatDate(

            data.to.getTime() - data.from.getTime() >= 86400000

              ? data.to

              : new Date(data.from.getTime() + 86400000)

          );

          if (!data.hasOwnProperty("id")) {

            totalPriceElement.value = "0";

            numberOfGuestsElement.value = "1";

          } else {

            totalPriceElement.value = data.totalPrice;

            numberOfGuestsElement.value = data.numberOfGuests;

          }

          blockhintElement.innerText = t("how-mark-blocked");

        }

      }

    }

  }

and here is my Scheduler markup:

<ScheduleComponent

                  showQuickInfo={false}

                  selectedDate={new Date().setHours(0, 0, 0)}

                  width="100%"

                  timeScale={{ interval: 1440, slotCount: 1 }}

                  currentView="TimelineMonth"

                  eventSettings={{

                    dataSource: Campsite.bookings,

                    fields: {

                      id: "id",

                      subject: { name: "guestEmail", title: "Guest Email" },

                      startTime: { name: "from" },

                      endTime: { name: "to" },

                      description: {

                        name: "numberOfGuests",

                        title: "Number of guests",

                      },

                      isAllDay: { default: false },

                    },

                  }}

                  editorTemplate="#EventEditorTemplate"

                  group={{ resources: ["pitch"] }}

                  dragStart={onDragStart}

                  resizeStart={onResizeStart}

                  popupOpen={popupOpen}

                  popupClose={popupClose}

                  dragStop={dragStop}

                  resizeStop={resizeStop}

                >

The problem is that it is not working on Production as it shows as: [object Object][object Object][object Object][object Object]

while on staging and development environments it is working correctly.

Any idea why this could happen?

Thanks in advance

[Hareesh Balasubramanian]

Hi Shukri, 

Greetings from Syncfusion Support..! 

We have prepared a sample to reproduce your reported issue “editor template arguments are not showing properly in production mode” but unfortunately, we were unable to reproduce your reported problem and the sample can be downloaded from the following link. We have tried the following ways to replicate the issue at our end. 

1. We have ensured your reported problem by preparing a sample with your shared code snippets but the sample is working properly at our side.
2. And also we have ensured by creating/editing an event through editor template and the data for the events are properly fetching in it.
3. We have prepared the sample with our latest release (19.1.54v) version.

Sample: https://www.syncfusion.com/downloads/support/forum/164199/ze/ReactSample952341231 

Online demo link: https://ej2.syncfusion.com/react/demos/#/material/schedule/editor-template  

UG link: https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#customizing-event-editor-using-template 

Kindly refer to the above sample, if the issue persist still share the below details to validate your reported issue and serve you better. 

• Kindly confirm whether the above sample is working properly in production mode at your side?
• Kindly share your scheduler package version with us.
• Kindly share the issue duplicating video demo.
• If possible, replicate the issue in the above sample.
• Share the issue replicating sample (if possible) in order to validate further at our end.

We will be happy to assist you..! 

Regards, 

Hareesh 

[Shukri Khilfeh]

Thanks for replying.

Your sample didn't work for me.

 1 of 3 unhandled errors

Unhandled Runtime Error

TypeError: str.match is not a function

Call Stack

evalExp

file:///C:/dev/Sprint38/campinnreact/.next/static/chunks/pages/host.js (286173:23)

and 

Unhandled Runtime Error

TypeError: Cannot read property 'destroy' of undefined

Call Stack

ScheduleComponent._N_E.push../node_modules/@syncfusion/ej2-schedule/src/schedule/base/schedule.js.Schedule.destroy

and

Unhandled Runtime Error

TypeError: str.match is not a function

Call Stack

evalExp

file:///C:/dev/Sprint38/campinnreact/.next/static/chunks/pages/host.js (286173:23)

compile

/_next/static/chunks/pages/host.js (286160:25)

Object._N_E.push../node_modules/@syncfusion/ej2-schedule/node_modules/@syncfusion/ej2-base/src/template-engine.js.Engine.compile

I noticed that there are two ways to implement the custom editor window. The first one which is the one you provided is by providing a function that returns JSX element. The other approach is by setting up a text/x-template element and provide its id to the editorTemplate attribute.

The first approach didn't work for me at all while the second worked fine except on production.

Why the first approach doesn't work?

BTW, I'm using version 19.1.54 of the ej2-react-schedule

Also I'm attaching the screen show of how it shows  on my screen when it is broken.

Thanks

Attachment: Untitled_898d3546.zip

[Hareesh Balasubramanian]

Hi Shrukri, 

Thanks for the update. 

We have validated your shared script error “ERROR TypeError: str.match is not a function” at our end. We suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. Please follow the below steps to overcome the reported behavior. 

• Delete package.lock.json file from your application.
• Remove the @syncfusion package folder from the node_modules.
• Use same version for all components in package.json file.
• Then install the new packages.

UG link: https://ej2.syncfusion.com/react/documentation/common/how-to/update-npm-package/ 

Kindly refer to the above sample, if the issue persist still share the below details to validate your reported issue and serve you better. 

• Kindly share your scheduler package version/package.json file with us.
• Kindly share the issue duplicating video demo.
• Kindly share the entire schedule rendering code snippets with us.
• If possible, replicate the issue in our previously updated sample.
• Share the issue replicating sample (if possible) in order to validate further at our end.

We will be happy to assist you..! 

Regards, 

Hareesh 

[Sabitha Rajamani]

From: Fire Mountain IT Services Inc
Sent: Thursday, April 8, 2021 4:43 AM
To: Syncfusion Support
Subject: Re: Syncfusion support community forum 164199, Custom Editor Template shows [object Object] instead of elements, has been updated. 

  

Hi,  

Unfortunately, none of the suggestions worked for me, including upgrading the packages after deleting the syncfusion node_modules folder. 

Eventually I used a workaround. I used the popupOpen event to launch a DialogComponent which I added my controls in and connected the field values to a react state variable. 

Although it took slightly more time to implement the new solution, but I don't have any limitations of what controls I can put in the template anymore. 

Apparently there is a setting on my prod that causes the issue to surface only on my production environment. But overall the Schedule control is helpful and nice. 

Thanks for your help. 

[Nevitha Ravi]

Hi Shrukri, 

Thanks for your update. 

We are happy that you resolved your problem and glad that our Syncfusion scheduler helped at your end. 

Regards, 

Nevitha