Modal Buttons #7192

3 Answer(s)

• 

  0

  ryancyq created 5 years ago

  Support Team

  Hi, you can add the print button onto the modal template and register the button click event handler on modal open event.

  var modalOptions = {};
  var onClose = function() { };
  var onOpen = function() {
      // register and handle print button
  };
  var myModal = new app.ModalManager({ modalClass: 'MyModal' });
  myModal.open(modalOptions, onClose, onOpen);
  

  Save Cancel
• 

  0

  jdavis01 created 5 years ago

  So I created a separate modal footer called _ModalWithPrintAndClose.cshtml as shown

  <div class="modal-footer">
      <!-- Using the Save Button until I can determine how use print-button -->
      <button type="button" id="PrintModalButton" class="btn btn-secondary print-button"><i class="fa fa-save"></i> <span>@L("Print")</span></button>
      <button type="button" class="btn btn-primary close-button" data-dismiss="modal">@L("Cancel")</button>
  
  
  </div>
  

  Added it to the Modal

  @await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalFooterWithPrintAndClose.cshtml")
  

  Implemented the onOpen as you demonstrated

  var modalOptions = {};
  
          var onOpen = function () {
              $('#PrintModalButton').click(function () {
                  $('.modal-content').printThis();
  
              });
  
          };
  
          var onClose = function () { };
  
          var _createOrEditModal = new app.ModalManager({
              viewUrl: abp.appPath + 'App/LabRequest/CreateOrEditModal',
              scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/LabRequest/_CreateOrEditModal.js',
              modalClass: 'CreateOrEditLabRequestModal'
          });
  

  Here is a hack that seems to be working for now, but seems a bit unstable... I use the same modal-footer partial view and change the  class on the print button to include save-button, This code within the modal script fileworks and allows me to print

  <br>

  (function ($) {
  
      app.modals.ViewLabRequestModal = function () {
  
          var _modalManager;
  
          this.init = function (modalManager) {
              _modalManager = modalManager;
  
              var modal = _modalManager.getModal();
          };
  
          this.save = function () {
              //TODO: Add option afterPrint and call abpnotification
              $('.modal-content').printThis({
                       loadCSS: "metronic/themes/theme11/css/style.bundle.css"
              });
          };
      }; 
  })(jQuery);
  

  Thoughts?

  Save Cancel
• 

  0

  jdavis01 created 5 years ago

  So I ended up getting the print modal feature to work by doing the following..

  Created a partial view ModalFooterWithPrintAndClose then added the class save-button to the print button

  <div class="modal-footer">
      <!-- Using the Save Button until I can determine how use print-button -->
      <button type="button" id="PrintModalButton" class="btn btn-secondary save-button"><i class="fa fa-save"></i> <span>@L("Print")</span></button>
      <button type="button" class="btn btn-primary close-button" data-dismiss="modal">@L("Cancel")</button>
  
  
  </div>
  

  Added the Print and Close partial view to all modals that needed printing

  @await Html.PartialAsync("~/Areas/App/Views/Common/Modals/_ModalFooterWithPrintAndClose.cshtml")
  
  

  Modified my ViewModal.js file to add the print functionality into the save fucntion

   this.save = function () {           
              $('.modal-body').printThis({
                  loadCSS: "metronic/common/css/invoice-1.css"
              });
          };      
  

  This works for now, seems like a hack. I am still looking for a more permanent solution on how to register a button click event on a modal in this framework.

  Save Cancel