Inline/Row edit on server side processing

Andy@GAO

I have this code:

<link rel="stylesheet" type="text/css" href="~/Content/DataTables/css/jquery.dataTables.css">
<link type="text/css" href="~/Content/DataTables/css/dataTables.checkboxes.css" rel="stylesheet" />

...
        $('#editable').DataTable(
            ).$('td').editable('', {
            "callback": function( sValue, y ) {
                var aPos = oTable.fnGetPosition( this );
                oTable.fnUpdate( sValue, aPos[0], aPos[1] );
            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oTable.fnGetPosition( this )[2]
                };
            },
        });

        $('#metrictargetlist').DataTable({
            "bProcessing": true,
            "bServerSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
            "ajax": {
                "url": "@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Tables/GetMetricTargetList",
                "type": "POST",
                "dataType": 'json',
            },
            "columns": [
            { "data": "MetricID", "orderable": false },
            { "data": "metricDesc", "orderable": false },
            { "data": "calcType", "orderable": false },
            { "data": "aimDirection", "orderable": false },
            { "data": "targetSet", "orderable": false }
            ],
            "buttons": [
            {
                "extend": 'edit',
                "editor": 'Editor'
            }        ]
        });

                    <table class="table table-striped table-bordered table-hover " id="editable">
                        <thead>
                            <tr>
                                <th>Rendering engine</th>
                                <th>Browser</th>
                                <th>Platform(s)</th>
                                <th>Engine version</th>
                                <th>CSS grade</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="gradeX">
                                <td>Trident</td>
                                <td>
                                    Internet
                                    Explorer 4.0
                                </td>
                                <td>Win 95+</td>
                                <td class="center">4</td>
                                <td class="center">X</td>
                            </tr>
                            <tr class="gradeC">
                                <td>Trident</td>
                                <td>
                                    Internet
                                    Explorer 5.0
                                </td>
                                <td>Win 95+</td>
                                <td class="center">5</td>
                                <td class="center">C</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Rendering engine</th>
                                <th>Browser</th>
                                <th>Platform(s)</th>
                                <th>Engine version</th>
                                <th>CSS grade</th>
                            </tr>
                        </tfoot>
                    </table>

                    <div class="ibox-content">
                        <table id="metrictargetlist" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Metric Name</th>
                                    <th>Calc. Type</th>
                                    <th>Aim L/H</th>
                                    <th>Targets Set</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Id</th>
                                    <th>Metric Name</th>
                                    <th>Calc. Type</th>
                                    <th>Aim L/H</th>
                                    <th>Targets Set</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

I have 2 tables, editable and metrictargetlist
The 1st one works and I can edit inline, the 2nd one (metrictargetlist) does not work.
I've included the relevant files but I can't get the edit buttons to appear or initiate in-line editing.

I saw on another post somebody not including js files, I've included these:

https://code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js
https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js
https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js

Am I doing something obviously wrong here?

Help would be much appreciated.

Andy

allan

Hi Andy,

Editor doesn't add a .editable method to the DataTables object. I think you should probably be seeing an error on the console about that.

That looks like code for jEditable which isn't part of the DataTables project - although it could be used with DataTables - it just isn't supported by me.

Editor's inline editing examples are here and make use of its inline() method.

Regards,
Allan

Andy@GAO

Hi Allan,

I tried to recreate something similar to this example https://editor.datatables.net/examples/inline-editing/simple.html but I got this instead :http://live.datatables.net/fisolazu/1/edit

which I created for you to have an idea of the problem

Essentially I want to be able to edit and have inline edit too.
The 'copy', 'csv', 'excel', 'pdf', 'print' buttons work fine
when I do:
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
,but the editing buttons
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
don't show and are what I actually need, am I missing something obvious here?
.js or .ss inludes not present?

Also in the real world this is being driven from a server side scenario, would that change
anything in terms of the editing? And is this easy or a Quick Support issue?

Many Thanks, Andy

allan

Hi Andy,

You basically just need to combine the two buttons arrays:

buttons: [
  'copy',
  'csv',
  'excel',
  'pdf',
  'print',
  { extend: "create", editor: editor },
  { extend: "edit", editor: editor },
  { extend: "remove", editor: editor }
]

There is an example of the export buttons being used with Editor available here.

Also in the real world this is being driven from a server side scenario, would that change anything in terms of the editing?

No - no difference. Keep in mind that when using serverSide only the visible rows on the page will be exported though.

Allan

Andy@GAO

Thanks for that Allan,

I got the buttons to appear but they aren't able to do CRUD operations on the data, is this because the data source is HTML (DOM) sourced data instead of Ajax sourced as in your examples? Here's my effort: http://live.datatables.net/fisolazu/8/edit?html,js,output

Also in my environment (asp mvc) the 'copy', 'excel', 'csv', 'pdf', 'print' buttons show and do their thing but not the CRUD ones, that is Ajax fed but unable to put that online for you to see. Are there specific .js and .css files that need to be present for
editor = new $.fn.dataTable.Editor();
to work? Would I be able to see what stopping the editor to work?

theseare the files I'm using:
src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>
src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
src="https://cdn.datatables.net/colreorder/1.2.0/js/dataTables.colReorder.js"></script>
src="https://cdn.datatables.net/select/1.0.0/js/dataTables.select.js"></script>
src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.js"></script>
src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script>
src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js"></script>

I am going to have to do a Quick Support since this is quite an urgent requirement.
Datatables is fine in asp mvc, works really well except editing;
editor = new $.fn.dataTable.Editor();
is stopping the editing buttons to appear.

Would that be OK with you?

Regards, Andy

Stop Press Allan...

I got this error in the web console, apologies if I'm seeming thick here:

uncaught exception: DataTables Editor - remote hosting of code not allowed. Please see http://editor.datatables.net for details on how to purchase an Editor license (unknown)
TypeError: $.fn.dataTable.Editor is not a constructor ScorecardTargetGridUpdate:577:18

similar to this post:
https://datatables.net/forums/discussion/33358/fn-datatable-editor-is-not-a-constructor

If that's the case then I won't bother with Quick support since that seems the issue.
I'll try the trial version just to make sure that it all works then I'll decide.

Thanks, Andy

allan

Hi Andy,

Thanks for posting back. Yes that would do it! Downloading the trial version should resolve that issue.

Allan

Andy@GAO

Hello Allan,

Am now getting this console message:
TypeError: $.fn.dataTable.Editor is not a constructor

I'm not loading jquery twice, checked that. Here are the included:

ink rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=d169626fd7ee273945f9be8f19502f97">
script src="../../Scripts/jquery-2.1.1.js" type="text/javascript"></script>

link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.14/css/jquery.dataTables.min.css">
link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css">
link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.2/css/select.dataTables.min.css">
link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">

script type="text/javascript" language="javascript" src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>

script src="https://cdn.datatables.net/colreorder/1.2.0/js/dataTables.colReorder.js"></script>
script src="https://cdn.datatables.net/select/1.0.0/js/dataTables.select.js"></script>
script src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.js"></script>
script src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.html5.min.js"></script>
script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
script type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.3/js/buttons.print.min.js"></script>

link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt-1.10.14/jqc-1.12.4,dt-1.10.14,b-1.3.1,se-1.2.2/datatables.min.css" />
script type="text/javascript" src="https://cdn.datatables.net/v/dt-1.10.14/jqc-1.12.4,dt-1.10.14,b-1.3.1,se-1.2.2/datatables.min.js"></script>
link rel="stylesheet" type="text/css" href="~/Content/plugins/dataTables/editor.dataTables.css">
script type="text/javascript" src="../../Scripts/plugins/dataTables/dataTables.editor.js"></script>

Anything obviously wrong there, anything else that would invoke this error message?

I saw the below reply to another user, I downloaded the trial version today which I want for the next week or so to test out and then buy.
Do I need to set a trial for my account?

Anything else I'd need to do before using this trial version?

Thanks, Andy

"My guess is that your 15 day trial has expired and a license would be required to continue using Editor - however, oddly, I don't see a trial for your account, so I can't be certain that it has expired.

Allan"

kthorngren

You are loading jquery twice plus most if not all the datatables libraries. You have this which loads a bundle of the DT libraries plus jquery:

link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt-1.10.14/jqc-1.12.4,dt-1.10.14,b-1.3.1,se-1.2.2/datatables.min.css" />
script type="text/javascript" src="https://cdn.datatables.net/v/dt-1.10.14/jqc-1.12.4,dt-1.10.14,b-1.3.1,se-1.2.2/datatables.min.js"></script>

Plus you are loading each of these individually. Straighten that out and you should be good to go.

Kevin

Andy@GAO

Thanks for that Kevin,

That did it, now working!

Andy