Incompatible DateTime return value

[Joel]

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

 

 

[Viktor Tachev]

Hello Joel,

 

From the provided code it seems that the start and end date are retrieved as strings. The value shown in the alert is the string representation of the dates.

In order to retrieve the start and end values I suggest utilizing the range() method of the widget. The method will return an object with start and end properties containing Date objects. That can be passed to the Controller. 

Alternatively you can send the dates as strings in a format that is expected by the server. The kendo.toString() method can be used for that. 

Let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Joel]

This got me there.  Basically, if I keep JavaScript out of the equation then I get success.  Bring on Blazor so I can get away from it all together.

grid:

@(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"))))

gridGetData/grid.Read:

function gridGetData() {

    var dateRangePicker = $("#daterangepicker").data("kendoDateRangePicker");
    if (dateRangePicker != null) {

        var range = dateRangePicker.range();
        if (range != null) {

            //alert("Start2 - " + range.start);
            //alert("End - " + range.end);

            var groupId = $('#groupId').val();

            return {
                customerId: customerId,
                customerUniqueId: customerUniqueId,
                startDate: range.start,
                endDate: range.end,
                groupId: groupId,
                personId: personId
            };
        }
    }

    return null;
}

 

[Viktor Tachev]

Hello Joel,

 

I am glad that the information was helpful.

If you would like, you can try our Blazor components. Currently there are more than 30 available and we are actively working on bringing in new ones. Check them out below:

https://demos.telerik.com/blazor-ui

 

Regards,
Viktor Tachev
Progress Telerik

[Joel]

I have did some work with the Blazor components about 2 months ago.  Honestly, I was disappointed.  Just working with the TreeView (no TreeList existed at the time) and the Grid it took me over a 1 1/2 weeks to get a proof of concept going with about 6 interactions with the team.  I'll wait until its more mature before I go back.  I am, however, very much looking forward to using Blazor.

[Marin Bratanov]

Hello Joel,

We've added a lot of features and components to our Blazor offering in the last couple of months (such as grid excel export; date range picker, drawer, listbox, pager, tooltip, upload and checkbox components; significant enhancements on the responsiveness on dropdowns and the UX of date inputs; serialization features on the DataSourceRequest object; column virtualization, frozen columns and automatic column generation in the grid, as well as support for nested/navigation objects in the grid data binding). The treeview selection is planned for implementation, hopefully around the R3 2020 timeframe. The treelist is also planned, and it might even arrive during the summer.

Overall, we now have over 40 components in the UI for Blazor suite, and I'd say the grid is almost feature-complete. With the official release of the WebAssembly flavor that is due by the end of the month, Blazor should become a fully viable application development platform, and we're at the forefront of offering comprehensive native components.

 

Regards,
Marin Bratanov
Progress Telerik

[Joel]

Good to hear.  I will revisit this when the TreeList is introduced.