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

[Eric]

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?

[Vladimir Iliev]

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

 

 

[Eric]

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