Calendar display in the wrong position

[Michel]

When using a datetime picker in a custom editor from a grid that has lot of columns that need to scroll for accessing the edit button,

The calendar display outside the editor window. Attached is a screenshot.

Any turnaround ?

MyView

@(Html.Kendo().Grid(Model)
.Name("myGrid")
.ToolBar(tools => tools.Excel()).Name("idsName")
.Columns(columns =>
{
columns.Bound(model => model.Genre).Title("Genre");
columns.Bound(model => model.Price).Title("Price");
columns.Bound(model => model.ReleaseDate).Title("ReleaseDate");
columns.Bound(model => model.Title).Title("Title");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' disabled='disabled'/>");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
//columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("@Html.Kendo().CheckBox()");
columns.Command(commands =>
{
commands.Edit().Text(@Localizer["idsEdit"].Value); // The "edit" command will edit and update data items.
commands.Destroy(); // The "destroy" command removes data items.
}).Title("Commands").Width(200);
})
.Editable(editable => { editable.Mode(GridEditMode.PopUp);
editable.TemplateName("MovieEditor");
editable.Window(w=>w.Title("MonTitre").
Width(450));}) // Use inline editing mode.
.DataSource(dataSource => dataSource
.Ajax())
)

MyEditor

@model MvcMovieCore.Models.Movie
@{
ViewData["Title"] = "Edit";
}
<div class="form-horizontal">
<h4>Movie</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="ID" />
<div class="form-group">
<label asp-for="Genre" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger" />
</div>
</div>
<div class="form-group">
@(Html.Kendo().DateTimePicker()
.Name("MyPick")
.HtmlAttributes(new { style = "left:50px;" })
)
</div>
<div class="form-group">
<label asp-for="Price" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" type="number" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="ReleaseDate" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="ReleaseDate" asp-format="{0:D}" class="form-control" />
<span asp-validation-for="ReleaseDate" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Title" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger" />
</div>
</div>
</div>

 

[Viktor Tachev]

Hello Michel,

The behavior from the screenshot is most likely caused by a known issue in jQuery. It is observed in versions 1.12.0 and 2.2.0. Please make sure that you are using a different version of jQuery and see how the behavior changes. 

For additional information on jQuery versions compatibility with Kendo refer to the following article:

• http://docs.telerik.com/kendo-ui/intro/installation/prerequisites

 

Regards,
Viktor Tachev
Telerik by Progress

[Michel]

Hi Viktor,

That was the problem.

Thank's a lot I was searching for a turnaround for 3 days now.

Best regards