Editor Template

d052057

Can it be done using Editor with Bootstrap Style sheet?
I have researched but I find nothing that says about it. May anyone help me with it please?

d052057

One more thing about the feature - State and Zip fields are on the same row (in-line).

Thanks.

allan

Yes, you can use the Editor template mechanism with any styling framework, including Bootstrap 4.

If you are having problems with it, please link to a page showing the issue so I can help to debug it.

Allan

d052057

This is working for me when I tried to use bootstrap CSS with DTE.
/code/
DescEditor.on('open', function () {
//DescEditor.show(); //Shows all fields
$('#DTE_Field_City').prop('readonly', true)
$('Div.DTE_Field_InputControl input').addClass('form-control');
$('Div.DTE_Field_InputControl select').addClass('form-control');
});
/code/

I still don't know how to align 2 fields in the same row (input-group, input-group-addon).

Please direct me to any examples 'how to', if any?
Thank for your response.

d052057

[code]

Row	Type	Company	Address	City	State	Zip	Phone	Contact	Description

[/code]

d052057

Row	Type	Company	Address	City	State	Zip	Phone	Contact	Description

Tester2017

Well, you can achieve this by defining a "custom form" on your page, with a class "form-group", like this:

<div id="customForm">
    <div class="form-group">
        <div class="col-sm-4">
            <div data-editor-template="state"></div>
        </div>
        <div class="col-sm-4">
            <div data-editor-template="zip"></div>
        </div>
    </div>
</div>

And then you have to set the template option of your Editor instance to this form (customForm in this example).

More info about template: https://editor.datatables.net/reference/api/template()

Mike Thomson

A similar problem. I am finding that when select boxes are not displayed (or populated) when I use the template option. In my case

    var editor = new $.fn.dataTable.Editor({
      ajax: 'php/table.units.php',
      table: '#units',
      template: "#editorTemplate",
      fields: [
        {
          label: "code:",
          name: "units.code"
        },
        {
          label: "unittype:",
          name: "units.unittype",
          type: "select",
          placeholder: "Select a Unit Type"
        },
        {
          label: "name:",
          name: "units.name"
        },
        {
          label: "details:",
          name: "units.details",
          type: "textarea"
        },
        {
          label: "maxguests:",
          name: "units.maxguests"
        }
      ]
    });

 <div id="editorTemplate">
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#unitsEditForm" role="tab">Edit Details</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#unitsRatePlans" role="tab">Rate Plans</a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="unitsEditForm" role="tabpanel">
        <fieldset class="name">
          <legend>Primary</legend>
          <div data-editor-template="units.code"></div>
          <div class="form-group">
            <div class="col-sm-4">
              <div data-editor-template="units.type"></div>
            </div>
          </div>
          <editor-field name="units.name"></editor-field>
        </fieldset>
        <fieldset class="office">
          <legend>Secondary</legend>
          <editor-field name="units.details"></editor-field>
          <editor-field name="units.maxguests"></editor-field>
        </fieldset>
      </div>
      <div class="tab-pane" id="unitsRatePlans" role="tabpanel">pane 2</div>
    </div>
  </div>

Mike Thomson

I found a way to get around this problem, by adding jQuery append to the field containing select box. Perhaps there is a better way or bug fix?

(function ($) {

  $(document).ready(function () {
    var editor = new $.fn.dataTable.Editor({
      ajax: 'php/table.units.php',
      table: '#units',
      template: "#editorTemplate",
      fields: [
        {
          label: "Unit Code:",
          name: "units.code"
        },
        {
          label: "Unit Type:",
          name: "units.unittype",
          type: "select",
          placeholder: "Select a Unit Type"
        },
        {
          label: "Unit Name:",
          name: "units.name"
        },
        {
          label: "Detailed Description",
          name: "units.details",
          type: "textarea",
          'className': 'full block'
        },
        {
          label: "maxguests:",
          name: "units.maxguests"
        }
      ]
    });

    //*** Mite - Add Code to reset Select Field (Bug in Editor ???) */
    editor.on('open displayOrder', function (e, mode, action) {
      if (mode === 'main' && action !== 'remove') {
        $(editor.node(['units.unittype'])).appendTo('#unittype');
        //Make Dialog Bigger - Bootstrap
        $('.modal-dialog').addClass('modal-lg');
      }});

      var table = $('#units').DataTable({
        dom: 'Bfrtip',
        ajax: 'php/table.units.php',
        columns: [
          {
            data: "units.code"
          },
          {
            data: "units.unittype"
          },
          {
            data: "units.name"
          },
          {
            data: "units.maxguests"
          }
        ],
        select: true,
        lengthChange: false,
        buttons: [
          { extend: 'create', text: '<i class="fas fa-plus-square fa-2x"></i>', editor: editor },
          { extend: 'edit', text: '<i class="fas fa-edit fa-2x"></i>', editor: editor },
          { extend: 'remove', text: '<i class="fas fa-trash-alt fa-2x"></i>', editor: editor }
        ]
      });
    });

  }(jQuery));

allan

Are you able to give me a link to a page that is showing the issue? Good to hear you have a workaround though.

Allan