disable delete and save buttons in Editor Modal

[Samuel]

using an ejs scheduler which has a Editor window appear something like so. But I would like to be able to disable buttons at the bottom like so same look and feel

May I ask how this is done.  Trying to apply condition around the statement that will disable SAVE and DELETE buttons

Respectfully, 

Sam

[Venkateshwaran Saravanakumar]

Hi Samuel,

Sample: https://stackblitz.com/edit/angular-noqiym-6k89xh?file=src%2Fapp.component.ts,src%2Fapp.component.html,src%2Fapp.component.css

From your query, it seems like you want to disable the save and delete buttons when opening the editor after clicking on events that are already saved. If our understanding is correct, we recommend using the Scheduler's popup event, as demonstrated in the code snippet below:

[app.component.ts]

public onPopupOpen(args: PopupOpenEventArgs): void {

    if (args.type === "Editor" && args.target!.classList.contains("e-appointment")) {

      args.element.querySelector(".e-event-save")!.classList.add("e-custom-disable");

      args.element.querySelector(".e-event-delete")!.classList.add("e-custom-disable");

    }

  }

[app.component.html]

 <ejs-schedule #scheduleObj width='100%' height='650px' [selectedDate]="selectedDate" [eventSettings]="eventSettings"

      [(currentView)]="scheduleView" (eventRendered)="onEventRendered($event)" (popupOpen)="onPopupOpen($event)">

      <e-views>

        <e-view option="Day"></e-view>

        <e-view option="Week"></e-view>

        <e-view option="WorkWeek"></e-view>

        <e-view option="Month"></e-view>

      </e-views>

    </ejs-schedule>

Regards,

Venkatesh

[Bhavika Chauhan]

If you want to disable the delete and save buttons in an editor modal, you can typically achieve this with a combination of HTML, CSS, and JavaScript. Here’s a general approach you can follow:

HTML

First, ensure that your modal has the buttons with distinct id attributes or classes so that they can be targeted individually. For example:

<!-- Modal structure -->

<div id="editorModal" class="modal">

  <div class="modal-content">

    <button id="saveButton" class="modal-button">Save</button>

    <button id="deleteButton" class="modal-button">Delete</button>

    <button id="closeButton" class="modal-button">Close</button>

  </div>

</div>

CSS

You can use CSS to visually indicate that the buttons are disabled, though this doesn't prevent them from being clicked.

/* Default styles for buttons */

.modal-button {

  padding: 10px;

  margin: 5px;

}

/* Disabled button styles */

.modal-button.disabled {

  background-color: grey;

  cursor: not-allowed;

  pointer-events: none; /* Prevent clicks */

}

JavaScript

Use JavaScript to add the disabled class to the buttons, making them unclickable and visually different. Here’s an example of how to disable the buttons:

document.addEventListener('DOMContentLoaded', (event) => {

  // Function to disable buttons

  function disableButtons() {

    document.getElementById('saveButton').classList.add('disabled');

    document.getElementById('deleteButton').classList.add('disabled');

  }

  // Call the function to disable the buttons when needed

  disableButtons();

});

Explanation

1. HTML: Defines the structure of the modal with buttons that need to be disabled.
2. CSS: Adds styles for the disabled state, making it clear to users that the buttons are inactive.
3. JavaScript: Applies the disabled class to the buttons when the modal is loaded or under certain conditions.

By following these steps, you will effectively disable the delete and save buttons in your editor modal, both visually and functionally. If you need more dynamic control, such as enabling or disabling buttons based on user actions, you can extend the JavaScript to include additional logic.

[Swathi Ravi]

Hi Bhavika,

Thanks for sharing the solution.

Regards,
Swathi Ravi