Select field not displaying inside table

dougguthrie

I'm attempting to put a select input as one of the fields in my datatable. When I click on the cell with the dropdown, it doesn't show, but if I begin typing something the dropdown appears. I'm using Bootstrap4 to style the datatable (I'm not sure if that has something to do with the dropdown not showing).

My code to create the datatable is below.

    editor = new $.fn.dataTable.Editor( {

    ajax: {
      url: "/clients/{{ client.client_id }}/aps/account-constraints/_id_/",
      type: 'POST',
      headers: {'X-CSRFToken': '{{ csrf_token }}'},
      data: function ( d ) {
        return JSON.stringify( d );
      }
    },
    table: "#constraintTable",
    idSrc: 'account_constraint_id',
    fields: [
      { label: 'APS Account', name: 'aps_account__aps_account' },
      { label: 'Asset Class', name: 'asset_class__name' },
      { label: 'Lower Limit', name: 'lower_limit'},
      { label: 'Upper Limit', name: 'upper_limit'},
      { label: 'Category 1',
        name: 'aps_category_1_id__category_code',
        type: 'select',
        options: { 'Income': 1, 'HCR': 2 }
      },
      { label: 'Value 1', name: 'aps_category_1_code'},
      { label: 'Category 2',
        name: 'aps_category_2_id__category_code',
        type: 'select',
        options: { 'Income': 1, 'HCR': 2 }
      },
      { label: 'Value 2', name: 'aps_category_2_code'},
      { label: 'Market Value', name: 'market_value'}
    ]
    } );

    $('#constraintTable').DataTable( {
      dom: "Bfrtip",
      ajax: {
        url: "{% url 'aps:account_constraints_data' client.client_id %}",
        dataSrc: "[]",
      },
      columns: [
          { data: "account_constraint_id" },
          { data: "aps_account__aps_account" },
          { data: "asset_class__name" },
          { data: "lower_limit",
            render: $.fn.dataTable.render.number( '', '.', 2, '', '%' ),
            className: 'text-right editable' },
          { data: "upper_limit",
            render: $.fn.dataTable.render.number( '', '.', 2, '', '%' ),
            className: 'text-right editable' },
          { data: "aps_category_1_id__category_code",
            className: 'text-center editable' },
          { data: "aps_category_1_code",
             render: $.fn.dataTable.render.number( '', '.', 2, '', '%' ),
             className: 'text-right editable' },
          { data: "aps_category_2_id__category_code",
            className: 'text-center editable' },
          { data: "aps_category_2_code",
            render: $.fn.dataTable.render.number( '', '.', 2, '', '%' ),
            className: 'text-right editable' },
          { data: "market_value",
            render: $.fn.dataTable.render.number( ',', '.', 0 ),
            className: 'text-right editable' }
      ],
      fixedHeader: {
        headerOffset: $('#syren-navbar').outerHeight() + $('#syren-menubar').outerHeight()
      },
      order: [[ 0, 'asc' ]],
      responsive: true,
      columnDefs: [
        { responsivePriority: 1, targets: 1 },
        { responsivePriority: 2, targets: 2 },
        { visible: false, targets: 0 }
      ],
      searching: false,
      paging: false,
      ordering: false,
      select: true,
      keys: {
        columns: (".editable"),
        editor: editor
      },
      buttons: [
          { extend: "create", editor: editor },
          { extend: "edit",   editor: editor },
          { extend: "remove", editor: editor }
      ]
    });

allan

What you are encountering here is that when KeyTable focuses on a cell, it doesn't automatically triggering editing for that cell. Typing will cause it to enter edit mode (which is what you are seeing) but a single click will just focus on it.

The answer is to use the keys.editOnFocus option, which will cause it to immediately enter into edit mode on focus (thus showing the select input).

There is one catch with that though - unfortunately there is a bug with that option in the current release of KeyTable. Use the nightly for it to work properly!

Allan