Checkbox is on the plus sign area

Checkbox is on the plus sign area

jtliviojtlivio Posts: 11Questions: 4Answers: 0

Hi, I have a Checkbox defined in my Datatable, the problem is, isn't in a new column, it's just beside the plus sign. So when I click the checkbox the row is expanded.

Does anyone know how to put the checkbox in a new column?
Thanks

var table = $('#example').DataTable({
      processing: true,
      responsive: true,
      //ajax: JSON.parse(this.state.tableItems),
      data: this.state.tableItems,
      columnDefs: [{
        "defaultContent": "-",
        "targets": "_all"
      }],
      columns: [

        {
          className: styles['details-control'],
          orderable: false,
          data: null,
          defaultContent: ''
        },
        {
          data: "PrtStatus",
          render: function (data, type, row) {
            if (type === 'display') {
              if (data == 1) {
                return '<input type="checkbox" checked>';
              } else {
                return '<input type="checkbox">';
              }
            }
            return data;
          },
          className: "dt-body-center"
        },
        { data: "ID" },
        { data: "Participant.Id" },
        { data: "CalculatedCertificateNumber" },
        { data: "Participant.FirstName" },
        { data: "Participant.LastName" },
        {
          data: "Date1", render: function (data, type, row) {
            if (type === "sort" || type === "type") {
              return data;
            }
            return moment(data).format("l");
          }
        },
        {
          data: "Validto", render: function (data, type, row) {
            if (type === "sort" || type === "type") {
              return data;
            }
            return moment(data).format("l");
          },
        },
        {
          data: "IsPrinted", render: function (IsPrinted, type, full, meta) {
            if (IsPrinted) {
              return 'Yes';
            } else {
              return 'No';
            }
          }
        },
        { data: "Level.Title" },
        // { data: "Workshop.eTestUniqueNumber"},
        // { data: "Workshop.Title"},
        // { data: "Discipline.Title"},
      ],
    });

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    You would create an additional column for the Responsive + sign as shown in the example here. The key is to give that column the class dtr-control,

    Colin

  • jtliviojtlivio Posts: 11Questions: 4Answers: 0

    Hi @colin

    Didn't work, same behavior, or I'm missing something?

    var table = $('#example').DataTable({
          processing: true,
          responsive: true,
          //ajax: JSON.parse(this.state.tableItems),
          data: this.state.tableItems,
          // responsive: {
          //   details: {
          //       type: 'column'
          //   }
          //},
          columnDefs: [
            {
              "defaultContent": "-",
              "targets": "_all"
            },
            {
              className: 'dtr-control',
              orderable: false,
              targets: 0
            }
          ],
          order: [1, 'asc'],
          columns: [
            {
              className: styles['details-control'],
              orderable: false,
              data: null,
              defaultContent: ''
            },
            {
              data: "PrtStatus",
              render: function (data, type, row) {
                if (type === 'display') {
                  if (data == 1) {
                    return '<input type="checkbox" checked>';
                  } else {
                    return '<input type="checkbox">';
                  }
                }
                return data;
              },
              className: "dt-body-center"
            },
            { data: "ID" },
            { data: "Participant.Id" },
            { data: "CalculatedCertificateNumber" },
            { data: "Participant.FirstName" },
            { data: "Participant.LastName" },
            {
              data: "Date1", render: function (data, type, row) {
                if (type === "sort" || type === "type") {
                  return data;
                }
                return moment(data).format("l");
              }
            },
            {
              data: "Validto", render: function (data, type, row) {
                if (type === "sort" || type === "type") {
                  return data;
                }
                return moment(data).format("l");
              },
            },
            {
              data: "IsPrinted", render: function (IsPrinted, type, full, meta) {
                if (IsPrinted) {
                  return 'Yes';
                } else {
                  return 'No';
                }
              }
            },
            { data: "Level.Title" },
            // { data: "Workshop.eTestUniqueNumber"},
            // { data: "Workshop.Title"},
            // { data: "Discipline.Title"},
          ],
        });
    

    HTML

    <table className="table table-striped table-bordered table-sm row-border hover mb-5" style={{ "width": "100%" }} cellPadding={0} id='example'>
                              <thead>
                                <tr>
                                  <th className="none"></th>
                                  <th></th>
                                  <th></th>
                                  <th>ID</th>
                                  <th>PID</th>
                                  <th>Certificate</th>
                                  <th>First Name</th>
                                  <th>Last Name</th>
                                  <th>Date</th>
                                  <th>Valid To</th>
                                  <th>Printed</th>
                                  <th>Level</th>
                                  {/* <th className="none">Workshop Id</th>
                        <th className="none">Workshop Name</th>
                        <th className="none">Discipline</th> */}
                                </tr>
                              </thead>
                            </table>
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited October 2021 Answer ✓

    The columns option applies to all columns in order. The details-control in line 25 is is being applied to column 0 not 1. Do something like this:

          columns: [
            {
              className: 'dtr-control',
              orderable: false,
            },
            {
              className: styles['details-control'],
              orderable: false,
              data: null,
              defaultContent: ''
            },
            {
    ...
    

    Remove the columnDefs definition you have in lines 16-20.

    Kevin

Sign In or Register to comment.