Replies

• d052057 Posts: 38Questions: 3Answers: 0

  March 2018

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

  Thanks.
• allan Posts: 61,694Questions: 1Answers: 10,102 Site admin

  March 2018

  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 Posts: 38Questions: 3Answers: 0

  March 2018

  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 Posts: 38Questions: 3Answers: 0

  March 2018

  [code]

  Row	Type	Company	Address	City	State	Zip	Phone	Contact	Description

  [/code]
• d052057 Posts: 38Questions: 3Answers: 0

  March 2018

  Row	Type	Company	Address	City	State	Zip	Phone	Contact	Description
• Tester2017 Posts: 145Questions: 23Answers: 17

  March 2018 edited March 2018

  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 Posts: 9Questions: 1Answers: 0

  March 2018 edited March 2018

  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 Posts: 9Questions: 1Answers: 0

  March 2018

  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 Posts: 61,694Questions: 1Answers: 10,102 Site admin

  March 2018

  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