This is how is done for individual fields.

        Field::inst( 'cert_sif_nas.csnas_mid' )
            ->setFormatter( 'Format::nullEmpty' ),

Hi,

I would like to visualize in a field type: SELECT two columns.
I've manage to create the SELECT type and it is showing correctly in the browser, however the column of the table contains many identical values so I need to add a second column of the same tabel in the SELECT view in order to identify the right record to choose.
Could you please let me know what I have to add to below the code:

var editor = new $.fn.dataTable.Editor( {
"ajax": "php/table.Servers.php",
"table": "#Servers",
"fields": [
{
"label": "Credentials",
"name": "Servers.CustomerCredentialID",
"type": "select"
}
]

and
$('#Servers').DataTable( {
"columns": [
{
"data": "CustomerCredentials.CustomerUserName"
}
]

Thanks.

This example https://editor.datatables.net/examples/api/confirmClose.html doesn't work in Firefox or Chrome. I fix it with preClose event:

    var openVals;
    editor
        .on( 'open', function () {
            // Store the values of the fields on open
            openVals = JSON.stringify( editor.get() );
        } )
       .on( 'preClose', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
        } )
       .on( 'preBlur', function ( e ) {
            // On close, check if the values have changed and ask for closing confirmation if they have
            if ( openVals !== JSON.stringify( editor.get() ) ) {
                return confirm( 'You have unsaved changes. Are you sure you want to exit?' );
            }
        } );

I'm using bootstrap styling. If I press Esc key, the 'preClose' event is triggered but the editor form hides and if I choose 'Cancel' the form is still hidden. I couldn't figure it out how can I prevent ESC key to hide the editor before I decided what to do. It works fine if I press close icon or click outside the form. Any idea?

Example: https://zajc.xyz/hasdjh/test.esc.html

Hello,

I am having trouble with an implementation of JQuery UI Autocomplete in Editor. I have it set up as follows (using the plugin):

        {
            "label": "Company",
            "name": "company",
            "type": "autoComplete",
             "opts": {
                source: function( request, response ) {
                    $.ajax({
                        dataType: "json",
                        type: 'GET',
                        url: MyAcSearch1.url,
                        data: {
                            'action': 'pld_my_contacts_companies_autocomplete',
                            'term': request.term
                            }
                    });
                }
            }
        },

When I search for "co", this returns a JSON string of ["Company 1","Company 2","Another Company"], which seems correct. However, the dropdown box does not show. (The jquery-ui.js and jquery-ui.css files are correctly loaded.)

The following, however, works:

        {
            "label": "Company",
            "name": "company",
            "type": "autoComplete",
             "opts": {

                source: [ "Company 1", "Company 2", "Another Company" ]
            }
        },

It creates a dropdown and looks fine.

Any ideas why I am able to create the dropdown box with the second code but not the first? Thank you.

Hi,
In the "New" and "Edit" pop-ups I have two SELECT fields.
I would like to have the second SELECT field values changed accordingly to the selected value from the first SELECT field.
Can you please help me,

Thank you!

Does anyone know if it is be possible to replicate the following SQL statement whilst using Editor?

SELECT ul.ID, m1.meta_value AS first_field, m2.meta_value AS second_field, m3.meta_value As third_field FROM tbl_widgets ul
JOIN tbl_widgetmeta m1 ON (m1.widget_id = ul.ID AND m1.meta_key = 'first_field')
JOIN tbl_widgetmeta m2 ON (m2.widget_id = ul.ID AND m2.meta_key = 'second_field')
JOIN tbl_widgetmeta m3 ON (m3.widget_id = ul.ID AND m3.meta_key = 'third_field')

I've spent several hours on this, and I'm at a loss. I want to give direction on validating inputs before the user actually enters in a number.

The idea I had was, when a textbox gets its focus in the inline editor, the bootstrap tooltip pops up. The thing is, I also need the tooltip to be unique for each input box.

So if I click on a column of any row, the text turns into an input box. I need to bind the tooltip to that, so when I click or focus into that input box, the tooltip will show up. This also needs to happen when I open the pop up showing the fields the user will enter.

I have something kinda working. The tooltip is displayed correctly over the textbox in the table when you first click on it. But when you tab to the next textbox, the tooltip doesn't get generated until you focus out and come back in. This is what I have so far. Problem with this, is that it'd give the same message for each textbox. I'd need to find out what kind of textbox this is. Which I think I can get by using this.id.

            editor.on('open', function (e) {

                $("input[id^='DTE']").attr("data-toggle", "tooltip");
                $("input[id^='DTE']").attr("title", "Must be between <br /> -5000 and 60000");
                $("input[id^='DTE']").tooltip(
                    {
                        html: true,
                        placement: "top",
                        trigger: "hover focus"
                    }
                    );
            });

Why Edit button is available when the table doesn't have any row for the filter?

We know that buttons extended from 'selected' must change the status of able/disable depending on the selected line or not. If we apply the filter kind of table.column(0).search('nothing').draw() to select none of rows - buttons is available.

Unfortunately I cannot provide an example with Editor extension(. The link http://plnkr.co/edit/SQ5JE9?p=preview shows that the correct behavior of 'selected' buttons would be with {selected: true, page:"current"} conditions.

I'm not sure this is a bug, but it looks strange to see available 'edit' button when no rows in the table.

I am using the following event handler (with KeyTable) to submit cell data when a user presses the tab key to change the selected editable table cell:

// Inline editing on tab focus
            courseworkMarksTable.on('key-focus', function (e, datatable, cell) {
                courseworkMarksTableEditor.inline(cell.index(), {
                    onBlur: 'submit'
                });
            });

I have noticed that after performing a table ajax reload (or indeed destroying and reinitialising the table) that this no longer works, and pressing tab instead seems to highlight cells in the first column, instead of moving between editable cells.

My full table initialisation function is below:

function drawCourseworkMarksTable() {

    if (typeof courseworkMarksTable !== 'undefined') {
        courseworkMarksTable.ajax.reload();
    }

    else {

        $(document).ready(function () {

            // DataTable Editor Initialisation
            courseworkMarksTableEditor = new $.fn.dataTable.Editor({
                "ajax": "includes/GetCourseworkMarks.php",
                table: "#CourseworkMarksTable",
                fields: [
                    {
                        label: "Marker A",
                        name: "ModuleCourseworkMarks.MarkerA"
                    }, {
                        label: "Marker B",
                        name: "ModuleCourseworkMarks.MarkerB"
                    },
                    {
                        label: "Mark A",
                        name: "ModuleCourseworkMarks.MarkA"
                    },
                    {
                        label: "Mark B",
                        name: "ModuleCourseworkMarks.MarkB"
                    },
                    {
                        label: "Deadline",
                        name: "ModuleCourseworkMarks.Deadline",
                        type: "date",
                        "dateFormat": "dd/mm/yy"
                    },
                    {
                        label: "EC Submission",
                        name: "ModuleCourseworkMarks.ECopySubmission",
                        type: "date",
                        "dateFormat": "dd/mm/yy"
                    },
                    {
                        label: "HC Submission",
                        name: "ModuleCourseworkMarks.HardCopySubmission",
                        type: "date",
                        "dateFormat": "dd/mm/yy"
                    },
                    {
                        label: "Word Count",
                        name: "ModuleCourseworkMarks.WordCount"
                    },
                    {
                        label: "Academic Year ID",
                        name: "ModuleCourseworkMarks.AcademicYearID",
                        def: academicYearID,
                        type: "hidden"
                    },
                    {
                        label: "Module ID",
                        name: "ModuleCourseworkMarks.ModuleID",
                        def: moduleID,
                        type: "hidden"
                    }
                ]
            });

            // Inline editing on click
            $('#CourseworkMarksTable').on('click', 'tbody td:not(:first-child)', function (e) {
                courseworkMarksTableEditor.inline(this, {
                    onBlur: 'submit'
                });
            });

            // Disable Key Navigation when Editor popup window is opened
            courseworkMarksTableEditor.on('open', function (e, type) {
                if (type == "main") {
                    courseworkMarksTable.keys.disable();
                }
            })
                    // Enable Key Navigation when Editor popup window is closed
                    .on('close', function (e, type) {
                        courseworkMarksTable.keys.enable();
                    });


            // DataTable Initialisation
            courseworkMarksTable = $('#CourseworkMarksTable').DataTable({
                "ajax": {
                    url: "includes/GetCourseworkMarks.php",
                    data: function (d) {
                                d.moduleID = newModuleID,
                                d.academicYearID = courseworkMarksAcademicYearID;
                    },
                    type: 'POST'
                },
                keys: {
                    columns: [3, 4, 5, 6, 7, 8, 9, 10]
                },
                responsive: true,
                select: {
                    style: 'os',
                    blurable: true
                },
                "dom": "ifrtB",
                "iDisplayLength": -1,
                scrollY: documentHeight / 3 + "px",
                buttons: [
                    {extend: 'edit', editor: courseworkMarksTableEditor},
                    'copyHtml5',
                    {extend: 'csvHtml5',
                        text: 'Export CSV', exportOptions: {
                            columns: ':visible'
                        }
                    }
                ],
                "drawCallback": function (settings) {
                    if (document.getElementById("CourseworkMarksAcademicYearSelect").disabled == true) {
                        document.getElementById("CourseworkMarksAcademicYearSelect").disabled = false;
                    }

                },
                "columns": [
                    {data: "Student.Surname"},
                    {data: "Student.Forename"},
                    {data: "Student.AnonymousID"},
                    {data: "ModuleCourseworkMarks.MarkerA"},
                    {data: "ModuleCourseworkMarks.MarkA"},
                    {data: "ModuleCourseworkMarks.MarkerB"},
                    {data: "ModuleCourseworkMarks.MarkB"},
                    {data: "ModuleCourseworkMarks.Deadline"},
                    {data: "ModuleCourseworkMarks.ECopySubmission"},
                    {data: "ModuleCourseworkMarks.HardCopySubmission"},
                    {data: "ModuleCourseworkMarks.WordCount"},
                    {data: "ModuleCourseworkMarks.ModuleCourseworkMarkID", class: "never"}
                ],
                "order": [[0, "asc"]]
            });

            // Inline editing on tab focus
            courseworkMarksTable.on('key-focus', function (e, datatable, cell) {
                courseworkMarksTableEditor.inline(cell.index(), {
                    onBlur: 'submit'
                });
            });
        });
    }
}

I have Mjoin configured to display a list of checkboxes based on a many-to-many relationship. On create, I am receiving a FK violation exception due to the fact that one of the parent table's PK is not an identity field. This is a SQL Server implementation.

This is an issue because, before Editor can insert the associate records, it executes a SELECT@@IDENTITY which returns null. Thus, those associate table inserts die.

Is there a way around this that doesn't involve changing the field to an identity because that just causes a whole host of other issues.

Thanks,
Chad

SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'as cl ( course_id, room_id, lecturer_id, class_date, class_time ) VAL' at line 1

I followed tutorial "Join tables - self referencing join＂to create an editor datatables by servicer side processing method,

http://editor.datatables.net/examples/advanced/joinSelf.html

• Inline editing OK
• Editor Create: return above quoted error, please help

1. Service-Side Scripting : php/cour2.php

<?php
// DataTables PHP library
include( $_SERVER['DOCUMENT_ROOT']."/modules/Editor-PHP-1.5.3/php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// ensure can show chinese text
$db->sql( "SET NAMES 'utf8'" );

// Build our Editor instance and process the data coming from _POST
// Define parent table alias :  'abc_cou_course_class as cl'
// Define parent table key :  'cl.id'
Editor::inst( $db, 'abc_cou_course_class as cl', 'cl.id' )
    ->fields(
        Field::inst( 'cl.course_id' )
            ->options( 'abc_cou_course', 'id', 'name_en' ),
        Field::inst( 'c.name_en' ),
        Field::inst( 'cl.room_id' )
            ->options( 'abc_cou_room', 'id', 'name_en' ),
        Field::inst( 'r.name_en' ),
        Field::inst( 'cl.lecturer_id' )
            ->options( 'abc_cou_lecturer', 'id', 'name_en' ),
        Field::inst( 'le.name_en' ),
        Field::inst( 'cl.class_date' )
                ->validator( 'Validate::dateFormat', array(
                    "format"  => Format::DATE_ISO_8601,
                    "message" => "Please enter a date in the format yyyy-mm-dd"
                ))
                ->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
                ->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
        Field::inst( 'cl.class_time' )
    )
// leftJoin 3 tables here
    ->leftJoin( 'abc_cou_course as c ', 'c.id', '=', 'cl.course_id' )
    ->leftJoin( 'abc_cou_room as r ', 'r.id', '=', 'cl.room_id' )
    ->leftJoin( 'abc_cou_lecturer as le ', 'le.id', '=', 'cl.lecturer_id' )
    ->process( $_POST )
    ->json();

1. Javascript + Html

script type="text/javascript" language="javascript" class="init">
// use a global for the submit and return data rendering in the examples
var editor;
var table;
 jQuery(document).ready(function() {
/* 1. editor start */
    editor = new jQuery.fn.dataTable.Editor({
        "ajax"  : "/modules/mod_aa_editor2/php/cour2.php",
        "table" : "#myTable2",
        "fields": [{
                label   : "Course:",
                name    : "cl.course_id",
                type    : "select"
            }, {
                label   : "Room:",
                name    : "cl.room_id",
                type    : "select"
            }, {
                label   : "Lecturer:",
                name    : "cl.lecturer_id",
                type    : "select"
            }, {
                label   : "Class Date:",
                name    : "cl.class_date",
                type    : "datetime",
                def     : function () { return new Date(); }
            }, {
                label   : "Class Time:",
                name    : "cl.class_time",
                type    : "datetime",
                def     : function () { return new Date(); },
                format  : 'HH:mm'
            }]
        });

/* 2. DataTable is initialised here */
     table = jQuery('#myTable2').DataTable({
        "lengthMenu": [[5,15, 50, 100,-1 ], [5,15, 50, 100,"All"]],
        dom: "BCfrltip",
        ajax: {
            url     :"/modules/mod_aa_editor2/php/cour2.php",
            type    :"POST"
            },
        serverSide  : true,
        columns: [
            { data: "c.name_en",  editField: "cl.course_id" },
            { data: "cl.class_date" },
            { data: "cl.class_time" },
            { data: "r.name_en",  editField: "cl.room_id" },
            { data: "le.name_en", editField: "cl.lecturer_id" }
        ],
        select  : true,
        buttons     : [
            {   extend  : "create",
                editor  : editor,
                formButtons     : ['Create', { label: 'Cancel', fn: function () { this.close(); } }]},
            {   extend  : "edit",
                editor  : editor,
                formButtons     : ['Edit',   { label: 'Cancel', fn: function () { this.close(); } }]},
            {   extend  : "remove",
                editor  : editor,
                formButtons     : ['Delete', { label: 'Cancel', fn: function () { this.close(); } }]},
            {   extend  : 'collection',
                text    : 'Export',
                buttons     : [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }]
    });

/* 3. datatables column filter start */
     jQuery('#myTable2 tfoot th').each(function () {
         var title = jQuery('#myTable2 thead th').eq(jQuery(this).index()).text();
         jQuery(this).html('<input type="text" placeholder="' + title + '" />');
     });
     table.columns().every(function () {
            var that = this;
            jQuery('input', this.footer()).on('keyup change', function () {
                that
                        .search(this.value)
                        .draw();
            });
     });
});
</script>

<body class="dt-example">
    <div class="container">
        <section>
  <table id="myTable2" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Course Name</th>
                <th>Class Date</th>
                <th>Class Time</th>
                <th>Room</th>
                <th>Lecturer</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Course Name</th>
                <th>Class Date</th>
                <th>Class Time</th>
                <th>Room</th>
                <th>Lecturer</th>
            </tr>
        </tfoot>
    </table>
  </section>
 </div><!--end container-->
</body>

I need to use personal css rules for every element in Editor's form. I tried use "for" property of Editor`s field for this purpose, but can't access it with css or jQuery selectors.
For example:

<label data-dte-e="label" class="col-lg-4 control-label" for="DTE_Field_modx_vkrklient.city">Город<div data-dte-e="msg-label" class="DTE_Label_Info"></div></label>

How I can select DTE_Field_modx_vkrklient.city string for this label element?

And second problem:
How access DTE_Field_Name_modx_vkrklient.toemail class in this example:

<div class="DTE_Field DTE_Field_Type_text DTE_Field_Name_modx_vkrklient.toemail">
.  .  .
</div>

Update: The second problem solved by this selector:

$('.DTE_Field_Name_modx_vkrklient\\.toemail')

Do you know if there are plans to incorporate Abide client-side validation (Abide is part of the Foundation library)? To give some perspective, our application already has server-side validation, so the PHP validation that is provided with Editor is unnecessary for us. As far as client-side validation goes, it seems that the only option is to use the preSubmit event. For our non-Editor forms, we have found that the Abide validation is a nice and clean alternative to writing clunky javascript validation.

Any help would be greatly appreciated!

Thanks,
Kurt

I can see an example of how to use responsive and also inline edit for the child rows. But can someone point me in the right direction on how to user a custom render for responsive but still allow inline edits on the child row. More specifally what class should be applied to a TD (if I created a table in the render)? I noticed that if I don't use a custom render for responsive the UL it creates has data attributes applied to itself and the LI's but I can not seem to replicate this for the a child table by applying the same data attributes to the td when created.

When I submit a change of another field, via the bubble editor, any previous data saved in the full editor form with a select2 type is overwritten. If I change the field type to a checkbox and bubble edit, everything works as expected. Does anyone know why this would be the case?

{
                "label": "Area(s):",
                "name": "areas[].ID",
                "type": "select2",
                "opts": {
                            "placeholder":     "Select Area(s)",
                            "allowClear":      true,
                            "multiple":        true//,
                            //"tags":            true,
                            //"tokenSeparators": [',', ' ']
                }
                //,
                //render: function ( data, type, row ) {
                    //return (alert(row['value']));
                //}*/
            },

I am unable to update or create from editor. I am using a postgres database.
For updating, the error returned is :
<b>Notice</b>: Undefined index: id in <b>/php/lib/Editor/Editor.php on line 501
My id field is not "id", but I have set the correct name in the idSrc, as well as in the Editor::inst parameter.

The create error is the following:
Call to a member function insertId() on a non-object in /php/lib/Editor/Editor.php</b> on line <b>1109
The post parameters look correct.

If it is significant, I have a join in my server-side php to get a related table for a select field options. I also have a where so that the datatable is filtered.

Hello,

I have a problem with functions set() and val()

I have created new page at my server with extracted from Editor-PHP-1.5.4.zip files only.

The only 2 files that I have modified are:

1) php/config.php (hostname and credentials for database connection)

2) examples/simple/simple.html

In the second file in line 68th I have added one line:

editor.field('first_name').set("MAKING YOU HAPPY");

And when I call simple.html in my browser the "First name" field (which supposed to make me happy) is empty :(

editor.field('first_name').val("MAKING YOU HAPPY"); // don't work either
editor.set('first_name',"MAKING YOU HAPPY"); //don't work
editor.val('first_name',"MAKING YOU HAPPY"); //don't work

editor.field('first_name').def("MAKING YOU HAPPY"); // the only one that works...

Is this a bug or am I doing something wrong?

Since obviously problem is with js then it should not be related with my www server configuration (js is running in browser). I am using new chrome and firefox.

Full js code of simple.html (additional code in line 32nd):

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
     editor.field('first_name').set("MAKING YOU HAPPY");
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        columns: [
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.first_name+' '+data.last_name;
            } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

Hello,

Is there any way to add an extra function to build-in create button? - that one that opens editing window.

I have code like this:

new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor,
        formButtons: [
            {
                label: 'Accept',
                fn: function () {
                    var that = this;
                    var id_uzytkownik = this.val('operacja.id_uzytkownik'); //passing data
                    var id_s_operacja = this.val('operacja.id_s_operacja'); //passing data
                    this.submit(function () {
                        that.create();
                        that.field('operacja.id_uzytkownik').def(id_uzytkownik); //loading passed data
                        that.field('operacja.id_s_operacja').def(id_s_operacja); //loading passed data
                    });
                }
            }, {
                label: 'Save and close',
                fn: function () { var that = this; this.submit(function () {
                    that.field('operacja.id_uzytkownik').def(''); //setting default value
                    that.field('operacja.id_s_operacja').def(1); //setting default value
                    that.close();
                  }); }
            }
        ] }
] );

I have managed how to pass data between form instances and it works fine.
The problem is that when someone will click the "Accept" and then he will exit the window by blur() or close() with button (X), when he reopen create window the data are set still to:

var id_uzytkownik = this.val('operacja.id_uzytkownik'); //passing data
var id_s_operacja = this.val('operacja.id_s_operacja'); //passing data

In that case I want them to be back to defaults.
In button "Save and close" I am able to reset them to defaults (and it works) but user can still leave with blur() or close()...

Do I have to create custom button then?
If Yes then does the build-in Create button does something else than create()?

Or maybe there is an other clever method to clear that data back to defaults after close() call?

Iam also thinking about extending somehow the fnClick in dataTabled.editor.js:

    ttButtons.editor_create = $.extend( true, ttButtons.text, ttButtonBase, {
        formButtons: [ {
            label: null,
            fn: function (e) { this.submit(); }
        } ],

        fnClick: function( button, config ) {
            var editor = config.editor;
            var i18nCreate = editor.i18n.create;
            var buttons = config.formButtons;

            if ( ! buttons[0].label ) {
                buttons[0].label = i18nCreate.submit;
            }

            editor.create( {
                title: i18nCreate.title,
                buttons: buttons
            } );
        }
    } );

Is it even possibile without modifying core file it self?

Is there a simple way to have ajax response return some data to give the delete button confirmation modal a feedback, sort of how inline error come from ajax. Something to say, this record can not be deleted because something or other?
Thanks

I wanted multiple values form different database columns to show in a single datatable(Editor) column with comma separated values