ejSchedule - Group alignment glitch, and saving appointments performance

[Brian]

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

[Karthigeyan Krishnamurthi]

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.  

http://jsplayground.syncfusion.com/Sync_cbsqrj2r   

   

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 15.1.0.37 compare to our previous versions and performance will be enhanced in our upcoming releases.  

 

Regards,   

Karthigeyan   

 

[Brian]

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/14.4.0.15/js/web/flat-azure/ej.web.all.min.css" 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

$("#schedule").ejSchedule({

// 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>

</div>

</script>

// Scope.owners looks like this

[

{"id":1,"name":"Tasks","color":"#56ca99","groupId":1},

{"id":2,"name":"West Coast Drillers","color":"#f8a398","groupId":1},

{"id":3,"name":"East Coast Drillers","color":"#f8a398","groupId":1},

{"id":4,"name":"Trucks","color":"#f8a398","groupId":1},

{"id":5,"name":"Boats","color":"#f8a398","groupId":1},

{"id":6,"name":"Sampling Equipment","color":"#f8a398","groupId":1}

]

// $scope.items looks like this

[

{

"id":"1",

"FacilityCode":"TestFacility",

"TaskCode":"Groundwater samples - T1",

"ScheduledTasksTotal":2,

"parentGroupId":1

},

{"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"},

...

[Karthigeyan Krishnamurthi]

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. 

Incident link: https://www.syncfusion.com/support/directtrac/incidents      

Regards,
Karthigeyan