In line edit not working datatables editor

In line edit not working datatables editor

nfitenfite Posts: 10Questions: 2Answers: 0

We are using editor - data tables and recently upgraded from 1.10.15 to version 1.10.16

In line edit is currently not functioning properly

When editing a field we are required to refresh the page to see the inline edit take place

Also when copying a field down where there are multiple rows the drag and drop copy feature is only working for one row (the nearest below the copy) and no other rows

Please see the CDN's below to know what we are using for our build Also below is our datatables client side code in case it is needed. I can also provide the editor code if needed

The edit button functionallity and the edtior form is working. Our problem currently is that in line edit is not saving the edit, unless the browser is refreshed and also as stated above with the copy functionallity.

Please help or let us know how to proceed.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.15/af-2.2.0/b-1.3.1/b-flash-1.3.1/fc-3.2.2/fh-3.1.2/kt-2.2.1/se-1.2.2/datatables.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/af-2.2.0/b-1.3.1/b-flash-1.3.1/fc-3.2.2/fh-3.1.2/kt-2.2.1/se-1.2.2/datatables.js"></script>

  var editor;
        $(document).ready(function () {

            //get projectid from url query string
            var queryString = window.location.search.substr(1);
            arrQueryString = queryString.split('=');
            //make every item in array lowercase
            for (var i in arrQueryString) {
                arrQueryString[i] = arrQueryString[i].toLowerCase();
            }
            //try to find projectid key in array
            var projectid;
            if (arrQueryString.indexOf('projectid') > -1) {
                //value of projectid will be the item after the index of projectid key
                projectid = arrQueryString[arrQueryString.indexOf('projectid') + 1];
                //console.log(projectid);
            }
            else
            {
                projectid = $("#hidProjectID").val();
            }

            var date = new Date().toISOString().slice(0, 19).replace('T', ' ');
            var apiendpoint = '<%=System.Web.Configuration.WebConfigurationManager.AppSettings("apiendpoint").ToLower() %>';
            editor = new $.fn.dataTable.Editor({
                //ajax: "https://www.fisherdesign.com/8pointapipublish2/api/projectitem/" + projectid,
                //ajax: "http://localhost:49942/api/projectitem/" + projectid,
                ajax: apiendpoint + projectid,
                table: "#tblItem",

                fields: [
                    {
                        label: " Name:",
                        name: "Item.Name"
                    },
                    {
                        label: "Main Description:",
                        name: "Item.Description",
                        className: 'entryReq'
                    },
                    {
                        label: "Second Description:",
                        name: "Item.Description2"

                    },
                    {
                        label: "Model:",
                        name: "Item.ModelNumber",
                        type: "readonly"
                    },
                    {
                        label: "SKU:",
                        name: "Item.SKU",
                        type: "readonly"

                    },
                    {
                        label: "UPC:",
                        name: "Item.UPC",
                        type: "readonly"
                    },
                   {
                       label: "Unit of Measure:",
                       name: "Item.UOM",
                       type: "select",
                       placeholder: "Select UOM",
                       className: 'entryReq'
                   },

                ]
            });


            var itemDT = $('#tblItem').DataTable({
                dom: "Bfrtip",
                "bPaginate": false,
                //ajax: "https://www.fisherdesign.com/8pointapipublish2/api/projectitem/" + projectid,
                //ajax: "http://localhost:49942/api/projectitem/" + projectid,
                ajax: apiendpoint + projectid,
                columns: [

                    {
                        data: "Item.Name",
                        defaultContent: "<i>Empty</i>"
                    },

                    { data: "Item.Description" },
                    { data: "Item.Description2"},
                    { data: "Item.ModelNumber" },
                    { data: "Item.SKU" },
                    { data: "Item.UPC" },        
                    {
                        data: "UOM.Name", editField: "Item.UOM"
                    },


                ],
                initComplete: function (settings, json) {
                    checkdata(json, arr_required);
                },
                keys: {

                    editor: editor
                },
                autoFill: {
                    editor: editor
                },
                select: {
                    style: 'os',

                    blurable: true
                },
                scrollX: true,
                width: "950px",

                buttons: [

                    { extend: "edit", editor: editor },

                ]
            });

            //Fix to known editor chrome issue of update button hiding until tabbed.
            editor.on('open', function () {
                $('div.DTE_Footer').css('text-indent', -1);
            });

            //handler on successful submission of editor form (create, edit, delete) 
            editor
                .on('onSubmitSuccess', function (e, json, data)
                {
                console.log("sucess!");
                //refresh datatable
                itemDT.ajax.reload();

                //if create or delete
                console.dir(e);
                if (e.currentTarget.dom.buttons.innerText == "Create" || e.currentTarget.dom.buttons.innerText == "Delete") {
                    console.log("successfully created new item!");
                    //if first item added, or no more items (after delete), then reload page
                    var intRowsCount = document.getElementById("tblItem").rows.length;

                    if (intRowsCount == 2 || intRowsCount == 1) {
                        location.reload();
                    }

                }

                })
            .on('open', function (e, mode, action) {
                if (mode === 'main') {
                    itemDT.keys.disable();
                }
            })
        .on('close', function () {
            itemDT.keys.enable();
        })
        .on('postEdit', function (e, json, data) {
            checkdata(json, arr_required);

        });
           // checkdata(json);

        });

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,277Questions: 26Answers: 4,766
    Answer ✓

    I might be missing it but I don't see where you are activating inline editing.

    Have you verified the proper data is being returned from the server when inline editing?

    Can you post a link to your page or build a test case showing the issue?
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • colincolin Posts: 15,142Questions: 1Answers: 2,586
    Answer ✓

    Yep, as Kevin said, inline() appears to be missing from your code. This example here shows how it should be done, so hopefully that'll get you going,

    Cheers,

    Colin

  • nfitenfite Posts: 10Questions: 2Answers: 0

    this was resolved thank you for your input, wound up being a server side error that i found through debugging, thanks for your feedback and responses

This discussion has been closed.