Checkbox check state displayed inverted from actual data value in editor context

cwelch

I've got a bit of a head scratcher as the displayed state of a checkbox is inverted when it shows up in the editor.

Sorry, large internal application using data that has to be treated as private so I can't post a test link for it.

Here is the js for the setup, the checkbox is associated with the active column:

var editor;

      $(document).ready(function() {

          editor = new $.fn.dataTable.Editor({
              ajax: "/api/instruments/editor/?format=datatables",
              table: "#instruments",
              fields: [{
                  label: "Name:",
                  name: "name",
              },
              {
                  label: "Ticker:",
                  name: "ticker",
              },
              {
                  label: "Type:",
                  name: "type",
              },
              {
                  label: "CUSIP:",
                  name: "cusip",
              },
              {
                  label: "Exchange:",
                  name: "exchange.id",
                  type: "select"
              },
              {
                  label: "ATR:",
                  name: "atr",
              },
              {
                  label: "Active:",
                  name: "active",
                  type: "checkbox",
                  options: [ 
                      {label: ""} 
                  ]
              },
              ]
          });

          // We use hyper links to drill down from the list so don't activate cell editing
          // Activate the editor on click of a table cell
//          $('#instruments').on( 'click', 'tbody td:not(:last-child)', function (e) {
//              editor.bubble( this );
//          });

          var table = $('#instruments').DataTable({
          // Hide the length menu labeling
              "language": {
                  "lengthMenu": "_MENU_"
                 },
            serverSide: true,
//            dom:        'Bfrtp<"bottom"l><"clear">',
            dom:        'Blfrtp',
            ajax:       "/api/instruments/?format=datatables",
            columns: [
                {data: "id"},
                {data: "name"},
                {data: "ticker"},
                {data:       "typestr",
                 searchable: false},
                {data: "cusip"},
                {data: "exchange.abbrev"},
                {data: "atr",
                 render: function(data, type, row) {
                     return data.toFixed(2);
                     },
                 },
                {data: "active",
                 render: function ( data, type, row ) {
                         if ( type === 'display' ) {
                             return '<input type="checkbox" class="editor-active">';
                         }
                         return data;
                     },
                     className: "dt-body-center"
                },
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
            ],
            columnDefs: [
                {
                 render: function(data, type, row) {
                        return '<a href="{% url "index" %}histquotes/' + row.id + '">' + data + '</a>';
                    },
                    targets: [1, 2, 3, 4, 5, 6, 7]
                },
                {visible: false,
                 targets: [0]},
            ],
            select: {
                style:    'os',
                selector: 'td:last-child'
            },
            buttons: [
                {extend: "create", editor: editor},
                {extend: "edit",   editor: editor},
                {extend: "remove", editor: editor}
            ],
            rowCallback: function ( row, data ) {
                // Set the checked state of the active row in the table
                $('input.editor-active', row).prop( 'checked', data.active );
            }
        });
      });

And here is the AJAX for an active row. The active column originates from a Postgresql boolean type:

{
"count": 184,
"next": "http://localhost:8000/api/instruments/?page=2",
"previous": null,
"results": [
{
"id": 122,
"exchange": {
"id": 3,
"name": "NASDAQ",
"abbrev": "NASDAQ",
"currency": "u"
},
"typestr": "Stock",
"DT_RowId": "122",
"DT_RowAttr": {
"data-pk": 122
},
"name": "",
"ticker": "AAPL",
"type": "s",
"cusip": "",
"atr": 4.40988192760811,
"active": true
},

and it renders as expected:

so far so good, but bring it up in the edit dialog and the active checkbox is unchecked:

and on an inactive entry, the edit checkbox is checked:

Any suggestions to get the correct state displayed for the active checkbox in the edit dialog?

Thanks in advance!

cwelch

Even more strange, I played around with the value option ala:

              {
                  label: "Active:",
                  name: "active",
                  type: "checkbox",
                  options: [ 
                      {label: "", value: true} 
                  ]
              },

and then click new to create a new record. Active is not checked when value is true or 1. Active is checked when value is false or 0.

cwelch

Apparently this is the way it is supposed to work. Dug further into the documentation and got it working using:

label: "Status:",
name:  "done",
type:  "checkbox",
options: [
    { label: "Done", value: 1 }
],
separator: '',
unselectedValue: 0

I find the default state backwards from what is expected.

Question is closed, but I don't know how to mark it answered when I've provided the answer to myself.

colin

Glad all working,

Colin

cwelch

Well, not totally the case, this was really, really aggravating.

Checkbox responses are returned in an array even when you only have a single checkbox. This makes things really ugly for a simple boolean checkbox use case.

Another previously burned user can be found in:

https://datatables.net/forums/discussion/50269/editor-set-value-as-boolean-for-a-checkbox-sends-an-array-instead-of-a-boolean

So to stop getting HTTP 400 "not a boolean type" response failures, here is the recipe I had to use to provide a simple boolean check box to match up with a boolean field in a Django application:

var editor;

      $(document).ready(function() {

          editor = new $.fn.dataTable.Editor({
              ajax: {
                  url: "/api/mytable/editor/?format=datatables",
                  data: function (d) {
                      var id;

                      switch (d.action) {
                            case "create":
                                 id = 0;
                                 break;
                            case "edit":
                            case "remove":
                                 id = Object.keys(d.data)[0];
                                 break;
                      }
                      // Change active from an array to a straight boolean
                      var retVal = d.data[id].active[0]
                      d.data[id].active = retVal
                      return d;
                    },
              },
              table: "#instruments",
              fields: [{
                  label: "Name:",
                  name: "name",
              },
              {
                  label: "Ticker:",
                  name: "ticker",
              },
              {
                  label: "Type:",
                  name: "type",
                  type: "select"
              },
              {
                  label: "CUSIP:",
                  name: "cusip",
              },
              {
                  label: "Exchange:",
                  name: "exchange.id",
                  type: "select"
              },
              {
                  label: "ATR:",
                  name: "atr",
              },
              {
                  label: "Active:",
                  name: "active",
                  type: "checkbox",
                  options: [
                      {label: "",
                       value: true}
                  ],
                  separtor: '',
                  unselectedValue: false
              },
              ]
          });

Very ugly, but unfortunately, there doesn't appear to be an option for a simple boolean to be used with a checkbox. The checkbox use case in DataTables is always a group.

It would be really nice, and probably save some poor souls sometime in the future if this could be simplified.

kthorngren

Maybe this thread discussing checkboxes and boolean values might help describe why they arene't sent as boolean values.

Kevin