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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ejSchedule - Group alignment glitch, and saving appointments performance

Thread ID:





129246 Mar 7,2017 06:43 AM UTC Mar 9,2017 08:48 AM UTC JavaScript 3
Tags: ejSchedule
Asked On March 7, 2017 06:43 AM UTC

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 [Syncfusion]
Replied On 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.  

Replied On 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"},

Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon