Is there a way to show a custom popup on clicking a custom button which is in a cell in DataGrid in DevExpress?

user_9451118 0
Viewed 385

I will have a separate column comprising of Approve and Reject Buttons. On clicking the approve button, it is expected that a custom popup is thrown stating ' Are you sure you want to approve'. The popup will have two buttons, yes(click event directed to a function) and no brings the user back to the same page.

Same is expected for the Reject button.

Code implemented in typescript (Angular 9 & above).

Please advise. TIA!

angular devexpress javascript
1 Answers

What you should do depends on which UI component library you are using. Virtually all UI component libraries have a modal component. So use the modal component that your library offers. e.g. Angular Material modal, ngx bootstrap modal, etc

However, if you just want to make your own custom modal its pretty easy. For example.

html:

<div>
  ...
  the main content for this component
  <button (click)="openModal()">open modal</button>
</div>

<div class="custom-modal-component" [class.hidden]="showModal">
  hello I am a modal
  <button (click)="closeModal()">close modal</button>      
  <button (click)="doSomethingAndCloseModal()">do something</button>      
</div>

scss:

.custom-modal-component {

  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  margin-left: -250px;
  margin-top: -250px;
  z-index: 100;

  &.hidden {
    display: none;
  }
}

ts:

showModal = false

openModal() {
  this.showModal = true
}

closeModal() {
  this.showModal = false
}

doSomethingAndCloseModal() {
  // do something code here
  this.closeModal()
}

You might want to enhance this custom solution by adding a background overlay, making it reusable, etc - reusability here ensures separation of concerns. With focus on reusability, the use of content projection is a must!

user_12058710
Related