Calendar display in the wrong position

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

    Posted 26 Jul 2016 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
    1717 posts

    Posted 28 Jul 2016 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. Michel
    Michel avatar
    42 posts
    Member since:
    Sep 2011

    Posted 28 Jul 2016 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