Categorized by date for two-column header in Week view

Question

Hello Support,Please refer to the screenshot attached where I mention 'current behaviour' and expected before understanding the question.Form the screenshot, you are seeing the Week view. Also, it contains the Group headers ie GroupModel concept.Now, what we want is Date should consists list of Persons rather than Persons containing Dates.I mean to say  ROOM1 should contain group of Dates. And each Date should contain group of  Persons.Is this is possible? If yes,      1) Please provide sample code or any link which has this kink of example.     2) Also, when we switch between Day and Week, what would be callback so, that we will call the backend API to fetch the list of schedulersRegards,Nanda ReddyAttachment: Week_View__Group_Header_cd9fb9ba.zip

Ravikumar Venkatesan · Accepted Answer

Hi Nanda, 

Thanks for the patience. 

We have checked the behavior of the angular ng-template with our end. The angular ng-template detect all the minor changes that happen with the component live when hovering, scrolling, and all other actions. Because of that, the template is executed continuously on any of the changes within the component. The use of eventTemplate(ng-template) makes it hard to work with Schedule in the IE11 browser. So, we suggest you to use the below-highlighted code to use the Schedule with the eventTemplate and improve the performance of the Schedule in the IE11 browser. We have modified your sample at our end which can be available below. 

[app.component.ts] 




import { ChangeDetectionStrategy } from '@angular/core'; 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService, TimelineViewsService, TimelineMonthService], 
  styleUrls: ['./app.component.scss'], 
  changeDetection: ChangeDetectionStrategy.OnPush 
}) 

Sample: https://www.syncfusion.com/downloads/support/forum/159811/ze/ej2-angular-schedule-IE-sample-1538795782 

kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan

Praveenkumar Narasimhanaidu · Answer

Hi Nanda, 

Greetings from Syncfusion support..! 

Q: Date should consists list of Persons rather than Persons containing Dates. 

We have validated your query at our end and let you know that we can able to partially achieve your requirement by setting byDate property to true and not feasible to achieve exact layout. We have also prepared sample for your reference which can be viewed from following link. 

sample : https://stackblitz.com/edit/scheduler-multi-level-resources?file=app.component.ts 

[app.component.ts] 





public group: GroupModel = { 
    resources: ["Projects", "Categories"], 
    byDate: true 
  }; 

Q: when we switch between Day and Week, what would be callback so 

In the time of switching between views navigating event will be triggered. We have also included navigating event code snippet in above sample for your reference. 

[app.component.ts] 





public onNavigating(args: NavigatingEventArgs) { 
    if (args.action === "view") { 
      console.log(" View changed to: ", args.currentView); 
    } 
  } 

Kindly try the above solutions and get back to us if you need any further assistance. 

Regards, 
Praveenkumar.

Nanda Reddy · Answer

Hello Praveenkumar,Hope you doing great!.Thanks for previous support. You responded same solution what I found regarding the 'byDate' for group solution.I am forwarding our code in zip file. You can have look at it.	Issue No.1	Now, when we apply the 'byDate' in our application, we are not able to see smooth response in IE11.	First  load my application in Chrome or Edge browser, You will understand what we are doing.	Basically, we are loading Grouping multi-level resources concept for our application like https://ej2.syncfusion.com/angular/documentation/schedule/resources/#grouping-multi-level-resources	Now when we load your sample app like https://ej2.syncfusion.com/angular/documentation/samples/schedule/multiple-level-resource-cs1/index.html in IE11. This is working properly.	But when we run our application, it is not running smoothly for Grouping multi-level resources. Could you please verify for the same?	Note. We are able to run our application in IE11 successfully. But, not with Scheduler running smoothly. Issue No.2 : 	Even though, we apply allowVirtualScrolling like below for both Day and Week, still it is take more time to load even in Chrome/Edge	    {option: 'Day', allowVirtualScrolling: true},		{option: 'Week', allowVirtualScrolling: true}	For Example		336 Schedulers, it takes 2 secs to render 		672 Schedulers, it takes 3 secs to render		1344 Schedulers, it takes 6 secs to render		2016 Schedulers, it takes 11 secs to render	As Schedulers is more, it takes more time to load		Is there any smart solution for this?Please modify the code and let me know what is the change that is done so that we will understand.Regards,Nanda ReddyAttachment: angularie11_e18b2433.zip

Ravikumar Venkatesan · Answer

Hi Nanda, 

Thanks for the update. 

We apply allowVirtualScrolling like below for both Day and Week still, it takes more time to load even in Chrome/Edge 

Currently, we don’t have the virtual scrolling support for the Day, Week, and Month views of the Schedule. The Agenda and Timeline view only having virtual scrolling support. So, we do not get the performance difference when setting up the allowVirtualScrolling property to the other views. We suggest you try the Timeline or Agenda views of the scheduler for the virtual scrolling feature. We suspect that the eventTemplate may take more loading time. So, we suggest you a workaround remove the eventTemplate now(If you are running the application in IE). We will analyze the cause with the “eventTemplate” and update you with the details in two business days on November 24, 2020. 

when we apply the 'byDate' in our application, we are not able to see a smooth response in IE11 

We have validated your above query at our end. Generally, IE11 has slow rendering performance when compared with the other browsers. Please find the details below. 

https://answers.microsoft.com/en-us/ie/forum/all/ie-11-is-incredibly-slow-any-idea-why/53158b6b-76c4-456a-9859-47c50def7795?page=2 

If we render the Schedule with the eventTemplate, it will take a high amount of time. 

Could you please try the timeline views with virtual scroll to make a better performance in IE 11 browser? 

Regards, 
Ravikumar Venkatesan