Datatables Editor: Bootstrap3 form-control fields

matissg

I have this piece of code in my HTML 5 form for Custom display controller:

<form class="horizontal" role="form">
  <div class="form-group">
    <div data-editor-template="name"></div>
    <div data-editor-template="description"></div>
  </div>
</form>

However I can't make fields to appear as Bootstrap form-control fields as my input source looks like this
<input id="DTE_Field_name" type="text">

Basically I see regular form, not Bootstrap styled. All required JS and CSS files are in place.

I tried to do something like suggested in this post, however this does not work for me so far.
How do I fix this, please?

allan

Are you able to give me a link to the page showing the issue please? Are you loading the editor.bootstrap4.js and editor.bootstrap4.css files?

Thanks,
Allan

matissg

@allan Haven't tried to create test link... I can give link to my debug - http://debug.datatables.net/ogagay

I'm using Bootstrap3 In my assets I'm loading editor.bootstrap.min.js and editor.bootstrap.min.css

At the moment my form is quite simple:

<div data-editor-template="name"></div>
<div data-editor-template="description"></div>

and I'm struggling to get form-control into this:
<input id="DTE_Field_name" type="text"> for example. Basically at the moment I can't get that form-control working and it does not style my form properly. My table is Bootstrap styled, however when I open record for editing, it's not styled.

allan

Oops - sorry BS3, not 4.

What you can do to set the field container class is:

$.fn.dataTable.Editor.classes.field.wrapper = 'DTE_Field form-control';

before you initialise the Editor.

I've just tried it here and the result looks rather odd though.

Do you have a screenshot of what you want the form to look like?

Allan

matissg

@allan Yes, the form does not look right.
I'm using Inspinia Admin theme and I would like to achieve something like this. Particularly I'm interested in fields from "All form fields" section.

In attached screenshot fields marked with "E" is what I can get with couple of data-editor-template rows from above. Field market with "B" I can get with my HTML. Here is my form:

<!--regular Datatables Editor fields -->
<div data-editor-template="name"></div>
<div data-editor-template="description"></div>

<!-- Bootstrap field -->
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-lg-12">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-2 control-label">Field:</label>
              <div class="col-sm-10">
                 <input type="text" class="form-control">
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

It's close to what I need, however I'm not sure if my Bootstrap is working as expected within my form. I believe my col-sm-2 and col-sm-10 should give bigger space. Changing those Bootstrap classes does not give any result.

Update

I just checked that Bootstrap works just fine when I implement it in modal window (particularly standalone collection editor. So at the moment I assume Bootstrap is not styled correctly when implemented in custom display controller where form is displayed within table with help of opening row (child row open).

allan

I've just tried modifying this example to use Bootstrap and it appears to set the class names for the input elements as needed (screenshot attached).

Are you able to give me a link to a page showing the issue?

Thanks,
Allan

matissg

@allan Thank you. Yes, it works when used in modal window (I tried it myself on different table), however it doesn't work when I use it with custom display controller.

Can you try to Bootstrap style this custom display controller example, please?

If this worked, the I could try to deploy my demo app to Heroku probably and give you link for checking the issue. Otherwise I would assume there is something wrong with Bootstrap when used with custom display controller.

allan

however it doesn't work when I use it with custom display controller.

Aha!! Yes, it wouldn't work with a custom display controller as the Editor / Bootstrap integration uses the following in its own display controller:

        dte.on( 'open.dtebs', function ( e, type ) {
            if ( type === 'inline' || type === 'bubble' ) {
                $('div.DTE input:not([type=checkbox]):not([type=radio]), div.DTE select, div.DTE textarea').addClass( 'form-control' );
            }
        } );

Add that into the init function of your display controller and you should be good to roll.

Allan

matissg

@allan Thank you. I'm trying to implement this, however something's wrong. My init looks like this at the moment:

  var Editor = $.fn.dataTable.Editor;
  Editor.display.details = $.extend(true, {}, Editor.models.displayController, {
    init: function(editor) {
       dte.on('open.dtebs', function(e, type) {
         if (type === 'inline' || type === 'bubble') {
            $('div.DTE input:not([type=checkbox]):not([type=radio]), div.DTE select, div.DTE textarea').addClass('form-control');
              }
            });
      // Setup the lightbox - we'll use it for new entries
      Editor.display.lightbox.init(editor);

      return Editor.display.details;

    },

What am I missing here, please?

matissg

@allan No, I'm still missing Bootstrap style for my custom controller form. So I have to understand, how to put your piece of code into that init function.

allan

Change Editor.display.lightbox to be Editor.display.bootstrap as well. There are three locations for that change in the plug-in.

Allan

matissg

@allan I'm doing as in your example and this is what I can get:
1. when I load table and click on some row to edit, I see form inside is not Bootstrap styled
2. when I click on "New" button, I see Bootstrap styled modal window opened; on "Create", modal window is not closing - it stays, record is created
3. when I manually close Bootstrap modal window and open some row for edit, I see form is Bootstrap styled

It seems that at some point Bootstrap is loaded, then something goes wrong. Please, help me to get on track as I'm a bit lost

allan

Can you give me a link to your page so I can debug what is going wrong please?

Thanks,
Allan

matissg

@allan I have similar setup as this one - http://live.datatables.net/ticevabu/4/edit
and I see there are same errors I described in my post above.

allan

Here we go: http://live.datatables.net/ticevabu/5/edit .

I've put the code that will update the classes for Bootstrap into the open handler, which seems to be a little easier in this case.

Allan

matissg

@allan Thank you, we're almost there. One last thing - how to make modal window close after "Create" button is pressed, please? At the moment I see record is created, however modal window stays.

allan

That should be triggered by this line:

Editor.display.bootstrap.close(editor, callback);

It won't work int he live demo page since it doesn't have a real JSON response.

If it doesn't work on your local page, add a little debug there to make sure that line is being called.

Allan

matissg

@allan Thank you for explaining. I added debugger at the callback line like this:

    close: function(editor, callback) {
      if (editor.mode() === 'create') {
        Editor.display.bootstrap.close(editor, callback);
      } else {
        var table = $(editor.s.table).DataTable();

        table.rows().every(function() {
          if (this.child.isShown()) {
            this.child.hide();
            $(this.node()).removeClass('shown');
          }
        });

        if (callback) {
          callback();
        debugger;  //My debugger here
        console.log(callback);  // My console log here
        }
      }
    }

When I submit my modal form:
1) I see in my terminal record is created, debugger stops after callback(); line
2) when resuming script execution, in my console I get log like this:
ƒ (){a._clearDynamicInfo()}
My modal window is not closing. Actually I can't close it with clicking on "Cancel" as well.

What could be wrong, please?

allan

Are you able to publish it to Heroku and I can take a look? I'm afraid I don't know what is wrong with it. Perhaps the JSON being returned from the server is not in the format Editor is expecting?

Allan

matissg

@allan I've created mini demo app on Cloud 9 and have sent you link via messages - please, see for details.