DataTables Editor: new record form with custom display controller in empty table

matissg

I'm trying to implement regular CRUD with custom display controller and basically everything works fine apart from one thing. When table is empty (no records), "Add record" button will not populate form. I assume this is because of display: "details" and when there is not details, it can't populate form.
How do I fix this, please? Should I be adding some logic, e.g., if there are no records, I populate form somewhere?

tangerine

I don't understand. Creating a record will obviously provide an empty form. What are you expecting to populate it with?

matissg

@tangerine Sure, it has to be empty.
The thing is it is not populated at all. Basically when I press on "Add record" nothing happens. So far I've assumed it's because the form is populated in details and since there is no details (empty table with no rows), it's not working. When I have at least 1 record (row), adding new records works as expected.

allan

Hi,

I'm not sure what details is in this context. Are you able to link to a test page showing the issue please?

Thanks,
Allan

matissg

@allan It's seems to be a bit complicated to create test page as I have Editor involved and JSON, etc. Can't simply copy+paste code.

It's basically these lines from your example:

var Editor = $.fn.dataTable.Editor;
Editor.display.details = $.extend( true, {}, Editor.models.displayController, {
    "init": function ( editor ) {
        // No initialisation needed - we will be using DataTables' API to display items
        return Editor.display.details;
    },
...

and then it appears like this in HTML:
<td class=" details-control" tabindex="0"></td>

When table is empty, there are not details-control so I assume because of that, it's not possible to populate empty form for adding new record.

allan

Sorry - it looks like I forgot to include the Buttons library in that example. The Create button should be shown at the top left of the table like in the other examples:

        buttons: [
            { extend: "create", editor: editor }
        ]

Including Buttons allows it to work as expected.

Allan

matissg

@allan Thank you, I have it already and my buttons in JS look like this:

    buttons: [{
        extend: 'create',
        editor: editor,
        formButtons: [{
            label: 'Cancel',
            fn: function() {
              this.close();
            }
          },
          'Create',
        ]
      },{
      extend: 'collection',
      text: 'Export',
      buttons: ['copy', 'excel', 'csv', 'pdf', 'print']
      },{
          extend: 'colvis',
          columns: ':gt(0)'
      }
    ]

I've have "Create" button and it appears as expected + I can create row if the table is not empty. Empty form will not appear if there is empty table with no rows - please, see my screenshot attached.
I was thinking probably there can be some tweak to make my form appear in same way as when there is at least one row in table. Otherwise I have to do some logic to show modal window if there is now rows in table. What would be your suggestion, please?

allan

Are you able to give me a link to your page so I can debug that please? I don't understand why that would happen I'm afraid. The Create button should always be enabled, regardless of how many rows are in the table.

Allan

matissg

@allan "Create" button is enabled and you can press it, however nothing will happen if there are empty table. On click to "Add" button, you would not see any empty "Add new record" form appear. Basically everything stays as in my screenshot.
Does this additional info helps, or you need some demo link anyway?

allan

Ah! I'm with you now. Sorry for my confusion - I haven't fully clicked about the use of the display display controller.

I've put together this little example to show it happening: http://live.datatables.net/hejexigu/1/edit .

I've updated the plug-in code to use the built in lightbox display controller for the create action, which can be seen here: http://live.datatables.net/naripaku/1/edit .

Does that work okay for you?

Allan

matissg

@allan Thank you, however there is an issue when implementing this approach with Bootstrap. I've created test link here - http://live.datatables.net/ticevabu/2/edit

This is Bootstrap styled table and when you will click on "New" button, modal window will not appear as expected. Instead it will be populated at the bottom of page. If you go to JS and remove display: 'details' line, you will get modal window, however this is not quite behaviour I'd like to implement. For existing records I would like to keep display details controller.

Actually I think I've noticed some other issues with Bootstrap implementation. I'll open another question for that.

allan

Hi,

To use it with Bootstrap you'd need to change the references Editor.display.lightbox to be Editor.display.bootstrap: http://live.datatables.net/ticevabu/4/edit

Allan