Spreadsheet Select All Checkbox

Introduction

The Spreadsheet Select All Checkbox functionality allows users to easily select or deselect all checkboxes within a spreadsheet form element. This feature enhances user interaction and efficiency, particularly when managing large datasets. 

How does it work?

To implement checkboxes in a spreadsheet form element, you can use the Handsontable JavaScript API to interact with the table elements manually.

Follow these steps to add the Select All checkbox functionality to your spreadsheet form element:

1. Enable the Handsontable instance to be interactable by pasting the following code into the HTML elements from Form Builder > Spreadsheet Configuration > UI > Custom Settings (JSON):
   

   {
       "afterInit": function() {
           var hot = this;
           $(hot.rootElement).data("hot", hot);
       }
   }

   

2. Use the following JavaScript code to handle a custom button with the logic to check all boxes using the Custom HTML form element. 
   An inverse function is also included to toggle the checkboxes inside the code from lines:

   $('#custom-invert-all').on('click', function(){             var rowcount = hot.countRows();             for(var i = 0; i < rowcount - 1; i++){                 var cellData = hot.getDataAtCell(i, 1);                 hot.setDataAtCell(i, 1, !cellData);

   
   

   <div class="btn btn-primary" id="custom-check-all">Check All</div>
   <div class="btn btn-primary" id="custom-invert-all">Invert All</div>
   
   <script>
       $(function(){
           var hot = FormUtil.getField("field1").data("hot");
           $('#custom-check-all').on('click', function(){
               var rowcount = hot.countRows();
               for(var i = 0; i < rowcount - 1; i++){  // rowcount - 1 to ignore last row
                   hot.setDataAtCell(i, 1, true);  // (row, column, value). column is 1 because checkbox is 2nd col in the table
               }
           });
           
           $('#custom-invert-all').on('click', function(){
               var rowcount = hot.countRows();
               for(var i = 0; i < rowcount - 1; i++){
                   var cellData = hot.getDataAtCell(i, 1);
                   hot.setDataAtCell(i, 1, !cellData);
               }
           });
       });
   </script>

   

3. Result

• • Check All: All checkboxes in the spreadsheet will be checked.
    
  • Invert All: The state of all checkboxes will be toggled.
    

Following these steps, you can add Select All and Invert All functionalities to your Joget spreadsheets, enhancing user interaction and efficiency.

Related documentation

• Spreadsheet

Download sample app