Switch from altEditor to official Editor
Switch from altEditor to official Editor
thangnv
Posts: 12Questions: 2Answers: 0
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 }
]
});
});
This discussion has been closed.
Replies
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
Hi Colin, the datatables aren't loaded at all.
It seems like there's something wrong with the reference scripts.
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
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?
Hi I managed to load data successful but there's no any button show up.
Are you loading the Buttons extension?
If I add button dependency
i'll get this errror:
Have you add
Btodom?If still no joy, can you update this test case to demonstrate the problem, please,
Colin
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?
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
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.
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.
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
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.