Editor Template

Editor Template

d052057d052057 Posts: 38Questions: 3Answers: 0

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?

Replies

  • d052057d052057 Posts: 38Questions: 3Answers: 0

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

    Thanks.

  • allanallan Posts: 48,480Questions: 1Answers: 7,023 Site admin

    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

  • d052057d052057 Posts: 38Questions: 3Answers: 0

    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.

  • d052057d052057 Posts: 38Questions: 3Answers: 0

    [code]

    Row Type Company Address City State Zip Phone Contact Description

    [/code]

  • d052057d052057 Posts: 38Questions: 3Answers: 0
    Row Type Company Address City State Zip Phone Contact Description
  • Tester2017Tester2017 Posts: 143Questions: 22Answers: 17
    edited March 15

    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 ThomsonMike Thomson Posts: 9Questions: 1Answers: 0
    edited March 25

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

    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));
  • allanallan Posts: 48,480Questions: 1Answers: 7,023 Site admin

    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

Sign In or Register to comment.