1. Home
  2. Forum
  3. Vue
  4. Rendering and generating e-resource on initial load

Rendering and generating e-resource on initial load

Hello,

In my application I am provided with different JSON objects, depending on the customer. But I never know beforehand how many resources have to be provided and which resource fields are needed. For this reason I have to load an n-number of resources and make the setting of the resource fields variable. For each customer all resources are the same regarding their resource fields. So I have to render n-e-resource elements and assign their data to them. How can I achieve this?

Regards Adrien

3 Replies
HB Hareesh Balasubramanian Syncfusion Team November 10, 2020 06:55 AM UTC

Hi Adrien, 

Greetings from Syncfusion Support..! 

We have validated your shared query “So I have to render n-e-resource elements and assign their data to them. How can I achieve this?” at our end and we suspect that your requirement is render the “n” number of resources for the Scheduler and for that, kindly refer to the below link in that we have rendered render nearly “300” resources for the Scheduler. In order to achieve better performance in the Scheduler when loading a large number of resources and events, we have added virtual scrolling support also. 

UG links:  

Note: If you want to add/remove the resources dynamically, please use addResource/removeResource public method. 


Kindly try the above UG link and get back to us if you need any further assistance. 

We will happy to assist you. 

Regards, 
Hareesh 


AP Adrien Pech November 10, 2020 12:21 PM UTC

Hello,


thank you for the quick response. Unfortunately this is not what I was looking for. I get a JSON object from the backend which could look like this:

var dataSet = {
  appointmentData: [{
Id: "1",
Subject: "Meeting 1",
StartTime: "2020-11-03 10:54:26",
EndTime: "2020-12-03 14:54:26",
RoomId: "1",
LevelId: "1"
  }, {
Id: "2",
Subject: "Meeting 2",
StartTime: "2020-11-03 21:03:42",
EndTime: "2020-12-03 23:03:42",
RoomId: "2",
LevelId: "2"
  }, {
Id: "3",
Subject: "Meeting 3",
StartTime: "2020-11-03 18:53:15",
EndTime: "2020-12-03 20:53:15",
RoomId: "3",
LevelId: "3"
  }],

  dataGroup: [{
Id: "1",
LevelText: "Ebene 1",
LevelColor: "#cb23ff",
LevelId: "1"
  }, {
Id: "2",
LevelText: "Ebene 2",
LevelColor: "#4ce100",
LevelId: "2"
  }, {
Id: "3",
LevelText: "Ebene 3",
LevelColor: "#8177ff",
LevelId: "3"
  }],

  dataResource: [{
Id: "1",
RoomText: "Raum101",
RoomId: "101",
RoomColor: "#ca43b6",
RefLevel: "1"
  }, {
Id: "2",
RoomText: "Raum201",
RoomId: "201",
RoomColor: "#60196e",
RefLevel: "2"
  }, {
Id: "3",
RoomText: "Raum301",
RoomId: "301",
RoomColor: "#0e15d5",
RefLevel: "3"
  }]
};

But in another example I could also get for example four resources. Now I want to make the e-resource element variable and generate it only after data transfer. I know that the following code is wrong but this is the way I imagined it:

 
  

or



and it should generate something like this:





Is there a way to achieve this result?

I also have a question regarding virtualLoading. So far it seems to work only for the vertical direction. Is there a possibility to integrate this for the horizontal direction as well. For example, if I have the TimelineWeek for a whole year (interval = 52), the loading takes a long time.

Regards Adrien

HB Hareesh Balasubramanian Syncfusion Team November 12, 2020 01:25 PM UTC

Hi Adrien, 

Thanks for the update. 

Q1: I could also get for example four resources. Now I want to make the e-resource element variable and generate it only after data transfer. I know that the following code is wrong but this is the way I imagined it 

We have validated your shared code snippets at our end and suspect that your requirement is to render the two-level resources for the Scheduler and for that, kindly refer to the below UG link. 


Q2: I also have a question regarding virtualLoading. So far it seems to work only for the vertical direction. Is there a possibility to integrate this for the horizontal direction as well. For example, if I have the TimelineWeek for a whole year (interval = 52), the loading takes a long time. 

We have checked your above requirement at our end, but regret to let you know this is not feasible with our Scheduler’s current architecture to render virtual scrolling support for the time scales and by default it is to achieve better performance in the Scheduler when loading a large number of resources and events, we have added virtual scrolling support in the timeline views to load a large set of resources and events instantly as you scroll. And for further reference, kindly refer to the below UG link. 


Please get back to us if you have any further queries. 

Regards, 
Hareesh 


Loader.
Up arrow icon