Loading lots of sections - javascript freezing ui

Scheduler Javascript
#1

I am doing my own ajax call to create a sections array and an events array. I then call scheduler.updateCollection(sections) and scheduler.parse(sections).

I show an animated loading gif while I run the ajax request and build the arrays. The gif stops animating untilthe updateCollection call has finished, obviously because scheduler is processing all of the sections.

Just wondering if there is any other way to optimize this. Unfortunately I cannot reduce the number of sections as I am using the timeline component and showing 2 weeks of jobs and there is 50 jobs per week.

#2

Are you calling scheduler.updateCollection only once or from the loop ?
The single call must not be so performance expensive. Can you share an example of “sections” array that causes such long rendering.

#3

Just once after I’ve built the array. I have included the code below but removed the redundant stuff.

I have already debugged to make sure it wasn’t the $.each of scheduler.parse functions. If I comment out the updateCollection call there is no freezing.

[code]$.each(model, function (index, job) {

sections.push({
	key: parseInt(job.id),
	label: job.customer.name + '<br>'  + job.street + ' ' + job.city + ' ' + job.state + ' ' + job.post_code
});

$.each(job.work_items, function (index, workItem) {

	events.push({

	// event properties

	});

});

});

scheduler.updateCollection(‘jobs’, sections);
scheduler.parse(events, ‘json’);[/code]

#4

Could you please attach a final list of sections to test ?

#5

It won’t let me upload the txt file with the 100 sections but here is a snippet, just copy and paste a few times:

[
{
“key”: 144,
“label”: “4211”
},
{
“key”: 145,
“label”: “4211”
},
{
“key”: 146,
“label”: “4020”
},
{
“key”: 147,
“label”: “4020”
}
]

#6

Did you have any success in replicating the problem?

#7

Hi,
on our samples “scheduler.updateCollection()” method works good with a list of 100 sections. May we have an online demo to test?

#8

I have found the issue and it is actually to do with addMarkedTimespan. In my project, I want to highlight the day that a job (section) starts so that events can be added from that date.

Is there a more optimal way to do this?


$.each(model, function (index, job) {

   sections.push({
      key: parseInt(job.id),
      label: job.customer.name + '<br>'  + job.street + ' ' + job.city + ' ' + job.state + ' ' + job.post_code
   });

   scheduler.addMarkedTimespan({
      start_date: moment(job.start_date).toDate(),
      end_date: moment(job.start_date).add('d', 1).toDate(),
      css: 'start_date',
      sections: {
         timeline: job.id
      },
      html: 'START'
   })

   $.each(job.work_items, function (index, workItem) {

      events.push({

      // event properties

      });

   });

});

scheduler.updateCollection('jobs', sections);
scheduler.parse(events, 'json');