I get the following error: An unhandled exception ('ejDatePicker: methods/properties can be accessed only after plugin creation ...
Changing ej.Grid.EditingType.DateTimePicker to ej.Grid.EditingType.DatePicker works as expected.
Below the code that gives an error when you click the datetime column to edit an entry:
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="Grid"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch" },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 85 },
{ field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90, editType: ej.Grid.EditingType.String },
{ field: "OrderDate", headerText: 'Order Date', width: 100, editType: ej.Grid.EditingType.DateTimePicker, format: "{0:MM/dd/yyyy hh:mm:ss}", validationRules: { date: true }},
{ field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true } },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:c2}" },
{ field: "ShipCity", headerText: 'Ship City', width: 100, editType: ej.Grid.EditingType.Dropdown, },
{ field: "Verified", headerText: 'Verified', width: 90, editType: ej.Grid.EditingType.Boolean }
]
});
});
</script>
</body>
