The Date value submitted to the Controller method from the DateRangePicker control is not compatible with the System.DateTime .NET Type.
DateRangePicker:
<
div
class
=
"col-sm-6"
>
<
h6
>Date Filter:</
h6
>
@(Html.Kendo().DateRangePicker()
.Name("daterangepicker")
.HtmlAttributes(new { style = "width: 100%" })
.Events(e => e.Change("onDateRangeChange")))
</
div
>
Initialize Script:
$(document).ready(function() {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
alert(startDate == null);
alert(endDate == null);
alert("Start - " + startDate);
alert("End - " + endDate);
var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");
var range = {
start: startDate,
end: endDate
};
dateRangePicker.range(range);
//dateRangePicker.dateView._current = startDate;
//alert("Start - " + dateRangePicker.range().start);
//alert("End - " + dateRangePicker.range().end);
});
onDateRangeChange:
function onDateRangeChange() {
var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");
if (dateRangePicker != null) {
var range = dateRangePicker.range();
if (range != null) {
var startDate = range.start;
var endDate = range.end;
alert("Start1 - " + startDate);
alert("End - " + endDate);
$('#startDate').val(startDate);
$('#endDate').val(endDate);
//dateRangePicker.dateView._current = startDate;
var grid = $("#grid").getKendoGrid();
grid.dataSource.read();
}
}
}
Grid Definition:
<
div
class
=
"col-sm-8"
>
<
a
href
=
"#"
onclick
=
"onCreate()"
>Create New</
a
>
@(Html.Kendo().Grid<
Session
>()
.Name("grid")
.Columns(columns =>
{
columns.Command(command => command
.Custom("Detail")
.Click("goDetail"))
.Width(Glossary.Portal.ButtonWidth);
columns.Bound(p => p.Time).Title("Time")
.Format("{0:hh:dd:mm tt}");
})
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;margin-right:0px;padding-right:0px;" })
.Selectable()
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("IndexJson", "Sessions")
.Data("gridGetData"))))
</
div
>
gridGetData:
function gridGetData() {
var groupId = $('#groupId').val();
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
alert("Start1 - " + startDate);
alert("End - " + endDate);
alert("groupId - " + groupId);
//var isoStartDate = startDate.toISOString();
//var isoEndDate = endDate.toISOString();
//alert("Start2 - " + isoStartDate);
//alert("End - " + isoEndDate);
var data = {
customerId: customerId,
customerUniqueId: customerUniqueId,
startDate: startDate,
endDate: endDate,
groupId: groupId,
personId: personId
};
alert("Start3 - " + data.startDate);
alert("End - " + data.endDate);
return data;
}
Controller:
public async Task<
IActionResult
> IndexJson(
[DataSourceRequest] DataSourceRequest request,
int customerId,
string customerUniqueId,
DateTime startDate,
DateTime endDate,
int? groupId,
int? personId)
{
if (customerId == 0)
{
throw new Exception(
$"Invalid {nameof(customerId)} parameter value.");
}
if (startDate == DateTime.MinValue ||
endDate == DateTime.MinValue)
{
throw new Exception(
$"Invalid {nameof(startDate)} or {nameof(endDate)} parameter values.");
}
...
Attempt1:
Populate grid, initialize with DateTime parameter type
See attached files:
- Annotation 2020-05-05 1.png - This is what happens the first time the grid.Read method is called
- Annotation 2020-05-05 alert.png - This shows the same alert from the gridGetData method 1st attempt then after the onDateRangeChange is called.
onDateRangeChange: Nothing. The Controller is not called
Attempt2:
Populate grid, initialize with string parameter type
I changed the Controller.IndexJson method's Parameter from DateTime to String DataType
At this point, the gridGetData successfully fired the Controller method and the string value given matched what was on the "Annotation 2020-05-05 alert.png" right side. On DateTime.TryParse, the value was not compatible with .NET.
Thanks in advance for your help,
Joel