Inline Date Editing not Enabled

Inline Date Editing not Enabled

dpanscikdpanscik Posts: 119Questions: 32Answers: 0

I have inline editing turned on. I can do an inline edit of all fields except for the date.

Is there something specific I must do to enable inline date editing?

Here is my code;


@{ ViewBag.Title = "On Call"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>On Call</h2> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.5/css/buttons.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.6.1/css/select.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.3.1/css/dataTables.dateTime.min.css"> <link href="~/Content/style/editor.dataTables.css" rel="stylesheet" /> <link href="~/Views/OnCall/css/generator-base.css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.13.3/af-2.5.2/b-2.3.5/b-html5-2.3.5/b-print-2.3.5/date-1.3.1/fh-3.3.1/kt-2.8.1/r-2.4.0/sl-1.6.1/datatables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.13.3/af-2.5.2/b-2.3.5/b-html5-2.3.5/b-print-2.3.5/date-1.3.1/fh-3.3.1/kt-2.8.1/r-2.4.0/sl-1.6.1/datatables.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script> <script src="~/scripts/dataTables.responsive.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.print.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/select/1.6.1/js/dataTables.select.min.js"></script> <script src="https://cdn.datatables.net/datetime/1.3.1/js/dataTables.dateTime.min.js"></script> <script type="text/javascript" src="~/scripts/dataTables.editor.min.js"></script> <style> dt { margin-top: 1em; } dt:first-child { margin-top: 0; } dd { width: 25% } *[data-editor-field] { border: 1px dashed #ccc; padding: 0.5em; margin: 0.5em; } *[data-editor-field]:hover { background: #f3f3f3; border: 1px dashed #333; } .DTE_Form_Info{ color: black; } div.dt-datetime { position: absolute; background-color: #f68d28; z-index: 2050; border: 1px solid #ccc; box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5); padding: 0 20px 6px 20px; width: 275px; } div.dt-datetime table button { background-color: #fada06; } button.dt-button { color: white; } </style> <script> var editor; $(document).ready(function () { editor = new $.fn.dataTable.Editor({ ajax: '/api/OnCallData', table: "#onCall", fields: [ { label: "Shop", name: "shop" }, { label: "Day", name: "dayOC", type: "datetime", format: "ddd, DD MMM YYYY" }, { label: "Name", name: "name" }, { label: "Phone", name: "phone" }, { label: "Email", name: "email" } ], formOptions: { inline: { submit: 'allIfChanged' } } }); $('#onCall').on('click', 'tbody td:not(:first-child)', function (e) { editor.inline(this, { submitOnBlur: true }); }); $("#onCall").DataTable({ dom: "Bfrtip", order: [[2, 'asc']], "responsive": true, "processing": true, // for show progress bar "serverSide": true, // for process server side "filter": true, // this is for disable filter (search box) "orderMulti": false, // for disable multiple column at once "pageLength": 25, "ajax": { "url": "/api/OnCallData", "type": "POST", "datatype": "json", "data": function (d) { return $.extend({}, d, { "start_date": $('#datemin').val(), "form_id": "OCgrid", }); } }, "columnDefs": [ { "defaultContent": "-", "targets": "_all" }, { "targets": [1], "visible": true, "searchable": true, "orderable": true, "type": "datetime", }, ], "columns": [ { "data": "dayOC", "title": "Day", "name": "dayOC", "autoWidth": true }, { "data": "shop", "title": "Shop", "name": "shop", "autoWidth": true }, { "data": "name", "title": "Name", "name": "name", "autoWidth": true }, { "data": "phone", "title": "Phone", "name": "phone", "autoWidth": true }, { "data": "email", "title": "Email", "name": "email", "autoWidth": true }, ], select: true, buttons: [ { extend: 'print', title: "On Call", messageTop: 'Weekend warriors' }, { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ], "fnRowCallback": function (nRow, aData) { const otherDate = new Date(aData["dayOC"]); // Some other date aData["dayOC"] const todayDate = new Date(); // Current or today's date // Check if the other date matches today's date if ( otherDate.getDate() === todayDate.getDate() && otherDate.getMonth() === todayDate.getMonth() && otherDate.getYear() === todayDate.getYear() ) { $('td', nRow).css('background-color', '#fada06'); $('td', nRow).css('color', 'black'); } else { } } }); }); </script> </head> <body> <div class="container"> <br /> <div style="width:90%; margin:0 auto;"> <table border="0" class="display nowrap" style="width:100%" cellspacing="5" cellpadding="5"> <tbody> </tbody> </table> <table id="onCall" class="row-border table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> </div> </div> </body> </html>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    $('#onCall').on('click', 'tbody td:not(:first-child)'

    The selector you are using for the click event on cells is explicitly excluding the first cell in each row. In this case that happens to be your date column.

    Remove the :not(:first-child) part.

    Allan

  • dpanscikdpanscik Posts: 119Questions: 32Answers: 0

    Presto! Like magic it works! Thank you Allan.

Sign In or Register to comment.