Editor - Error "Cannot read property 'oFeatures' of undefined" when editing Datatable

fillion07

Hi Allan and community,
we are having this error "Cannot read property 'oFeatures' of undefined" when editing Datatable. It fails in dataTables.editor.min.js
on the line if(dt){ssp=dt["settings"]()[0][("oFeatures")]["bServerSide"];
My feeling is there is something wrong with the controller (server side).

Javascript (editor function run on Page Fully Load):

 var editor;
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
        window.addEventListener("load", pageFullyLoaded, false);
    }
    function editor()
    {
        editor = new $.fn.dataTable.Editor({
            ajax: "/api/dashboards",
            table: "#tbListingsDE",
            fields: [{
                label: "Dashboard Name E:",
                name: "DashboardNameE"
            }, {
                label: "Dashboard Name F:",
                name: "DashboardNameF"
            }, {
                label: "DescriptionE:",
                name: "DescriptionE"
            }, {
                label: "DescriptionF:",
                name: "DescriptionF"
            }, {
                label: "ServerLinkE:",
                name: "ServerLinkE"
            }, {
                label: "ServerLinkF:",
                name: "ServerLinkF"
            }, {
                label: "DisplayOrder:",
                name: "DisplayOrder"
            }
            ]
        });
        $('#tbListingsDE').on('click', 'tbody td:not(:first-child)', function (e) {
            editor.inline(this);
        });
        $('#tbListingsDE').DataTable({
            dom: "Bfrtip",
            ajax: "/api/dashboards",
            order: [[1, 'asc']],
            columns: [
                 {
                     data: null,
                     defaultContent: '',
                     className: 'select-checkbox',
                     orderable: false
                 },
                { data: "DashboardNameE" },
                { data: "DashboardNameF" },
                { data: "DescriptionE" },
                { data: "DescriptionF" },
                { data: "ServerLinkE" },
                { data: "ServerLinkF" },
                { data: "DisplayOrder" }
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ]
        });
    }

Controller (C#.NET):

using DataTables;
using Solution.Models;

 public class DashboardsController : ApiController
    {

        [Route("api/dashboards")]
        [HttpGet]
        [HttpPost]
        public IHttpActionResult Dashboards()
        {
            var request = HttpContext.Current.Request;
            using (var db = new Database("sqlserver", clsBaseData.DBConnect.ConnectionString))
            {
                var response = new Editor(db, "dbo.PortalDashboards", "PortalDashboardID")
                    .Model<DashboardsModel>()
                    .Field(new Field("DashboardNameE"))
                    .Field(new Field("DashboardNameF"))
                    .Field(new Field("DescriptionE"))
                    .Field(new Field("DescriptionF"))
                    .Field(new Field("ServerLinkE"))
                    .Field(new Field("ServerLinkF"))
                    .Field(new Field("DisplayOrder"))
                    .Process(request)
                    .Data();
                return Json(response);
            }
        }
    }

Model:

 public class DashboardsModel
    {
        public string DashboardNameE { get; set; }

        public string DashboardNameF { get; set; }

        public string DescriptionE { get; set; }

        public string DescriptionF { get; set; }

        public string ServerLinkE { get; set; }

        public string ServerLinkF { get; set; }

        public string DisplayOrder { get; set; }
    }

Global.asax:

 public class WebApiApplication : System.Web.HttpApplication
    {

        protected void Application_Start()
        {

            GlobalConfiguration.Configure(WebApiConfig.Register);
        }

    }

App_Start:

    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

allan

Hi,

Thanks for your question. Could you confirm what version of Editor it is that you are using please? That line doesn't appear to exist in the current release of Editor - even taking into account the minification.

The error message suggests that Editor can't find the settings for the DataTable defined in the table option.

Could you try running the debugger on the table and let me know the debug code so I can dig into it a bit deeper please?

Thanks,
Allan

fillion07

Using http://debug.datatables.net/obimen I was able to find out missing Software in my solution:

fillion07

Editor version: 1.6.5

Imported JS:

    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js">

HTML:

<table id="tbListingsDE" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th></th>
                    <th>DashboardNameE</th>
                    <th>DashboardNameF</th>
                    <th>DescriptionE</th>
                    <th>DescriptionF</th>
                    <th>ServerLinkE</th>
                    <th>ServerLinkF</th>
                    <th>DisplayOrder</th>
                </tr>
            </thead>
        </table>

allan

Thanks! So that shows that Editor isn't actually included on the page. If you include it (and upgrade to the latest version of DataTables) does it work?

Thanks,
Allan

fillion07

Thanks Allan for helping me to reduce the scope of my troubleshooting.
Now, Editor works very well.

My issue was that I have other scripts that were causing silent conflicts with the DataTable and Editor scripts. I am using the Web Experience Toolkit v4 that contain the version 1.10.13 of the DataTable. The Web Experience Toolkit was placing the script of the DataTable 1.10.13 dynamically on top of all scripts. It was conflicting with DataTable 1.10.16 and the Editor.

The debugger has been very helpful by giving me a tip on the issue.

Thanks again Allan for your help and support.