Datatables.net Editor

d052057 · February 2018

I just purchased Datatables.net Editor and I have problems to make it to work. I am looking for a complete code but I cannot find any.
Here is one of the sample codes I found... but it doesn't work for me.

<link rel="stylesheet" type="text/css" href="/js/DataTables/Datables-1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Buttons-1.5.1/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/select-1.2.5/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Editor-1.7.2/css/editor.dataTables.min.css" />

<script type="text/javascript" src="/js/DataTables/Jquery-1.12.3/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Datables-1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/DataTables/buttons-1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Select-1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Editor-1.7.2/js/dataTables.editor.min.js"></script>

<script type="text/javascript">
    var editor;
    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            ajax: {
                create: {
                    type: 'POST',
                    url: "PopupAutoDescription.aspx/GetAutoDescription"
                },
                edit: {
                    type: 'PUT',
                    url: "PopupAutoDescription.aspx/UpdateAutoDescription"
                },
                remove: {
                    type: 'DELETE',
                    url: "PopupAutoDescription.aspx/DeleteAutoDescription"
                }
            },
            "table": "#AutoDescriptionTable",
            "fields": [
                {
                    "label": "Row:",
                    "name": "Row"
                }, {
                    "label": "Description:",
                    "name": "Description"
                }
            ]
        }
        );
        var uTable = $("#AutoDescriptionTable").DataTable({
            dom: 'Blfrtip',
            select: true,
            buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
            ],
            ajax: {
                data: {},
                type: "POST",
                url: "PopupAutoDescription.aspx/GetAutoDescription",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                dataSrc: function (response) {
                    return response.d.Description;
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            },
            "columns": [
                { "data": "Row" },
                { "data": "Description" }
            ],
        })
    })
</script>

and here is the error message:
Unhandled exception at line 5, column 358 in https://localhost/js/DataTables/buttons-1.5.1/js/dataTables.buttons.min.js

0x800a138f - JavaScript runtime error: Unable to get property 'ext' of undefined or null reference

allan · February 2018

Are you able to give me a link to the page in question so I can take a look and debug it please? I'm wondering if jQuery might be loaded twice on the page - I don't see anything immediately wrong with the above.

Regards,
Allan

d052057 · February 2018

I did not expect your response too soon. Thank you for response.
Here is what I have progressed on the codes.
Please see the image for the error message.
My ultimate goal for this code are:

Add, edit, delete buttons will update database via Ajax (with asp.net webmethod backend by passing key).

and here is the html codes:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="PopUpAutoDescription.aspx.vb" Inherits="MyAccount_Restricted_PopUpAutoDescription" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Auto Complete Description</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />

<link rel="stylesheet" type="text/css" href="/js/DataTables/Datables-1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Buttons-1.5.1/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/select-1.2.5/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Editor-1.7.2/css/editor.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/datatables.min.css" />

<script type="text/javascript" src="/js/DataTables/Jquery-1.12.3/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="/js/DataTables/dataTables.min.js"></script>
<script type="text/javascript" src="/js/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/DataTables/buttons-1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Select-1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Editor-1.7.2/js/dataTables.editor.min.js"></script>

<script type="text/javascript">
    var DescEditor;
    $(document).ready(function () {
        DescEditor = new $.fn.dataTable.Editor({
            ajax: {
                data: {},
                type: "POST",
                url: "PopupAutoDescription.aspx/GetAutoDescription",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                dataSrc: function (response) {
                    return response.d.Description;
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            },
            table: "#AutoDescriptionTable",
            fields: [
                {
                    label: "Row:",
                    name: "Row"
                }, {
                    label: "Description:",
                    name: "Description"
                }
            ]
        });
        $("#AutoDescriptionTable").DataTable({
            dom: 'Blfrtip',
            select: true,
            buttons: [
                    { extend: "create", editor: DescEditor },
                    { extend: "edit", editor: DescEditor },
                    { extend: "remove", editor: DescEditor }
            ],

            ajax: {
                data: {},
                type: "POST",
                url: "PopupAutoDescription.aspx/GetAutoDescription",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                dataSrc: function (response) {
                    return response.d.Description;
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            },
            columns: [
                { data: "Row" },
                { data: "Description" }
            ],
        })
    })
</script>

</head>
<body>

<form id="autoDescriptionForm" runat="server">
    <div class="main">
        <h1>BOL Auto Complete Description</h1>
        <table id="AutoDescriptionTable" class="display">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>Description</th>
                </tr>
            </thead>
        </table>
    </div>
</form>

</body>
</html>

d052057 · February 2018

here is my ASP.NET in the back end to update and delete records (still in work).

<WebMethod()>
Public Shared Function UpdateAutoDescription(ByVal _Description As String) As String
Dim _UserId As String = HttpContext.Current.User.Identity.Name
Dim _msg As String = "Update Auto BOL Description Completed!"
'Try
' Dim _Bol As BillOfLading = New BillOfLading
' With _Bol
' .userId = _UserId
' .mode = "UPDATE"
' .autoDescription = _Description
' .QueryAutoDescription()
' End With
'Catch ex As Exception
' Throw New RBWebAccessException(ex.Message)
'End Try
Return _msg
End Function
<WebMethod()>
Public Shared Function DeleteAutoDescription(ByVal _Description As String) As String
Dim _UserId As String = HttpContext.Current.User.Identity.Name
Dim _msg As String = "Delete Auto BOL Description Completed!"
'Dim _Bol As BillOfLading = New BillOfLading
'With _Bol
' .userId = _UserId
' .mode = "UPDATE"
' .autoDescription = _Description
' .QueryAutoDescription()
'End With
Return _msg
End Function

kthorngren · February 2018

Did you follow the steps in the tech note link provided in the error?
https://datatables.net/manual/tech-notes/14

What did you find?

Kevin

d052057 · February 2018

Thank you Kevin. I did change a field from 'Row' to DT_RowId and it works now.
Thank you again.

How do I update my database via AJAX when I add, edit, delete record (asp.net webmethod backend)?

Is there any links I can see their codes.

Thanks.

allan · February 2018

If you'd like to use the .NET libraries provided for Editor the documentation for them is here.

If you prefer to write your own, the client/server communication is documented here.

Allan

d052057 · February 2018

Here is a piece of code I found to do it but I have a hard time to incorporate with the DTE. Please bare with me, i am new to this environment. How can I use this code with Create, Update, Delete from the DTE buttons?

Thanks.
editor.on('preSubmit', function (e, data, action) {
// CREATE A RECORD
if (action == "create") {
$.ajax({
type: 'POST',
url: getUrl(),
contentType: "application/json",
dataType: 'json',
data: JSON.stringify(data.data[0])
})
}
// EDIT A RECORD
else if (action == "edit") {
for(var row in data.data){
var id = row
var values = data.data[row];
}
$.ajax({
type: 'PUT',
url: getUrl() + id,
contentType: "application/json",
dataType: 'json',
data: JSON.stringify(values)
})
}
// DELETE ONE OR MORE RECORDS
else if (action == "remove") {
ids = [];
for(var row in data.data){
ids.push(row);
}
$.ajax({
type: 'DELETE',
url: getUrl() + ids.join(","),
contentType: "application/json",
dataType: 'json',
data: []
})
}

allan · February 2018

That's client-side code. The first thing to do will be to determine what you are going to use on the server-side and then what it expects to get from the client-side. If it isn't what Editor sends by default then preSubmit is indeed the correct even to use to modify the data, but not to submit data - use the built in ajax for that.

Allan

d052057 · February 2018

Thank you for your info. I am really close to what I am looking to do now. It works but there is one thing I need to fix. After, I click on 'UPDATE' button, my AJAX in preSubmit updates record in the backend database. But the Editor screen is still open (visible). How I am going to tell the DTE to hide the screen?
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="PopUpAutoDescription.aspx.vb" Inherits="MyAccount_Restricted_PopUpAutoDescription" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Auto Complete Description</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />

<link rel="stylesheet" type="text/css" href="/js/DataTables/Datables-1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Buttons-1.5.1/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/select-1.2.5/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Editor-1.7.2/css/editor.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/datatables.min.css" />

<script type="text/javascript" src="/js/DataTables/Jquery-1.12.3/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="/js/DataTables/dataTables.min.js"></script>
<script type="text/javascript" src="/js/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/DataTables/buttons-1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Select-1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Editor-1.7.2/js/dataTables.editor.min.js"></script>

<script type="text/javascript">
    var DescEditor;

    $(document).ready(function () {
        DescEditor = new $.fn.dataTable.Editor({
            ajax: {
                create: {
                    type: 'POST',
                    url: 'PopupAutoDescription.aspx/UpdateAutoDescription',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                },
                edit: {
                    type: "POST",
                    url: 'PopupAutoDescription.aspx/UpdateAutoDescription',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                },
                remove: {
                    type: 'POST',
                    url: 'PopupAutoDescription.aspx/DeleteAutoDescription',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }
            },
            table: "#AutoDescriptionTable",
            fields: [
                {
                    label: "Description:",
                    name: "Description"
                }
            ]
        });
        // reload table after submit
        DescEditor.on('submitComplete', function () {                
            $("#AutoDescriptionTable").DataTable().ajax.reload(null, false);
        });
        DescEditor.on('preSubmit', function (e, data, action) {
            if (action == "create") {
                for (var row in data.data) {
                    var id = row
                    var values = data.data[row];
                }
                var DataStr = '';
                DataStr = "{"
                DataStr += "'Description':'" + values + "'"
                DataStr += "}"
                $.ajax({
                    type: 'POST',
                    url: "PopupAutoDescription.aspx/UpdateAutoDescription",
                    data: (DataStr),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                })
            };
            if (action == "edit") {
                for (var row in data.data) {
                    var id = row
                    var values = data.data[row];
                }
                var DataStr = '';
                DataStr = "{"
                DataStr += "'Description':'" + values + "'"
                DataStr += "}"
                $.ajax({
                    type: 'POST',
                    url: "PopupAutoDescription.aspx/UpdateAutoDescription",
                    data: (DataStr),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                })
            };
            if (action == "remove") {
                for (var row in data.data) {
                    var id = row
                    var values = data.data[row];
                }
                var DataStr = '';
                DataStr = "{"
                DataStr += "'Description':'" + values + "'"
                DataStr += "}"
                $.ajax({
                    type: 'POST',
                    url: "PopupAutoDescription.aspx/UpdateAutoDescription",
                    data: (DataStr),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                })
            }
        });
        $("#AutoDescriptionTable").DataTable({
            dom: 'Blfrtip',
            select: true,
            buttons: [
                    { extend: "create", editor: DescEditor },
                    { extend: "edit", editor: DescEditor },
                    { extend: "remove", editor: DescEditor }
            ],

            ajax: {
                data: {},
                type: "POST",
                url: "PopupAutoDescription.aspx/GetAutoDescription",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                dataSrc: function (response) {
                    return response.d.Description;
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            },
            columns: [
                { data: "DT_RowId" },
                { data: "Description" }
            ],
        })
    })
</script>

</head>
<body>
<form id="autoDescriptionForm" runat="server">
<div class="main">
<h1>BOL Auto Complete Description</h1>
<table id="AutoDescriptionTable" class="display">
<thead>
<tr>
<th>Row</th>
<th>Description</th>
</tr>
</thead>
</table>
</div>
</form>
</body>
</html>

allan · February 2018

As I mentioned, you don't want to do an Ajax submit in the preSubmit event. It would be better to use the ajax option (it can accept a function if you do want to make your own Ajax call). That way, Editor knows when the Ajax call is complete and can close the editing window (there is a callback function for that if you do make your own function for it).

Allan

d052057 · February 2018

This is what I come up to make it to work. I am not sure this is the right way to it but it is working. I am looking for suggestions for improvement because I just get into this.

Thanks.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="PopUpAutoDescription.aspx.vb" Inherits="MyAccount_Restricted_PopUpAutoDescription" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Auto Complete Description</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />

<link rel="stylesheet" type="text/css" href="/js/DataTables/Datables-1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Buttons-1.5.1/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/select-1.2.5/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/Editor-1.7.2/css/editor.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/js/DataTables/datatables.min.css" />

<script type="text/javascript" src="/js/DataTables/Jquery-1.12.3/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="/js/DataTables/dataTables.min.js"></script>
<script type="text/javascript" src="/js/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/DataTables/buttons-1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Select-1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/js/DataTables/Editor-1.7.2/js/dataTables.editor.min.js"></script>

<script type="text/javascript">
    var DescEditor;

    $(document).ready(function () {
        DescEditor = new $.fn.dataTable.Editor({
            table: "#AutoDescriptionTable",
            fields: [
                {
                    label: "Description:",
                    name: "Description"
                }
            ]
        });
        // reload table after submit
        DescEditor.on('submitComplete', function () {
            $("#AutoDescriptionTable").DataTable().ajax.reload(null, false);
        });
        DescEditor.on('preSubmit', function (e, data, action) {
            UpdateRecord(data, action);
            //if (action == "create") {
            //    UpdateRecord(data, action);
            //};
            //if (action == "edit") {
            //    UpdateRecord(data, action);
            //};
            //if (action == "remove") {
            //    UpdateRecord(data, action);
            //}
        });
        $("#AutoDescriptionTable").DataTable({
            dom: 'Blfrtip',
            select: true,
            buttons: [
                    { extend: "create", editor: DescEditor },
                    { extend: "edit", editor: DescEditor },
                    { extend: "remove", editor: DescEditor }
            ],

            ajax: {
                data: {},
                type: "POST",
                url: "PopupAutoDescription.aspx/GetAutoDescription",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                dataSrc: function (response) {
                    return response.d.Description;
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            },
            columns: [
                { data: "DT_RowId" },
                { data: "Description" }
            ],
        })
    });
    function getDescription(id, EditedDescription, action) {
        var tbl = $('#AutoDescriptionTable').DataTable();
        var trow = tbl.rows().data().length;
        DataDescription = new Array();
        var ReturnDescritip = '';
        var CurrentDesc = '';
        if (action == 'edit') {
            for (row = 0; row < trow; row++) {
                CurrentDesc = tbl.rows().data()[row].Description;
                if (tbl.rows().data()[row].DT_RowId == parseInt(id)) {
                    DataDescription.push(EditedDescription)
                }
                else {
                    DataDescription.push(CurrentDesc)
                }
            }
        }
        if (action == 'remove') {
            for (row = 0; row < trow; row++) {
                CurrentDesc = tbl.rows().data()[row].Description;
                if (tbl.rows().data()[row].DT_RowId !== parseInt(id)) {
                    DataDescription.push(CurrentDesc)
                }
            }
        }
        if (action == 'create') {
            for (row = 0; row < trow; row++) {
                CurrentDesc = tbl.rows().data()[row].Description;
                DataDescription.push(CurrentDesc)
            }
            DataDescription.push(EditedDescription)
        }
        DataDescription.sort();
        ReturnDescription = DataDescription.join('\t');
        return ReturnDescription;
    };
    // update database on server side
    function UpdateRecord(data, action) {
        for (var row in data.data) {
            var id = row
            var values = data.data[row].Description;
        }
        var DataDescription = '';
        var DataStr = '';
        DataDescription = getDescription(id, values, action);
        DataStr = "{"
        DataStr += "'Description':'" + DataDescription + "'"
        DataStr += "}"
        $.ajax({
            type: 'POST',
            url: "PopupAutoDescription.aspx/UpdateAutoDescription",
            data: (DataStr),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                alert(response.d);
                // hide editor screen if update is successful
                DescEditor.display(false);
            },
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        })
    }
</script>

</head>
<body>
<form id="autoDescriptionForm" runat="server">
<div class="main">
<h1>BOL Auto Complete Description</h1>
<table id="AutoDescriptionTable" class="display">
<thead>
<tr>
<th>Row</th>
<th>Description</th>
</tr>
</thead>
</table>
</div>
</form>
</body>
</html>

d052057 · February 2018

Thank you all for all of your helps. Finally, I get it most of it done now. However, it will be more to come.
For Allen, you may look into Jquery vs Bootstrap issue. If I used Jquery, I have to tell Editor to close its screen (DescEditor.display(false)). If I use Bootstrap, I don't need to Orelse it is my code that is not written properly.:(

Datatables.net Editor

Datatables.net Editor

Answers

Howdy, Stranger!

Categories

DataTables

Datatables.net Editor

Datatables.net Editor

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables