Uncaught Cannot extend unknown button type: createInline

joenathan

Hello, this is my first time trying to use the inline editor and I cannot get it to work I keep getting the error below in my browser console. I have other datatables on the same page that load correctly.

I could really use some helpins please. :-)

I tried to upload the debugger code but get "An error occurred.
Sorry, an error occured"

Uncaught Cannot extend unknown button type: createInline:

 <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
 <script src="~/editorresources/dataTables.editor.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>

  <script>

 (function ($) {
            var editor;
            $(document).ready(function () {
                 editor = new $.fn.dataTable.Editor({
                    ajax: "api/DCWDeductions",
                    table: "#DCWDeductions",
                

                    fields: [
                           
{ label: "DCWID",  "name": "DCWID",  "type": "hidden", "def": '@Model.Dcwid', "data": '@Model.Dcwid' },
{ label: "Deduction",  "name": "Type", "type": "select" },
{ label: "Payment One",  "name": "PaymentOneComplete", "type": "date", "format": "MM\/DD\/YYYY"  },
{ label: "Payment Two",  "name": "PaymentTwoComplete",  "type": "date", "format": "MM\/DD\/YYYY"  },
{ label: "Total Deducted",  "name": "TotalDeducted" },
{ label: "Delivered",  "name": "Delivered",   "type": "date",  "format": "MM\/DD\/YYYY"},
{ label: "LastUpdatedBy:", name": "LastUpdatedBy", "type": "hidden", "def": '@User.Identity.Name', "data": '@User.Identity.Name'},
{"label": "LastUpdated:", "name": "Lastupdated", "type": "hidden",  "def": '@DateTime.Now', "format": "YYYY-MM-DD HH:mm:ss tt }
                    ]
                });

                
                // Activate an inline edit on click of a table cell
    $('#DCWDeductions').on( 'click', 'tbody td.row-edit', function (e) {
        editor.inline( table.cells(this.parentNode, '*').nodes(), {
            submitTrigger: -2,
            submitHtml: '<i class="fa fa-play"/>'
        } );
    } );
 
    // Delete row
    $('#DCWDeductions').on( 'click', 'tbody td.row-remove', function (e) {
        editor.remove( this.parentNode, {
            title: 'Delete Deduction',
            message: 'Are you sure you wish to delete this deduction?',
            buttons: 'Delete'
        } );
    } );

                var table = $('#DCWDeductions').DataTable({
                   
                     paging: false, info: false, ordering: false,
                    ajax: {
                        url: "/api/DCWDeductions",
                        type: 'POST'
                    },
                   
                    columnDefs: [
                        {
                            "targets": [0,1],
                            "visible": false

                        }],
                    order: [[0, 'asc'], [1, 'asc'], [2, 'desc']],




                    columns: [

                    { title: "id",  "data": "id" },
{ title: "DCWID",  "data": "DCWID" },
{ title: "Deduction",  "data": "Type"  },
{ title: "Payment One",  "data": "PaymentOneComplete" },
{ title: "Payment Two",  "data": "PaymentTwoComplete" },
{ title: "Total Deducted",  "data": "TotalDeducted" },
{ title: "Delivered",  "data": "Delivered" },
 {
                data: null,
                defaultContent: '<i class="fa fa-pencil"/>',
                className: 'row-edit dt-center',
                orderable: false
            },
            {
                data: null,
                defaultContent: '<i class="fa fa-trash"/>',
                className: 'row-remove dt-center',
                orderable: false
            },
                    ],
                    select: {
            style: 'os',
            selector: 'td:first-child'
        },
                    buttons: [{
            extend: 'createInline',
            editor: editor,
            formOptions: {
                submitTrigger: -2,
                submitHtml: '<i class="fa fa-play"/>'
            }}
        ,
                        { extend: 'create', editor: editor, text: '<i class="@(Settings.Theme.IconPrefix) fa-plus mr-1"></i> Create',
                    name: 'add',
                    className: 'btn-success btn-sm mr-1' }
                    ],
    }); table.column(1).search('^' + '@Model.Dcwid' + '$', true, false).draw(); table.buttons().container()

            });

        }(jQuery)); $.fn.dataTable.moment('MM/dd/yyyy'); $.fn.dataTable.moment('MM/dd/yyyy HH:mm:ss tt');


</script>

kthorngren

Looks like the createInline button was introduced with Editor 2.0. Are you using Editor 2.x or a previous version?

Kevin

joenathan

Oh wow, good call! I'm running 1.9.5, time to upgrade!

Thank you!!!!