Inline Date Editing not Enabled
Inline Date Editing not Enabled
dpanscik
Posts: 202Questions: 47Answers: 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
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
Presto! Like magic it works! Thank you Allan.