Hello.
We have build a Scheduler page using Kendo UI MVC Scheduler and we have a weird issue.
When I double click on an existing schedule item, the edit form pops up always. The problem is when I want to add a new item, by double clicking on the "white" area. This is not always working. After trying 2 or 3 times (maybe doing an edit pop up in between), the add new item popup starts to work. After poping out once, it works always, until a page reloads. The issue is more common in firefox, but it does happen in chrome as well.
Note that our scheduler only contains all-day items, so we show a week view with only the all day area visible. Please check screenshot.
I know it sounds a bit vague, but it does consistently happen, so I was wondering if other people face the same issue and what they do to overcome it.
Thanks in advance!
6 Answers, 1 is accepted
Could you please check the browser's developer tools for any js errors when clicking on a timeslot to add a new event? Are you able to reproduce the described behavior in our Kendo UI or MVC demos?
Regards,
Ivan Danchev
Telerik by Progress
Rank 1
Hello Ivan.
There are no js errors in either Firefox and Chrome when this happens. Also, the issue does not occur in your demos... :-(
Unfortunately, I cannot provide a link to the web site itself, since it is an intranet application. Still, a few details:
It is an MVC5 Web Application.
We are using bootstrap with solid theme, http://blacktie.co/demo/solid/.
The Scheduler is created via Razor, using the following code:
@(Html.Kendo().Scheduler<SchedulerHelpers.KendoBuildEvent>() .Name("uSchedule") .Height(600) .Editable(true) .Date(DateTime.Now.Date) .Timezone("Etc/UTC") .CurrentTimeMarker(false) .MajorTick(1440) .MinorTickCount(1) .AllDayEventTemplate("<div><strong>#= title #</strong><br /> #= Version # #= description #<br /> #= DevUser #") .Views(views => { views.WeekView(week => { week.SelectedDateFormat("{0:dddd d MMMM} - {1:dddd d MMMM}"); week.WorkWeekStart(2); week.WorkWeekEnd(5); week.WorkDayStart(DateTime.Now.Date.AddHours(9)); week.WorkDayEnd(DateTime.Now.Date.AddHours(17)); //week.MajorTick(480); //week.MinorTickCount(1); week.ShowWorkHours(true); week.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dddd d/M')#</span>"); week.WorkDayCommand(false); }); }) .Resources(resource => { resource.Add(m => m.Version) .Title("Version") .DataTextField("Text") .DataValueField("Value") .DataColorField("Color") .BindTo(QCVersions.ToArray()); resource.Add(m => m.DevUser) .Title("Developer") .DataTextField("Text") .DataValueField("Value") .BindTo(DevUsers.ToArray()); }) .DataSource(d => d .Model(mo => { mo.Id(f => f.Id); mo.Field(f => f.DevUser); mo.Field(f => f.Title).DefaultValue("Build"); }) .Read("Read", "BuildCalendar") .Create("Create", "CBuildCalendar") .Update("Update", "BuildCalendar") .Destroy("Delete", "BuildCalendar") ) .Events(e => { e.DataBound("scheduler_dataBound"); }))Regarding custom styling, we only have this:
<style type="text/css"> .k-scheduler-header-all-day td { height: 4.9em; } div[data-container-for='recurrenceRule'], div[data-container-for='end'], div[data-container-for='isAllDay'] { display: none; } label[for='recurrenceRule'], label[for='end'], label[for='isAllDay'] { display: none; }</style>Any ideas?
Rank 1
Ivan,
I did more tests and I think I now know how to reproduce. In my case, the AllDay cell is not a few pixels high (as in your examples), but spreads in all the height of the scheduler.
When I start with an empty week, it works ok. As soon as we add several events, the issue appears. This is because we are double clicking "lower" in the AllDay cell. I am now able to consistently work around the issue, by double clicking at the top part of Saturday or Sunday (they do not have events). Dblclick there opens the addNew form once. Afther opening once, the form always opens.
Please check the attached file for more info.
As you probably understand, the work around works for me as a developer, but it is not acceptable for the end product. Can you please guide me in overcoming it?
Thank you!
I applied the CSS styles you provided and even though they increase the height of the AllDaySlot I didn't notice any effect on adding an event even when multiple AllDay events already were present in the AllDaySlot. Please add any additional styles you are applying in your project to the following dojo example, replacing the Fiori css in the head section with your custom theme and try to reproduce the issue.
Regards,
Ivan Danchev
Telerik by Progress
Rank 1
Hello Ivan.
I updated the dojo you provided, and now the scheduler looks almost like mine. Check it here http://dojo.telerik.com/Owiji/2
In Chrome it works well. But in Firefox, eventhough we are not experiencing the exact same behaviour, it still does not show the add new form when double clicked.Double clicking on an existing works well and shows the edit form, but double click for new doesn't work at all (even after a successful edit, which is what it is doing in my case).
As I said, it is not the exact same behaviour, but maybe this issue will help you understand the one we are facing.
Thanks in advance for your time!
At our end the dojo sample you linked produces a js exception in both Chrome and Firefox (screenshot). After further analysis of your Scheduler configuration we found that the following two properties used together with these values are responsible for the error: majorTick: 1440 and showWorkHours: true by causing some of the existing events' slots calculation to fail. We would suggest either to set the second property to "false" or to use a smaller value for the first one. With the exception gone we were able to add new events by double clicking the cells in the AllDaySlot.
Regards,
Ivan Danchev
Telerik by Progress