This is a migrated thread and some comments may be shown as answers.

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

2 Answers 54 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 2
Eric asked on 24 Apr 2014, 02:25 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 28 Apr 2014, 08:26 AM
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.

 
0
Eric
Top achievements
Rank 2
answered on 27 May 2014, 06:13 PM
There seemed to be a slight definition error in my markup. All works as expected.
Tags
Scheduler
Asked by
Eric
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Eric
Top achievements
Rank 2
Share this question
or