Popup for Event details does not work in Chrome, Safari or Opera

3 posts, 1 answers
  1. Eric
    Eric avatar
    19 posts
    Member since:
    Mar 2014

    Posted 24 Apr 2014 Link to this post

    Visual Studio 2012 Pro MVC 5 Razor views
    Kendo DevCraft MVC Web 2014.1.318.545

    I have a scheduler with a custom edit template -

     In IE and Firefox, double clicking an event in the calendar displays the popup perfectly.

    In Chrome, Safari or Opera, the popup does not show up on double click.

    Is there any way for me to decipher why? Is there a log to show why it's not working?

    Scheduler definition:

    01.@(Html.Kendo().Scheduler<HTServices.Models.TaskViewModel>()
    02.    .Name("scheduler")
    03.    .Date(new DateTime(2014,4,21,7,0,0))
    04.    .StartTime(new DateTime(2014,4,21,7,0,0))
    05.    .Height(600)
    06.    .Editable(edit =>
    07.    {
    08.        edit.TemplateName("ScheduleItemTemplate");
    09.        edit.Create(false);
    10.        edit.Destroy(false);
    11.    })
    12.    .Views(views =>
    13.    {
    14.        views.DayView();
    15.        views.WeekView(weekView => weekView.Selected(true));
    16.        views.MonthView();
    17.        views.AgendaView();
    18.    })
    19.    .Timezone("Etc/UTC")
    20.    .DataSource(d => d
    21.        .Model(m =>
    22.        {
    23.            m.Id(f => f.TaskID);
    24.            m.Field(f => f.Title).DefaultValue("No title");
    25.            m.Field(f => f.OwnerID).DefaultValue(1);
    26.            m.Field(f => f.Title).DefaultValue("No title");
    27.            m.RecurrenceId(f => f.RecurrenceID);
    28.        })
    29.        .Read("Read", "Scheduler")
    30.        .Create("Create", "Scheduler")
    31.        .Destroy("Destroy", "Scheduler")
    32.        .Update("Update", "Scheduler")
    33.    )
    34.)


    and the edit item template:

    001.@model HTServices.Models.TaskViewModel
    002.@{
    003.    //required in order to render validation attributes
    004.    ViewContext.FormContext = new FormContext();
    005.}
    006. 
    007.@functions{
    008.    public Dictionary<string, object> generateDatePickerAttributes(
    009.             string elementId,
    010.             string fieldName,
    011.             string dataBindAttribute,
    012.             Dictionary<string, object> additionalAttributes = null)
    013.    {
    014. 
    015.        Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();
    016. 
    017.        datePickerAttributes["id"] = elementId;
    018.        datePickerAttributes["name"] = fieldName;
    019.        datePickerAttributes["data-bind"] = dataBindAttribute;
    020.        datePickerAttributes["required"] = "required";
    021.        datePickerAttributes["style"] = "z-index: inherit;";
    022. 
    023.        return datePickerAttributes;
    024.    }
    025. 
    026.}
    027.<style type="text/css">
    028.    .panelbarHeader {
    029.        font-size: 1em;
    030.        font-weight: normal;
    031.    }
    032. 
    033.    .panelbarItem {
    034.        text-decoration: none;
    035.        font-size: .9em;
    036.        font-weight: normal;
    037.        padding-left: 20px;
    038.    }
    039.    .dutyPanel {
    040.        height: 200px;
    041.    }
    042. 
    043.    .displayDate {
    044. 
    045.    }
    046.     
    047.</style>
    048.<div class="k-edit-label">
    049.    @(Html.LabelFor(model => model.Client))
    050.</div>
    051.<div data-container-for="client" class="k-edit-field">
    052.    @(Html.TextBoxFor(model => model.Client, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox col-lg-12", data_bind = "text: client" }))
    053.</div>
    054.<div class="k-edit-label">
    055.    @(Html.LabelFor(model => model.Address))
    056.</div>
    057.<div data-container-for="address" class="k-edit-field">
    058.    @(Html.TextBoxFor(model => model.Address, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox", data_bind = "text: address" }))
    059.</div>
    060. 
    061.<div class="k-edit-label">
    062.    @(Html.LabelFor(model => model.Start))
    063.</div>
    064.<div data-container-for="start" class="k-edit-field">
    065. 
    066.    @(Html.Kendo().DateTimePickerFor(model => model.Start)
    067.        .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay"))
    068.        .Enable(false))
    069. 
    070.</div>
    071. 
    072.<div class="k-edit-label">
    073.    @(Html.LabelFor(model => model.End))
    074.</div>
    075.<div data-container-for="end" class="k-edit-field">
    076.    @(Html.Kendo().DateTimePickerFor(model => model.End)
    077.        .HtmlAttributes(generateDatePickerAttributes(
    078.            "endDateTime",
    079.            "end",
    080.            "value:end,invisible:isAllDay",
    081.            new Dictionary<string, object>() {{"data-dateCompare-msg", "End date should be greater than or equal to the start date"}}))
    082.        .Enable(false))
    083.</div>
    084. 
    085.<div class="k-edit-label">
    086.    @(Html.LabelFor(model => model.IsAllDay))
    087.</div>
    088.<div data-container-for="isAllDay" class="k-edit-field">
    089.    @(Html.DisplayFor(model => model.IsAllDay, new { @class = "k-checkbox", @readonly = "readonly", data_bind = "value: isAllDay" }))
    090.</div>
    091. 
    092.<div class="k-edit-label">
    093.    @(Html.LabelFor(model => model.Description))
    094.</div>
    095.<div data-container-for="description" class="k-edit-field">
    096.    @(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", @readonly = "readonly", data_bind = "value: description" }))
    097.</div>
    098. 
    099.<div class="k-edit-label">
    100.    @(Html.LabelFor(model => model.DutyID))
    101.</div>
    102.<div data-container-for="duties" data-task-id="@Model.TaskID" class="k-edit-field dutyPanel">
    103.    <div id="dutyPanel" class="dutyPanel"></div>
    104.</div>
    105. 
    106.@{
    107.    ViewContext.FormContext = null;
    108.}


    The div named DutyPanel is a panelBar that is loaded in JS in the onScheduleEdit event:

    01.$(function () {
    02.  
    03.    ////bind to the scheduler edit event
    04.    var scheduler = $("#scheduler").data("kendoScheduler");
    05.    scheduler.bind("edit", onSchedulerEdit);
    06.  
    07.    function onSelect(e) {
    08.  
    09.        e.preventDefault();
    10.    }
    11.  
    12.    function onSchedulerEdit(e) {
    13.  
    14.        var d = e.event.Duties;
    15.        $("#dutyPanel").kendoPanelBar({
    16.            expandMode: "multiple",
    17.            select: onSelect,
    18.            dataSource: jQuery.makeArray(d)
    19.        });
    20.  
    21.        var panelBar = $("#dutyPanel").data("kendoPanelBar").expand($("#dutyPanel .k-item"), true);
    22.  
    23.    };
    24.  
    25.  
    26.});



    Why would this work in IE and FF, but not Chrome, Safari or Opera?

    Is this a bug?



  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 Apr 2014 Link to this post

    Hi Alex,

    I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide runable project where the issue is reproduced? This would help us pinpoint the exact reason for this behavior.

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Eric
    Eric avatar
    19 posts
    Member since:
    Mar 2014

    Posted 27 May 2014 in reply to Vladimir Iliev Link to this post

    There seemed to be a slight definition error in my markup. All works as expected.
Back to Top