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

1 Answer 35 Views
Date/Time Pickers
Biswajit
Top achievements
Rank 1
Biswajit asked on 07 Sep 2022, 07:38 AM

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

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 09 Sep 2022, 04:21 PM

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

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Tags
Date/Time Pickers
Asked by
Biswajit
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or