Datatables Editor: Bootstrap3 form-control fields

Datatables Editor: Bootstrap3 form-control fields

matissgmatissg Posts: 46Questions: 10Answers: 0

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?

Answers

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

    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

  • matissgmatissg Posts: 46Questions: 10Answers: 0
    edited August 1

    @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.

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

    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

  • matissgmatissg Posts: 46Questions: 10Answers: 0
    edited August 2

    @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).

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

    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

  • matissgmatissg Posts: 46Questions: 10Answers: 0

    @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.

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

    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

  • matissgmatissg Posts: 46Questions: 10Answers: 0

    @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?

  • matissgmatissg Posts: 46Questions: 10Answers: 0
    edited August 7

    @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.

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

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

    Allan

  • matissgmatissg Posts: 46Questions: 10Answers: 0

    @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 :smile:

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

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

    Thanks,
    Allan

  • matissgmatissg Posts: 46Questions: 10Answers: 0

    @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.

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

    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

  • matissgmatissg Posts: 46Questions: 10Answers: 0

    @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.

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

    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

  • matissgmatissg Posts: 46Questions: 10Answers: 0

    @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?

  • allanallan Posts: 43,522Questions: 1Answers: 5,694 Site admin

    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

  • matissgmatissg Posts: 46Questions: 10Answers: 0

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

Sign In or Register to comment.