Kendo UI - Browser back will reset datetime pickers

[TBG]

Hi,

1.  I have a page with a mix of Kendo datetime picker, textboxes, and a grid.

2. The datetime picker and textboxes act as filters for the grid when retrieving the data.

3. If I do change some of the fields to the datetime picker and textboxes to the grid the data will populate correctly.

4.   There's a link to a details page in the grid, if I click on the link I am brought to a details page.

The problem is if I click on the back button in the browser I am returned to the correct page, but the kendo datetime picker field is reset to the default (the textbox values seems to remain). The grid is also filtered to the default datetime.

I do not use the Html.BeginForm() but don't think I need tosince the filter button is called in javascript.

Any help would be appreciated. Thanks.

<span>StartDate
    @(Html.Kendo().DateTimePicker()
        .Value((DateTime)Convert.ToDateTime(ViewBag.StartDate))
        .Name("StartDatePicker")
        .Format("yyyy/MM/dd HH:mm:ss")
        .TimeFormat("HH:mm:ss")
        .HtmlAttributes(new { id = "startDateFilter" })
        )
</span>

<span>EndDate
    @(Html.Kendo().DateTimePicker()
        .Value((DateTime)Convert.ToDateTime(ViewBag.EndDate))
        .Name("EndDatePicker")
        .Format("yyyy/MM/dd HH:mm:ss")
        .TimeFormat("HH:mm:ss")
        .HtmlAttributes(new { id = "endDateFilter" })
    )
</span>

<span>Customer
    @Html.TextBox("Customer", null, new { id = "customerFilter", style = "width:105px" })
</span>

<span>
    <input type="submit" id="filterButton" value="Search" class="button-small"/>
</span>

@(Html.Kendo().Grid<FailureLogSummaryViewModel>()
            .Name("FailureLogSummaryGrid")
            .Columns(column =>
            {
                column.Bound(x => x.Id).Width(90).Template(
                    @<text><a href="@Url.Content("~/Home/Edit/" + item.Id)">@Resources.Global.SummaryGridOpenBookString</a>
                    </text>).ClientTemplate("<a href='" + Url.Content("~/Home/Edit/") + "#= Id #'>Open Log</a>").Title("Open").Sortable(false);
            })
            .DataSource(dataBinding => dataBinding
                .Ajax()
                .PageSize(50)
                .Read(read => read.Action("GetData", "Summary")
                    .Data("getSearchFilters"))
                .Model(model => model.Id(o => o.Id)))
            .Events(e => e
                .DataBound("onGridItemsDatabound"))
            .Pageable(paging => paging.Refresh(true))
)
}

Javascript:
var getSearchFilters = function () {
    return {
        startDateFilter: $('#startDateFilter').val(),
        endDateFilter: $('#endDateFilter').val(),
        customerFilter: $('#customerFilter').val(),
    };
};

$("#filterButton").click(function () {
    $("#FailureLogSummaryGrid").data("kendoGrid").dataSource.read();
});

Code Behind:
    public ActionResult GetData([DataSourceRequest]DataSourceRequest request, 
        string startDateFilter, string endDateFilter,
        string customerFilter)
    {
        ... (get data)
        return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
    }

 

[TBG]

I noticed that the datetimepicker will automatically reset to it's "default". If I have other textbox on the side, those seem to be cached.

[Petur Subev]

Hello Su,

Is this behavior happening in all the browsers?

Basically the value of the DateTimePicker should be persisted. Check the following demo:

http://jsbin.com/uregoy/1   

I assume that you have specified default value and because of this the state is lost (I can see that you have specified value through the Value method). It all normal since the scripts are re-executed, this is the default browser behavior.

Regarding the Grid - probably the same is happening - the value of the DateTimePickers is changed to the default one and the default values are sent to the server. 

Consider removing the default values if you want to avoid such behavior.


Kind Regards,
Petur Subev
the Telerik team