We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ejSchedule - Group alignment glitch, and saving appointments performance

I'm building a schedule with a number of resource groups that when collapsed don't line up with the appointment section of the schedule. I've attached an image to show what i mean. I searched for the reason this is happening but can't find it. Any suggestions would be very appreciated.

Also I've noticed saving an appointment takes a while to complete. Which takes a very long time when saving multiple appointment in succession. Any suggestions on how to improve the perfomance?

Attachment: alignment_glitch_183eef5d.zip

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 8, 2017 05:54 AM UTC

Hi Brian,   
Thank you for contacting Syncfusion support.   
We suspect that required CSS files are not referred correctly which could be the cause for the issue and kindly ensure the following information at your end.   
1.       CSS files are referred correctly.   
2.       Any script error shows in console window.   
Kindly visit the online sample from the below link for your reference and if issue persist, kindly share your code example/runnable sample (if possible) to serve you better.  
Rendering more number of resources will cause some delay in CRUD operations because of re-rendering whole appointment collection to avoid overlapping issue. Performance is improved slightly in latest release compare to our previous versions and performance will be enhanced in our upcoming releases.  

BR Brian March 8, 2017 07:41 PM UTC

I don't have any errors in the console. I think I have the css referenced correctly. 
Here is some of my code:

// css
        <!-- Bootstrap core CSS -->
<link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" rel='nofollow' href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Custom styles for this template -->
<link rel='nofollow' href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">

<link rel='nofollow' href="http://cdn.syncfusion.com/" rel="stylesheet" />
<link rel='nofollow' href="Scheduler_v2_Style.css" rel="stylesheet" />
<link rel='nofollow' href="ej.widgets.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="ej.responsive.css" rel="stylesheet" />

My style sheet(Scheduler_v2_Style.css) is not causing it. When I comment it out the problem persists.

// Schedule init
// Style and View
width: "100%",
orientation: ej.Schedule.Orientation.Horizontal,
currentView: ej.Schedule.CurrentView.Month,
views: ["Month", "WorkWeek"], // Set views that we can see 11

// Templates
appointmentTemplateId: "#apptemplate",

// Settings
enableAppointmentResize: false,
enableLoadOnDemand: true,
appointmentDragArea: "body",
timeScale: false,
showDeleteConfirmationDialog: false,
showCurrentTimeIndicator: false,

// Data
group: {
resources: ["ParentGroups", "PlannedTasks"]
resources: [{
field: "parentGroupId",
title: "Parent Groups",
name: "ParentGroups",
allowMultiple: true,
resourceSettings: {
dataSource: $scope.owners,
text: "name",
id: "id",
color: "color"
}, {
field: "PlannedTaskId",
title: "Planned Tasks",
name: "PlannedTasks",
resourceSettings: {
dataSource: $scope.items,
text: "TaskCode",
id: "id",
groupId: "parentGroupId"
appointmentSettings: {
dataSource: $scope.scheduledTasks,
resourceFields: "parentGroupId, PlannedTaskId",
description: "TaskCode",
id: "id",
startTime: "javaStartDate",
endTime: "javaEndDate"

// apptemplate looks like this
                <script id="apptemplate" type="text/x-jsrender">
<div style="height: 20px;">
<div style="margin-left: 2px;">{{:FacilityCode}}, {{:TaskCode}}</div>

// Scope.owners looks like this
{"id":2,"name":"West Coast Drillers","color":"#f8a398","groupId":1},
{"id":3,"name":"East Coast Drillers","color":"#f8a398","groupId":1},
{"id":6,"name":"Sampling Equipment","color":"#f8a398","groupId":1}

// $scope.items looks like this
"TaskCode":"Groundwater samples - T1",
{"id":"2","FacilityCode":"TestFacility","TaskCode":"Water levels - T2","ScheduledTasksTotal":2,"parentGroupId":1},
{"id":3,"parentGroupId":2,"TaskCode":"Bob Hope"},
{"id":4,"parentGroupId":2,"TaskCode":"Barack Obama"},

KK Karthigeyan Krishnamurthi Syncfusion Team March 9, 2017 08:48 AM UTC

Hi Brian,   
Thanks for sharing code example. 
We have created an incident for your query and we request you to have a follow up with the below incident link for further update on this. 

Live Chat Icon For mobile
Up arrow icon