Switch from altEditor to official Editor

thangnv

Hi, I'm working on a ASTNET Core (Razor Page) project and I'm using altEditor datatable to display and add/edit/delete data. Its working fine but I'd like to change to official editor.

The datatables doesn't connect directly to a database but via REST Api. Currently I use Ajax to call page handler of Razor page which then will call a REST Api from other server. All data return in JSON format.

I've tried changing my current code to below code but It doesn't work.

$(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: {
                    create: {
                        type: 'POST',
                        url: '/manage/student?handler=addStudent',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        }
                    },
                    edit: {
                        type: 'PUT',
                        url: '/manage/student?handler=updateStudent',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        }
                    },                
                    remove: {
                        type: 'DELETE',
                        url: '/manage/student',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        }
                    }
                },
                table: "#example",
                fields: [
                    {
                        label: "Id:",
                        name: "id"
                    },
                    {
                        label: "Name:",
                        name: "name"
                    },
                    {
                        label: 'Nationality:',
                        data: 'nationality.name',
                        type: 'select',
                        options: getStudentNationality()
                    },
                    {
                        title: 'Profile Image',
                        data: 'profileImage',
                        type: 'file'
                    }
                ]
            });
            $('#example').DataTable({
                dom: "Bfrtip",
                ajax: {
                    'type': 'GET',
                    'url': '/manage/student?handler=displaystudents'
                },
                columns: [                   
                    { data: "id" },
                    { data: "name" },
                    { data: "nationality.name" },
                    { data: "profileImage" },                                  
                ],
                select: true,
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });
        });

colin

When you say it doesn't work, could you expand on that, please? Are you seeing errors? Does it display the data in form but doesn't update it? If you could also link to your page, that would also help us diagnose the problem,

Colin

thangnv

Hi Colin, the datatables aren't loaded at all.

It seems like there's something wrong with the reference scripts.

<link rel="stylesheet" href="~/css/datagrid/editordatatables/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/datagrid/editordatatables/dataTables.jqueryui.min.css">
    <link rel="stylesheet" href="~/css/datagrid/editordatatables/dataTables.semanticui.min.css" />
    <link rel="stylesheet" href="~/css/datagrid/editordatatables/editor.dataTables.min.css" />
    <link rel="stylesheet" href="~/css/datagrid/editordatatables/editor.jqueryui.min.css" />
    <link rel="stylesheet" href="~/css/datagrid/editordatatables/editor.bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/datagrid/editordatatables/editor.semanticui.min.css" />

 <script src="~/js/datagrid/editordatatables/dataTables.bootstrap.min.js"></script>
    <script src="~/js/datagrid/editordatatables/dataTables.jqueryui.min.js"></script>
    <script src="~/js/datagrid/editordatatables/dataTables.semanticui.min.js"></script>
    <script src="~/js/datagrid/editordatatables/dataTables.editor.min.js"></script>
    <script src="~/js/datagrid/editordatatables/editor.bootstrap.min.js"></script>
    <script src="~/js/datagrid/editordatatables/editor.jqueryui.min.js"></script>
    <script src="~/js/datagrid/editordatatables/editor.semanticui.min.js"></script>

colin

It looks like you're trying to install conflicting styles there. It would be worth using the Download Builder to get the files you need, that way you get the right files in the right order to avoid dependency issues,

Coin

thangnv

I've used download builder. This is what I've got when selecting bootstrap4, jquery3, datatable & editor and all extensions.

So which one should I add dependencies in my project?

thangnv

Hi I managed to load data successful but there's no any button show up.

tangerine

Are you loading the Buttons extension?

thangnv

If I add button dependency

 <link rel="stylesheet" type="text/css" href="~/css/datagrid/editordatatables/jquery.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="~/css/datagrid/editordatatables/editor.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="~/css/datagrid/editordatatables/buttons.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="~/css/datagrid/editordatatables/select.dataTables.min.css" />

<script type="text/javascript" charset="utf8" src="~/js/datagrid/editordatatables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf8" src="~/js/datagrid/editordatatables/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf8" src="~/js/datagrid/editordatatables/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf8" src="~/js/datagrid/editordatatables/dataTables.select.min.js"></script>

i'll get this errror:

colin

Have you add B to dom?

If still no joy, can you update this test case to demonstrate the problem, please,

Colin

thangnv

Yes I did but still no luck. I'm not sure if it's because of SmartAdmin UI Framework. Is there anyway I can download older version of Editor?

allan

Not as a trial I'm afraid. What version of jQuery are you using? We have noticed a problem with Editor 2.0.0 and jQuery 1 and 2, resolved with jQuery 3.

Failing that, as Colin says, if you can post a link to a page showing the error I'd be happy to take a look at it.

Thanks,
Allan

thangnv

Hi Allan, I finally managed to make it work. My only concern now is can editor validate user input at client-side like field duplicate, required field....

My current project architecture
Database <-> Back-End Server (Web Api) <-> Front-End Server (Web UI)

Also, how to implement file upload with above architecture? Since I'd to upload files to Front-End Server and send upload metadata to Back-End Server to save to Database.

allan

Since validation must be done at the server-side regardless of any validation at the client-side, we focus on server-side validation.

However, if you must do client-side validation as well, then this example shows how it might be done.

Also, how to implement file upload with above architecture? Since I'd to upload files to Front-End Server and send upload metadata to Back-End Server to save to Database.

Your front end sever, is that actually a different http server from that which is doing the Web API responses? If so, you'd need a back-channel communication between the two of them to send the file on from wherever Editor uploads it. That is not something that our libraries consider I'm afraid. It is possible to use the Upload class with a custom action which might be enough to do that, depending on what your back channel is.

Allan

thangnv

Your front end sever, is that actually a different http server from that which is doing the Web API responses?

Yes, It is a different server. The back-channel communication is what I'm currently implementing. I'll check the Upload class.

Thanks Colin, Allan for your support.