Kendo UI - Browser back will reset datetime pickers

3 posts, 0 answers
  1. TBG
    TBG avatar
    4 posts
    Member since:
    Dec 2011

    Posted 06 Apr 2013 Link to this post

    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);
        }

     
  2. TBG
    TBG avatar
    4 posts
    Member since:
    Dec 2011

    Posted 09 Apr 2013 Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 09 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top