Calendar display in the wrong position

3 posts, 1 answers
  1. Michel
    Michel avatar
    18 posts
    Member since:
    Sep 2011

    Posted 26 Jul Link to this post

    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>

     

  2. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Jul Link to this post

    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:

     

    Regards,
    Viktor Tachev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Michel
    Michel avatar
    18 posts
    Member since:
    Sep 2011

    Posted 28 Jul in reply to Viktor Tachev Link to this post

    Hi Viktor,

    That was the problem.

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

    Best regards

Back to Top