Answers

• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  April 2019

  Are you trying to use the always shown example? The editor-active class is just used to allow easy targeting of event handlers to handle the change event.

  That stuff isn't needed to use checkboxes in Editor's main form. That's just for the always shown example.

  Allan
• kenrights Posts: 36Questions: 10Answers: 0

  April 2019

  Yes, I'm trying to use the always shown example. Sorry I messed up on the link when I started this thread. I liked this example because I'm designing for mobile and I noticed that I can check off multiple rows with my finger before submitting (submit to be built).

  When you wrote above that the editor-active class 'stuff' isn't needed to use checkboxes in Editor's main form, I'm not clear on that. In pouring over the Always Shown example, I came to think that I had to add these FIVE SECTIONS to my js:

  ONE: //part of fields property and needed to insert the check box column

  {
     label:     "Active:",
     name:      "active",
     type:      "checkbox",
     separator: "|", // Editor will implode the values of the array into a string. It will also read multiple values from a similarly formatted string
     options:   [
         { label: '', value: 1 }
     ]
   },
  

  TWO (the section that appears to be causing the break):

  {
     data: "active",
     render: function ( data, type, row ) {
       if ( type === 'display' ) {
           return '<input type="checkbox" class="editor-active">';
       }
       return data;
     },
     className: "dt-body-center"  // center align the checkbox in the column https://datatables.net/blog/2014-09-09
  }
  

  THREE:

  select: {
        style: 'os',
        selector: 'td:not(:first-child)' // no row selection on the column because it is a check box
      },
  

  FOUR:

  rowCallback: function ( row, data ) {  // https://datatables.net/reference/option/rowCallback & https://datatables.net/blog/2014-09-09
          // Set the checked state of the checkbox in the table
    $('input.editor-active', row).prop( 'checked', data.active == 1 );
  }
  

  FIVE: I wasn't clear on what this did.

  $('#table_id').on( 'change', 'input.editor-active', function () {
      editor
        .edit( $(this).closest('tr'), false )  //closest(): For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
        .set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
        .submit();
    });
  

  The editor-active syntax is located in sections TWO, FOUR and FIVE above.

  BTW: The "Always Shown Checkbox" page says at the bottom that I must load these modules:

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
      
  

  I tried loading the above and it didn't help so I removed them as they might be already included in the 16 js files that are already being loaded.

  Finally, I scrapped the above and tried to go with a simpler example just to see if I could get the check boxes to appear on each row. This also was a failure. The console might be of help but, not to me.
• kenrights Posts: 36Questions: 10Answers: 0

  May 2019

  going in a different direction. this can be closed.