Issue with checking checkbox upon row selection

greggo47

I'm pre-select certain rows in my data table upon load and I'm having an issue with checking the checkbox of the selected rows. The background color changes to selected, so the row is actually selected, but the checkbox stays unchecked. I believe the issue may be because of my custom render function to generate a custom checkbox. Could this be the issue?

groupTable = $("#portsGroup").DataTable({
    data: data,
    columns: [
      { data: "PortID" },
      { data: "LocName" },
      { data: "NetPortID" },
      { data: "Network" },
      { data: "Model" },
      { data: "Connector(s)[,</br> ]" },
      { data: "Level" },
      { data: "Address" },
      { data: "City" },
      { data: "Province" },
      { data: "Postal Code" },
    ],
    columnDefs: [
      {
        targets: [0],
        className: "select-checkbox",
        render: function(data, type, row, meta) {
          return `<div class="rowHeight d-flex align-items-center">
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input portCheckbox" data-id="${row.PortID}" value="${row.PortID}" netcode="${row.NetCode}" netPortID="${row.NetPortID}" type="checkbox">
                        <span class="form-check-sign"></span>
                      </label>
                    </div>
                  </div>`;
        }
      },
    ],
    select: {
      style: 'multi',
      selector: 'td:first-child, td:first-child input.portCheckbox'
    },
    drawCallback: function() {
      let api = this.api();

      api.rows().every(function(rowIdx, tableLoop, rowLoop) {
        let data = this.data();

        if(selectedPorts.find(port => port.PortID === data.PortID)) {
          api.row(rowIdx).select();
        }
      });
    },
    order: [[1, "asc"]],
    bPaginate: true,
    orderCellsTop: true,
  });

kthorngren

I believe the issue may be because of my custom render function to generate a custom checkbox. Could this be the issue?

Likely. I suspect the problem is due to the select extension looking for the class select-checkbox which is probably overwritten by your render function. Would need to try it to confirm though. You can try adding the select-checkbox class in your render function or post a test case so we can take a look.

What is the goal with what you are rendering?

Kevin