How can I load colvis option on page load event?

How can I load colvis option on page load event?

deep007deep007 Posts: 17Questions: 2Answers: 0

So, we all know when we click on the button and we have colvis option then we can make fields visible and non-visible. What I want to achieve is whenever the page gets open that colvis option gets open without clicking that button. so is there any way?

Currently I am using this code..

       $('#reportCustomData').DataTable( {

      dom: 'Bfrtip',
      buttons: [
          {
            extend: 'colvis',
            collectionLayout: 'fixed four-column',
            text: 'Edit Rows'
          },
          {
              extend: 'excelHtml5',
              exportOptions: {
                  columns: ':visible',
                },
              text: 'Download Excel'
          },
          {
              extend: 'pdfHtml5',
              exportOptions: {
                  columns: [ 0, 1, 2, 5 ]    
              },
              text: 'Download PDF'
          }
      ]
  } );
} );

Answers

  • kthorngrenkthorngren Posts: 6,522Questions: 22Answers: 1,424

    You can use the button().trigger() to programmatically trigger the button.

    Kevin

  • deep007deep007 Posts: 17Questions: 2Answers: 0

    please don't mind me asking a few questions.. regarding this.
    Still, confuse.. could you please explain a bit more how can I use that trigger event in my code... I have 3 different buttons...

  • deep007deep007 Posts: 17Questions: 2Answers: 0

    I have put this code in $(document).ready(function() { }. So i tried different ways but not getting it..

  • deep007deep007 Posts: 17Questions: 2Answers: 0

    Ok, let me explain where I got stuck...

    on page name 'mycustomReportData' with button().trigger() I have load that colvis option on page load event. This is done perfectly. Thank you for your suggestion @kthorngren

              $(document).ready(function() {
        var table = $('#reportCustomData').DataTable( {
    
          dom: 'Bfrtip',
          buttons: [
              {
                extend: 'colvis',
                collectionLayout: 'fixed four-column',
                text: 'Edit Rows',
                className: 'editRows'
              },
              {
                  extend: 'excelHtml5',
                  exportOptions: {
                      columns: ':visible',
                    },
                  text: 'Download Excel'
              },
              {
                  extend: 'pdfHtml5',
                  exportOptions: {
                      columns: [ 0, 1, 2, 5 ]    
                  },
                  text: 'Download PDF'
              }
          ]
      } );
    
     table.buttons('.editRows').trigger();   
    } );
    

    now What I want to achieve is,
    I am calling that report created page 'mycustomReportData' on some another page name 'customDisplayData' and opening it into a bootstrap modal. So when user click on the click event bootstrap modal will get open and it will load this ( 'mycustomReportData') page's data in its body. but on the time of the modal event, that button is not getting trigger...

    In short, whenever bootstrap modal gets open it should display that colvis option. How to archive this?

    here is my code.

              <!-- Modal -->
        <div class="modal fade" id="myCustomReport" role="dialog">
        <div class="modal-dialog modal-lg">
    
           <!-- Modal content-->
         <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Custom Download Reports</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
             <?php include 'downloadCustomDataFromReports.php'; ?>
          </div>
           </div>
          <div class="modal-footer">
          <button type="button" class="btn btn-default" data- 
           dismiss="modal">Close</button>
          </div>
          </div>
    
          </div>
          </div>
          <script>
    $(document).on("click", ".downloadCustomDataReport", function(e){
        e.preventDefault();
        $('#myCustomReport').modal('show');
    
    });
          </script>
    
  • deep007deep007 Posts: 17Questions: 2Answers: 0

    Got the problem... over there it's get called in on document ready event but on the time of calling the bootstrap modal that event doesn't get performed... as it is just including that file not creating one...still out of solution...

  • kthorngrenkthorngren Posts: 6,522Questions: 22Answers: 1,424

    I've never used Bootstrap modals but my guess is you will want to use a Modal event and use button().trigger() within the event.

    Kevin

  • deep007deep007 Posts: 17Questions: 2Answers: 0
    edited July 10

    Ok, so I have got one option for this. I have connected manually created one jQuery. That jQuery will connect colvis option with my checklist items. So on check change event, it gets trigger and then I allow the user to download it. So you can close this now. Thanks for the help.

              $('input.columnCreatedCheckboxs').on('click', function (ev) { 
            var title = $(ev.target).data('title');
    
            if($('.dt-buttons .dt-button-collection .dt-button:eq(0)').length === 0) {
                $('.dt-buttons .dt-button:eq(0)').trigger('click');
            }
    
            $('.dt-buttons .dt-button-collection button').each(function() {
                if ($(this).text() === title) {
                    $(this).trigger('click');
                }
            })
        });`
    
Sign In or Register to comment.