DatePickerFor scrolls page to top when trying to select date each time

[Biswajit]

Hi,

I am trying to work with datepickerfor, and coming across a strange behavior. Every time I try to select a month year or date, the page scrolls to the top and I have to come to the bottom of the page again to select the date. 

Here is the code snippet for reference (it is a partial view).
Can anyone help, on how to get rid of this behavior.

 

@model ARGUS.Domain.ViewModel.VM_QualityCheckAdminUI
    <div class="card" id="QCDetails">
        <div class="card-header sub-detail"><b>Quality Check Answer Details</b></div>
        <div class="card-body" id="QCDetailsBody">
            <div class="alert alert-danger alert-dismissible d-none msgErr">
                <button type="button" class="btn-close" data-bs-dismiss="alert" id="closeBtnError"></button>
                <p id="errorMessage">
                    <ul id="ErrorList">

                    </ul>
                </p>
            </div>
            <table id="Category Details" width="100%" style="border-color:white">
<Set of other code snippets, other table rows>
                <tr>
                    <td>
                        <b>Effective Start Date:<span><i class="bi bi-asterisk" style="color:red;font-size:9px"></i></span></b>
                    </td>
                    <td>
                        @*@Html.Kendo().DatePicker().Name("datepicker").Format("dd-mm-yyyy").HtmlAttributes(new { style = "width: 220px", @class = "dateEntryDisabled" });*@
                        @Html.Kendo().DatePickerFor(m => m.EffectiveStartDate).Format("dd-MMM-yyyy").Value(Model.EffectiveStartDate.ToString("dd-MMM-yyyy")).HtmlAttributes(new { style = "width: 220px", @class = "dateEntryDisabled" })
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Effective End Date:</b>
                    </td>
                    <td>
                        @Html.Kendo().DatePickerFor(m => m.EffectiveEndDate).Format("dd-MMM-yyyy").Value(Model.EffectiveEndDate == null ? "" : Model.EffectiveEndDate.Value.ToString("dd-MMM-yyyy")).HtmlAttributes(new { style = "width: 220px", @class="dateEntryDisabled" })
                    </td>
                </tr>
            </table>
        </div>
            
</div>

<style>
    .txtdisabled {
        background-color: #F0F0F0 !important;
        color:grey !important;
    }
</style>
importing scripts at the end

[Eyup]

Hello Biswajit,

 

Thank you for writing to us.

This might happen if:

1. There is an ajax() request or post() call somewhere
2. There is a javascript error interfering. To check that, you can open the page on Chrome browser and look at the F12 console inspector.

If none of these suggestions are the real reason for the problem, I would kindly ask you to open a formal support ticket and send us a sample runnable MVC sample demonstrating the issue so we can investigate it further on our side.

 

Regards,
Eyup
Progress Telerik